eslint + pretier

先说结论：

1、先初始化一个项目

yarn create react-app cra-demo --typescript

yarn add typescript @types/react @types/react-dom

yarn add husky lint-staged prettier eslint-plugin-prettier eslint-config-prettier

编辑器安装 eslint 插件、prettier 插件，可以进行手动格式化

注意：现在编辑器不需要再设置 eslint.validate 了，替代的设置是 eslint:probe 而且常用的文件已经默认设置了，无需再自己设置

2、再打开 package.json

"eslintConfig": {
  "extends": [
    "react-app",
    "plugin:prettier/recommended",
    "prettier/react",
    "prettier/@typescript-eslint"
  ],
  "rules": {},
  "overrides": [
    {
      "files": [
        "**/*.ts?(x)"
      ],
      "rules": {}
    }
  ]
},
"lint-staged": {
  "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
    "eslint --fix"
  ]
},
"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
},

3、添加 .prettierrc.js 配置自己的代码格式化规则

// https://prettier.io/docs/en/options.html
module.exports = {
  tabWidth: 2,
  printWidth: 100,
  useTabs: false,
  semi: false,
  singleQuote: true,
}

解释一下这些配置

先看看 cra 自带的 eslint 里的 extends: react-app https://www.npmjs.com/package/eslint-config-react-app

这里面包含那些东西呢？

eslint-config-react-app
@typescript-eslint/eslint-plugin@2.x
@typescript-eslint/parser@2.x
babel-eslint@10.x
eslint@6.x
eslint-plugin-flowtype@4.x
eslint-plugin-import@2.x
eslint-plugin-jsx-a11y@6.x
eslint-plugin-react@7.x
eslint-plugin-react-hooks@2.x

这么多东西 cra 已经为我们集成了，包括 typescript-eslint eslint-plugin-react eslint-plugin-react-hooks 我们都不用去安装，也不用去配置（集成再 react-app 里了）

react-app 还包含一些基础的 eslint 规则，其实完全够了（不需要再装什么第三方 eslint 配置）

少部分需要约束的语法检查可以放在 rules 里

overrides 指的是针对特殊的文件应用哪些规则

再来说说 prettier 和 eslint 的关系，以及相关配置

prettier 专门负责代码格式化的工具，github 上非常流行，也是 cra 推荐的 https://github.com/prettier/prettier

eslint 处理代码格式 + js 语法检查

我们希望使用 prettier 来替代 eslint 里的代码格式检查，语法检查仍然用 eslint

这里涉及到这些包 prettier eslint-plugin-prettier eslint-config-prettier 其中：

prettier 是基础包

eslint-plugin-prettier 的作用是：

1. 替代 eslint 的代码格式检查，编辑器的 eslint 插件提示格式错误会使用 prettier，使用命令 eslint --fix 时也会使用 prettier 来处理代码格式化
2. 阻止 eslint 的代码格式检查避免冲突，需要安装 eslint-config-prettier

eslint-config-prettier 的作用是阻止某些 eslint 的代码格式检查，避免和 prettier 冲突

对应的设置是：

"extends": [
  "react-app",
  "plugin:prettier/recommended", // prettier 推荐的规则，需要修改的可以在 .prettierrc.js 文件里配置
  "prettier/react", // 由于 react-app 里包含了 eslint-plugin-react，这里的意思是阻止 eslint-plugin-react 的代码格式检查
  "prettier/@typescript-eslint" // 同上
],

再来看看 git 提交 commit 时进行格式化代码和语法检查，语法检查失败时会阻止

需要安装的包是 husky lint-staged 对应的配置：

husky 是 git 钩子，lint-staged 作用是对 git "将要提交的文件" 进行处理

"lint-staged": {
  "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
    "eslint --fix" // 对 git 将要提交的文件进行语法检查并格式化
  ]
},
"husky": {
  "hooks": {
    "pre-commit": "lint-staged" // 在提交代码前执行命令任务 lint-staged
  }
},

其他

"@typescript-eslint/no-unused-vars": "warn",