有了好的配置，linter 是一个很好的工具，可以在错误发生之前捕获它们。它过多地关注风格，使它成为一种干扰。

背景 & 起源

当团队有新小伙伴加入时，若项目配置不完善，vscode插件不统一，代码format风格不同，将产生下面的修改
- 单/双引号
- 换行时机
- 代码空格与tab 莫名其妙就有奇怪的commit上去了，所以代码的静态检查是十分重要的。

自动格式化让代码更优雅，工程更可靠的利器。每次if、else的位置空格如果通过手动的方式编排必然增加大量的工作量，如果能在每一次保存时自动完成，将给我们带来极大的便利，并且若在一个多人同步协作开发的项目中，各位coder的格式化风格不一致，导致文件提交中频繁的出现代码格式的变动，在代码review的过程中设计大量格式变动。

代码错误检查让代码更健壮，代码完成后不小心按了下ctrl+z+ctrl+s，一不小心git合并后流水化上线，悲剧了。。若在commit时，自动有eslint检测代码error，将减少失误。

那么，编辑器有哪些自动代码检查的能力，格式化的规则从何而来又如何生效，使用格式化工具会遇到哪些问题，他们如何产生又如何解决呢？下面就来介绍一下好用的工具：ESLint、husky、lint-staged、Prettier、commitlint、commitizen等。这些工具有点有：

保证代码风格的统一，增加可读性。
规范Commit，减少Commit标签错误，降低新人Commit Type的学习成本，通过工具约束规范
方便工程化流水线版本自动发布

基本安装与配置

统一安装

npm install --save-dev eslint prettier eslint-plugin-prettier eslint-plugin-react @typescript-eslint/{eslint-plugin,parser} eslint-plugin-react-hooks eslint-config-prettier

配置七步曲

1. 检查`.vscode/settings.json`是否有以下配置

// .vscode/settings.json

{

  "editor.codeActionsOnSave": {

    "source.fixAll.eslint": true // 安装了eslint后才生效,保存时自动格式化

  }

}

2. ESLint，检测代码错误

检查并修改.eslintrc.js

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier",
    "plugin:prettier/recommended",
    "plugin:react/jsx-runtime",
    "react-app",
  ],
  overrides: [],
  parser: "@typescript-eslint/parser",
  parserOptions: {
    ecmaVersion: "latest",
    sourceType: "module",
  },
  plugins: ["react", "@typescript-eslint", "prettier", "react-hooks"],
  rules: {
    "no-console": "error",
    "prettier/prettier": "error",
    "react-hooks/rules-of-hooks": "error",
  },
};

(如果没有)npx eslint --init
eslint模板，选择合适的模板
react-hooks推荐：eslint-plugin-react-hooks

3. Prettier代码格式化

建议使用eslint-plugin-prettier，

如果你已经在你的项目中使用ESLint，可以安装eslint-plugin-prettier来添加Prettier作为ESLint的规则配置，来为你运行Prettier。

yarn add --dev prettier eslint-plugin-prettier eslint-config-prettier

plugins中添加prettier即可

如果要使用推荐配置可以引入，eslint-config-prettier，在.eslintrc.js中添加

在extends中添加"plugin:prettier/recommended"

rules: {
    'prettier/prettier': [
      'error',
      {
        trailingComma: 'es5',
        tabWidth: 4,
        semi: true,
        singleQuote: true,
        printWidth: 100,
        arrowParens: 'always',
      },
    ],
    'react/display-name': 'off',
    'react/prop-types': 'off',
    'react/react-in-jsx-scope': 'off',
  },

4. husky---githook

Git Hooks是定制化的脚本程序，所以它实现的功能与相应的git动作相关,如下几个简单例子：
1.多人开发代码语法、规范强制统一
2.commit message 格式化、是否符合某种规范
3.如果有需要，测试用例的检测
4.服务器代码有新的更新的时候通知所有开发成员
5.代码提交后的项目自动打包（git receive之后）等等...

npm install --save-dev husky

npx husky install

npx husky add .husky/commit-msg 'npx --no-install commitlint --edit $1'
npx husky add .husky/pre-commit 'npm run lint'

npm set-script prepare "husky install" && npm run prepare

4.0版本后无需在package中写脚本了

5. lint-staged，只检测暂存区的代码，加快速度，每次检测通过后再提交，所以只需保证增量正确

npm安装npm i -D lint-staged

{
// package.json查看
// ...
"lint-staged": {
    "*{.js,.jsx,.ts,.tsx}": [
        "eslint --cache --fix",
        "git add ."
        ]
    }
}

配置后pnpm lint-staged则会让eslint命令中自动带上staged文件的路径，只检查staged文件。在pre-commit中的pnpm lint改为pnpm lint-staged命令注：pre-commit根据husky的版本不同在pre-commit文件或在package.json的husk配置中

6. commitlint，commit时lint检测

// 安装
npm install --save-dev @commitlint/{config-conventional,cli}

配置，根目录创建一个 commitlint.config.js 文件

module.exports = { extends: ['@commitlint/config-conventional'] }

强制检查git commit的规范

7. commitizen，commit变成选择题，想不规范都难

npm install --save-dev commitizen cz-conventional-changelog

{ "path": "cz-conventional-changelog" }

使用 yarn/pnpm/npx git-cz

ps: .vscode/.setting.json里的配置优先其次走eslintrc.js

代码规范Lint