VSCode + ESLint + Prettier 代码语法检查和格式化

前言

在我们做项目的时候，特别是团队协作时，每个人的编码风格和编码方式都不一样，这样在同一个项目中看起来会比较乱，特别是如果每个人在修改代码时都按自己的规则做一下格式化，那么提交记录也会很乱，导致后面查问题也不好查。为此，同一项目或同一团队有必要保持一个统一的编码规范。这类介绍一下如何在 vscode 中通过 eslint + prettier 来对代码进行语法检查和风格统一。目前我们的项目主要是 tsx 为主，接下来的配置说明也将以 tsx 为主。

配置 ESLint

常用配置

eslint 主要用于语法检查，而 prettier 主要用于代码风格，为了避免 eslint 中包含的代码风格检查与 prettier 冲突，应该将代码风格检查交给 prettier，而 eslint 只专注于语法检查。并且 eslint 的语法检查规则每个人想法也不一样，这里博主推荐 AlloyTeam 团队的 eslint-config-alloy，它已经为我们提供了一套完善的配置规则，并且与 Prettier 是完全兼容的（eslint-config-alloy 不包含任何代码格式的规则，代码格式的问题交给更专业的 Prettier 去处理）。

首先安装对应的 node_modules

npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react eslint-config-alloy

然后在项目根目录下创建一个.eslintrc.js文件，文件内容如下：

module.exports = {
   
  extends: ["alloy", "alloy/react", "alloy/typescript"],
  env: {
   
    // Your environments (which contains several predefined global variables)
    //
    browser: true,
    node: true,
    mocha: true,
    jest: true
    // jquery: true
  },
  globals: {
   
    // Your global variables (setting to false means it's not allowed to be reassigned)
    //
    // myGlobal: false
  },
  rules: {