背景

大量参考了《Commit Better Code with Husky, Prettier, ESLint, and Lint-Staged》文章的内容，做了少许改动，尽量保留标准的配置。把命令综合汇总了一下。实在是这些配置变化太快了，每过一阵子就得重新学一遍。话不多说，直接上内容：

正文

1. 安装并配置 eslint、prettier

npm install --save-dev --save-exact prettier eslint-config-prettier
# or
yarn add -DE prettier eslint-config-prettier

初始化 eslint 配置（关键）

npm init @eslint/config 

根据自己的情况进行选择，下面是笔者的选项，仅供参考。

注：本来笔者热衷于 Airbnb 那种变态严格的规范，无奈老项目的技术债太多，逐渐也就选择 Standard 了。如果是笔者自己的从零开始的项目，还是会尝试用 Airbnb 的。

修改 .eslintrc.json

  "parser": "@typescript-eslint/parser",
  "extends": [
    // ...
    "prettier"
  ],
  "parserOptions": {
    "project": "./tsconfig.json",
    // ...
  },

创建 .eslintignore（如必要）

# eg:
src/*.test.js

创建 .prettierrc.json（如必要）

{
  "singleQuote": true,
  // "tabWidth": 2,
  // "useTabs": true,
  // "printWidth": 80,
  // "semi": true,
  // "trailingComma": "es5",
  // "jsxSingleQuote": true
}

2. 修复代码并提交个 commit

npx prettier --write "**/*.{js,jsx,ts,tsx}"
npx eslint --fix "**/*.{js,jsx,ts,tsx}"

为什么要在这里先修复一下呢？因为如果等会你要是启用了 husky + lint-staged 再修复，那你可能就提不上来了……

3. 安装并配置 husky、lint-staged

npx husky-init && npm install
npm i --save-dev lint-staged

# or

npx husky-init && yarn
yarn add -D lint-staged

.husky/pre-commit

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx lint-staged

package.json

  "lint-staged": {
    "**/*.{js,jsx,ts,tsx}": [
      "npx prettier --write",
      "npx eslint --fix"
    ]
  },

总结

完成！

如果是老项目，完成上面几步之后，后面就可以慢慢改了。估计改起来会挺痛苦，尤其是之前 TS 声明的不规范，不完整的情况下。这时候，你也可以做一些变通，把一些 error 变成 warn，这里只举个例子，让大家参考一下语法：

// .eslintrc.json

  "rules": {
    "@typescript-eslint/naming-convention": "warn"
    // ...
  }

如果是新项目，那么可以省略第 2 步，而且你会轻松和清爽非常多。所以，代码规范这种事，肯定是越早做越好。

最后，忍不住要吐槽一下。eslint、prettier 这两个家伙，几乎是我入行前端之后一直在打交道的。关键它们总更新，再综合上 ts、husky 什么的，更新一版就得重新研究一遍，实在是没个头。

一开始还比较较真，更愿意选择标准严格的 airbnb 的规范。那时候的天还很蓝，前端还很单纯。结果好景不长，后来有了 React、Vue、TypeScript、ES6/7/8+、Prettier……

从此前端世界再无宁日，算了，啥时候用啥时候研究吧……

参考

• Commit Better Code with Husky, Prettier, ESLint, and Lint-Staged
• eslint-config-* の比較表