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

配置

项目根目录中添加.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
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",
    // 以下为该项目自定义部分
    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-undef": 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"      
    }    
}

当然也可以在 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": {}
  },
}

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

忽略文件

.eslintignore文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
*.sh
node_modules
*.md
*.woff
*.ttf
.vscode
.idea
dist
/public
/docs
.husky
.local
/bin
.eslintrc.js
prettier.config.js
/src/mock/*

开发工具配置

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