原理

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

安装 VSCode 插件

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

• ESLint
• Prettier

项目中的配置

配置 ESLint

1. 安装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

2. 规则方面有很多，各家有各家的规则，如airbnb、Google等。这里以企鹅家的为例：https://github.com/AlloyTeam/eslint-config-all-alloy

   npm install --save-dev eslint-config-alloy

3. 在项目根目录创建文件.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 插件报错

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