VSCode 配置ESLint + Prettier 统一前端代码风格

原理

使用 eslint 检查代码
使用 prettier 作为 eslint 的插件来格式化代码

安装 VSCode 插件

直接通过商店安装即可，这里附上官网链接：

项目中的配置

配置 ESLint

安装eslint、prettier、babel-eslint、eslint-plugin-react、eslint-plugin-react-hooks以及与 prettier 相关的扩展eslint-plugin-prettier和eslint-config-prettier
```
npm install --save-dev babel-eslint eslint eslint-plugin-react prettier eslint-plugin-react-hooks eslint-config-prettier eslint-plugin-prettier
```
规则方面有很多，各家有各家的规则，如airbnb、Google等。这里以企鹅家的为例：https://github.com/AlloyTeam/eslint-config-all-alloy
```
npm install --save-dev eslint-config-alloy
```

在项目根目录创建文件.eslintrc，下面是我自己的默认配置：

//.eslintrc
{
// 使用babel-eslint作为解释器
"parser": "babel-eslint",
"parserOptions": {
  "sourceType": "module",
  "allowImportExportEverywhere": false,
  "codeFrame": false
},
// alloy是企鹅家的eslint规则扩展
// plugin:prettier/recommended是集成prettier的扩展
"extends": ["alloy", "alloy/react", "plugin:prettier/recommended"],
"plugins": ["react"],
// 运行环境
"env": {
  "browser": true,
  "jest": true
},
// 这里可以自定义
"rules": {
  "max-len": ["error", { "code": 100 }],
  "prefer-promise-reject-errors": ["off"],
  "react/jsx-filename-extension": ["off"],
  "react/prop-types": ["warn"],
  "no-return-assign": ["off"]
}
}

配置 Prettier

一些与样式相关的规则（比如 tab 长度、分号等）直接用Prettier来处理

在项目根目录创建.prettierrc，下面是我的一份简单的默认配置：

//.prettierrc
{
  "printWidth": 100,
  "trailingComma": "all",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true
}

VSCode 的 Workspace 配置

{
  ...
  "editor.formatOnSave": true,
  "eslint.autoFixOnSave": true
  ...
}

在 VSCode 中，默认 ESLint 并不能识别 .vue、.ts 或 .tsx 文件，所以需要做如下配置：

{
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue",
    "typescript",
    "typescriptreact"
  ]
}

如果需要针对 .vue、.ts 和 .tsx 文件开启 ESLint 的 autoFix，则需要如下配置：

{
  "eslint.autoFixOnSave": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "vue",
      "autoFix": true
    },
    {
      "language": "typescript",
      "autoFix": true
    },
    {
      "language": "typescriptreact",
      "autoFix": true
    }
  ]
}

可能遇到的问题

1. ESLint 和 Prettier 冲突

在前面的命令中我已经做了处理了

官方给了很好的解决办法：https://prettier.io/docs/en/integrating-with-linters.html

eslint-plugin-prettier exposes a recommended configuration that configures both eslint-plugin-prettier and eslint-config-prettier in a single step. Add both eslint-plugin-prettier and eslint-config-prettier as developer dependencies, then extend the recommended config:
yarn add --dev eslint-config-prettier eslint-plugin-prettier
Then in .eslintrc.json:
{
"extends": ["plugin:prettier/recommended"]
}

2. VSCode 中 Prettier 插件报错

暂时我还没解决… 但是貌似不影响正常格式化使用。

原理