Eslint配置

发表于 | 分类于
Eslint配置、编辑器格式配置

前言

开发的过程中不同的编辑器，不同的格式化插件对应的代码格式都有差异，这就导致代码风格不一致或是合并冲突。

这里建议不使用开发IDE自带的格式功能，使用ESLint对代码格式进行约束和格式化。

ESLint配置

依赖

package.json

相关依赖

1
2
3
4
5
6
7
8
9
10
11
12
13
{
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "eslint": "^7.32.0",
    "@babel/eslint-parser": "^7.12.16",
    "eslint-plugin-vue": "^8.0.3",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "prettier": "^2.4.1",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^4.0.0",
  },
}

模块作用

1
2
3
4
5
6
7
8
9
10
11
// 这里须要全局安装最主要的两个node 模块，主要是要让 ide 编辑器可以读取全局环境来调用这2个模块
npm install eslint prettier -g --save-dev

// 支持Vue文件中html的格式化
npm install --save-dev eslint-plugin-vue

// 这个是为了 eslint 跟 prettier 能够联合使用
npm install --save-dev eslint-plugin-prettier

// 这个是为了让 eslint 跟 prettier 兼容，关闭 prettier 跟 eslint 冲突的rules
npm install --save-dev eslint-config-prettier

排除目录

在 .eslintignore 文件中排除那些不需要校验的文件和目录，减少 ESLint 扫描的范围。

.eslintignore 文件

1
2
3
4
5
6
7
node_modules
dist
build
public
.vscode
.idea
.local

以上配置会让 ESLint 跳过这些目录下的文件校验。

规则配置

方式1

项目根目录中添加.eslintrc.js

该配置文件修改时，项目重新运行时才会生效。

项目根目录添加.eslintrc.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    "plugin:vue/essential",
    "eslint:recommended",
    "plugin:prettier/recommended",
  ],
  parserOptions: {
    parser: "@babel/eslint-parser",
  },
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
    // 以下为该项目自定义部分
    "no-unused-vars": 0, //不能有声明后未被使用的变量或参数 - 关闭
    "no-undef": 0, //不能有未定义的变量 - 关闭
    "no-empty": ["error", { allowEmptyCatch: true }], //禁止异常捕获中的空代码块 - 关闭
    indent: [0, 2], //缩进风格 - 开启 缩进2格
    "no-spaced-func": 2, //函数调用时 函数名与()之间不能有空格 - 开启
    "no-const-assign": 2, //禁止修改const声明的变量 - 开启
    "space-before-function-paren": [0, "always"], //函数定义时括号前面要有空格 - 关闭
    "eol-last": 0, //文件以单一的换行符结束 - 关闭
    camelcase: 0, //强制驼峰法命名 - 关闭
    "no-alert": 0, //禁止使用alert confirm prompt - 关闭
    "arrow-parens": 0, //箭头函数用小括号括起来 - 关闭
    "vue/multi-word-component-names": 0, //组件名称必须使用多个单词 - 关闭
  },
};

规则

  • 0： 关闭规则。
  • 1： 打开规则，并且作为一个警告，字体颜色为黄色（并不会导致检查不通过）。
  • 2：打开规则，并且作为一个错误 ，色体颜色为红色(退出码为1，检查不通过)。

其中

一般使用@babel/eslint-parser作为parser，若使用typescript，则一般使用@typescript-eslint/parser

typescript插件@typescript-eslint

1
2
3
4
// .eslintrc
{
  "extends": ["plugin:prettier/recommended"]
}

就相当于

1
2
3
4
5
6
7
// .eslintrc    
{      
  "plugins": ["prettier"],      
    "rules": {        
      "prettier/prettier": "error"      
    }    
}

方式2

当然也可以在 package.json 中配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended",
      "plugin:prettier/recommended",
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {}
  },
}

但是同时只能配置一处，两处都配置会有问题。

校验太慢

运行的时候卡在这个地方很慢

sealing (finish module graph ESLintWebpackPlugin_1)

有下面三种优化的方式

  • 排除目录文件
  • 开启缓存
  • 开启多线程

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const ESLintPlugin = require("eslint-webpack-plugin");
module.exports = defineConfig({
  lintOnSave: "warning",
  configureWebpack: {
    plugins: [
      new ESLintPlugin({
        extensions: ["js", "vue"],
        exclude: ["node_modules", "dist", "public"], // 排除目录
        cache: true, // 开启缓存
        threads: true // 开启多线程检查
      })
    ]
  }
})

exclude 和 .eslintignore 生效策略

  • 优先级：

    当 exclude 选项和 .eslintignore 文件的规则有冲突时，两者都会生效，即同时排除 exclude 选项和 .eslintignore 文件中指定的文件和目录。

  • 互补关系：

    exclude 选项主要用于 Webpack 构建过程中的排除，而 .eslintignore 文件则用于全局的排除，两者可以结合使用，以满足不同的需求。

