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


原理

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

安装 VSCode 插件

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

项目中的配置

配置 ESLint

  1. 安装eslintprettierbabel-eslinteslint-plugin-reacteslint-plugin-react-hooks以及与 prettier 相关的扩展eslint-plugin-prettiereslint-config-prettier

    npm install --save-dev babel-eslint eslint eslint-plugin-react prettier eslint-plugin-react-hooks eslint-config-prettier eslint-plugin-prettier
  2. 规则方面有很多,各家有各家的规则,如airbnbGoogle等。这里以企鹅家的为例: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 插件报错

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


文章作者: 玄霄
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 玄霄 !
评论
  目录