vue3+vite+ts接入eslint配置

一、前言

项目用了yarn做包管理，所以之后的所有的依赖都是通过yarn安装的。

二、增加eslint配置

1、安装eslint

yarn add eslint -D

2、初始化eslint的配置

yarn eslint --init

此时eslint会提供各种选项进行配置的半自定义。

√ How would you like to use ESLint?     你希望怎样使用eslint

√ What type of modules does your project use?  　　你的项目使用什么模块

√ Which framework does your project use?  当前项目使用的框架选择

√ Does your project use TypeScript? · No / Yes  是否使用typescript

√ Where does your code run? · browser, node  代码运行在哪

√ How would you like to define a style for your project? ·  guide 项目样式

√ Which style guide do you want to follow? · standard-with-typescript  项目风格

√ What format do you want your config file to be in? · JavaScript  配置文件格式

√ Would you like to install them now? · No / Yes  确认是否安装

√ Which package manager do you want to use? · yarn 安装方式

3、增加用于解析vue单文件组件的eslint解析器

yarn add vue-eslint-parser -D

在.eslintrc中配置对应的解析器

"parser": "vue-eslint-parser",

4、调整eslint配置表

增加eslint的运行环境

"env": {
    "browser": true,
    "node": true,
    "es2021": true,
    "es6": true
},

增加解释器的配置项

"parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module",
    "project": [
        "./tsconfig.json",
        "./tsconfig.node.json"
    ],
    "parser": "@typescript-eslint/parser",
    "extraFileExtensions": [
        ".vue"
    ]
},

5、修改package.json配置，增加整体格式化项目代码的命令

"scripts": {
    "lint": "eslint --fix \"./src/**/*.{ts,js,vue}\""
},

6、配置eslint过程中可能遇到的问题

6.1、Error: Error while loading rule '@typescript-eslint/dot-notation': You have used a rule which requires parserServices to be generated. You must therefore provide a value for the "parserOptions.project" property for @typescript-eslint/parser.

解决方案：

在配置中增加

"parserOptions": {
        "project": [
            "./tsconfig.json"
        ],
},

原因：@typescript-eslint/parser会解析项目更目录下的tsconfig.json中的配置，因为tsconfig.json中配置了整个项目所需的编译文件和编译选项。

6.2、The extension for the file (.vue) is non-standard. You should add parserOptions.extraFileExtensions to your config

解决方案:

在配置中增加

"parserOptions": {
        "extraFileExtensions": [
            ".vue"
        ]
},

原因：默认解析器是不会对.vue相关的文件进行解析的，所以需要进行额外的配置

6.3、Parsing error: ESLint was configured to run on <tsconfigRootDir>/vite.config.ts using parserOptions.project

解决方案：

在配置中增加

"parserOptions": {
        "project": [
            "./tsconfig.node.json"
        ],
},

三、增加vite-plugin-eslint插件

1、插件作用

该插件可以在项目build之前校验是否存在代码规范问题，然后抛出对应的异常，终端构建。如下：

2、安装vite-plugin-eslint插件

yarn add -D vite-plugin-eslint

3、配置插件

在vite.config.ts配置文件中增加对应插件的引用

然后再配置中增加对应的初始化

import eslintPlugin from 'vite-plugin-eslint'



plugins: [

     ...

    eslintPlugin({

      include: ['src/**/*.ts', 'src/**/*.vue', 'src/*.ts', 'src/*.vue']

    }),

    ...

  ],

4、可能遇到的问题

4.1、无法找到模块“vite-plugin-eslint”的声明文件。“xxxx”隐式拥有 "any" 类型。

There are types at 'xxxxx/index.d.ts', but this result could not be resolved when respecting package.json "exports". The 'vite-plugin-eslint' library may need to update its package.json or typings.ts(7016)

错误原因：

在新版 TypeScript 中，已经不在使用 package.json 根结构中的 types 字段。而是需要在 exprots 中添加 typs 字段。官方文档

如：

{

  "name": "vite-plugin-eslint",

  "version": "1.8.1",

  "description": "ESLint plugin for vite.",

  "author": "Xiang Gao",

  "license": "MIT",

  "main": "./dist/index.js",

  "module": "./dist/index.mjs",

    // 旧版声明

  "types": "./dist/index.d.ts",

  "exports": {

    ".": {

   // 新版本的声明

      "import": {

        "types": "./dist/index.d.ts",

        "default": "./dist/index.mjs"

      },

      "require": "./dist/index.js"

    }

  },

 …

}

解决方案：目前直接把对应的错误注释掉了，不影响整体运行，网上找的各种方案实操都失败了

四、增加Prettier

1、增加prettier需要的插件

yarn add prettier eslint-config-prettier eslint-plugin-prettier stylelint-config-prettier -D

各个插件的作用：

prettier：prettier插件

eslint-config-prettier：eslint和prettier之前对于代码规范的配置可能存在冲突，如一个希望单引号，一个希望是双引号。这个插件就是用于解决eslint和prettier冲突，该插件会禁止于prettier冲突的eslint规则

eslint-plugin-prettier：将prettier作为eslint规则，eslint可以按照prettier的配置进行格式化代码

stylelint-config-prettier：关闭所有不必要的或者有可能与Prettier冲突的规则

2、在eslint配置中增加prettier的引用

{

    …… 

    "extends": [

      ……       

      "plugin:prettier/recommended"

],

3、配置prettier的规则

{

  printWidth: 120; // 超过最大值换行

  tabWidth: 2; // 缩进字节数

  semi: false; // 句尾添加分号

  singleQuote: true; // 使用单引号代替双引号

  trailingComma: "all"; // 在对象或数组最后一个元素后面是否加逗号

}

至此，一个项目的代码格式规范基本配置完成