IDE自动修复

IDEA

下面的两种方式都有这么一个问题

执行的时候相当于执行Save的同时执行eslint --fix。

这就没办法保证两者的先后，Save的时候会进行代码校验，如果Save先结束就会导致后来执行eslint --fix的代码已经符合规范了，但是依旧会报错。

建议关闭保存时的lint校验 lintOnSave: false,，这是不影响IDEA或者是VSCode保存时的格式化的。

vue.config.js

1
2
3
4
5
6
7
const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
  transpileDependencies: true,
  publicPath: "./",
  outputDir: "output",
  lintOnSave: false,
});

方式1

IDEA的设置中可以勾选如下的操作，这样保存时会自动修复。

image-20220726151129593

方式2

首先点击 Edit => Macros 进入录制状态

在我们的代码页面右键点击Fix ESLint Problems,再点击菜单中的File=>Save All进行保存

这里不建议直接点击Ctrl+S，因为如果之前这个快捷键改了操作，可能会导致死循环。

image-20220303103725886

结束录制 宏名称设置为eslint_fix_save

打开IDEA设置页面，点开keymap设置页，搜索eslint_fix_save

设置快捷键为Alt+S,这样我们就可以按Alt+S进行格式化并且保存了。

注意：

这里快捷键是可以设置为Ctrl+S的，因为宏中记录的不是快捷键而是快捷键对应的操作。

VSCode

先把自带的格式化取消掉，否则两个会冲突。

image-20220727185411909

在 VSCode 中，默认 ESLint 并不能识别 .vue、.ts 或 .tsx 文件，需要在「文件 => 首选项 => 设置」里做如下配置：

1
2
3
4
5
6
7
8
9
{
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue",
    "typescript",
    "typescriptreact"
  ]
}

保存时自动修复 ESLint 错误

如果想要开启「保存时自动修复」的功能，你需要配置 .vscode/settings.json：

1
2
3
4
5
6
{
  "eslint.validate": ["javascript", "javascriptreact", "vue", "typescript", "typescriptreact"],
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
}

VSCode 的一个最佳实践就是通过配置 .vscode/settings.json 来支持自动修复 Prettier 和 ESLint 错误：

1
2
3
4
5
6
7
8
9
10
11
12
{
  "files.eol": "\n",
  "editor.tabSize": 2,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "eslint.validate": ["javascript", "javascriptreact", "vue", "typescript", "typescriptreact"],
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

编辑器格式

编辑器的格式配置

这种方式只能简单的约束 使用ESLint和其对应的格式化工具可以不配置这个。

在项目根目录下新建文件.editorconfig文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# http://editorconfig.org
root = true
 
[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
 
[*.md]
trim_trailing_whitespace = false
 
[Makefile]
indent_style = tab

ESLint 校验

vue.config.js

1
2
3
module.exports = defineConfig({
  lintOnSave: "warning",
}

这里的 lintOnSave 选项有几个不同的值：

  • false：不进行 ESLint 校验。
  • true：在开发和生产环境下都会在保存文件时进行 ESLint 校验，并且会将警告和错误输出到控制台，但不会阻止打包。
  • 'warning'：与 true 类似，不过只会将警告信息输出到控制台。
  • 'error'：在保存文件和打包时都会进行 ESLint 校验，并且一旦有警告或错误就会阻止打包。

lintOnSave 有不同的配置值，不同值的触发情况和表现有所不同：

  • true：保存文件时会触发 ESLint 校验，并且会在控制台输出校验警告和错误信息，但不会阻止文件保存和代码继续运行。

  • false：关闭保存文件时的 ESLint 校验，无论何时保存文件都不会触发校验。

  • 'error'：保存文件时触发 ESLint 校验，当出现任何 ESLint 错误时，会将这些错误视为编译错误，阻止代码编译和文件保存。这种配置可以强制开发者在保存代码时修复所有 ESLint 错误，保证代码质量。

项目修复

在项目根目录下，你可以通过命令行运行 ESLint 并带上 --fix 选项，ESLint 就会自动尝试修复那些它能够处理的格式问题。

基础命令

如果你已经全局安装了 ESLint，可以直接使用以下命令：

1
eslint --fix src

这里的 src 代表要检查和修复的目录，你可以依据项目实际情况替换成其他目录，例如 src/components、src/pages 等。

若要对整个项目进行检查和修复，可使用 . 来表示当前目录：

1
eslint --fix .

配置脚本

在 package.json 中配置脚本

为了方便使用，你可以在 package.json 的 scripts 字段里添加一个脚本：

1
2
3
4
5
{
    "scripts": {
        "lint:fix": "eslint --fix ."
    }
}

之后在命令行中运行以下命令即可完成修复操作：

1
npm run lint:fix