前端通过eslint+prettier+husky统一代码风格

背景

多人协作项目，会遇到每个人都有自己的代码风格。所以需要通过工具来统一代码风格。

husky是什么？

当您提交或推送时，您可以使用 husky 来检查您的提交消息、运行测试、检查代码等Husky 支持所有 Git 钩子。

husky工作的原理？

通过 Husky 响应 Git hook 回调，一般是 (pre-commit)，(通过 Lint-stage 只选择更改的文件)，通过 eslint 校验代码规范，然后一些可以自动更改的通过 prettier 写入到文件，最终在commit 阶段 format 了本地代码，并且加入到了git 的stage。这样就保证了所有协作方的代码一致性。

eslint+prettier+husky 如何使用？

接下来我会使用 eslint prettier husky 来完成一个提交代码时触发自动化检测代码的demo。
demo是以vite+vue3+typescript+pinia 搭建的。

（1）配置代码风格

首先，需要配置项目的代码风格。
eslint 配置代码风格（是代码偏向语法层面上的风格），质量的检验，
prettier 用于代码格式的校验（是代码偏向于排版层面上的风格），
lint-staged 过滤文件。首先明确一下，Lint-staged 仅仅是文件过滤器，不会帮你格式化任何东西，所以没有代码规则配置文件，需要自己配置一下。

eslint 和 prettier 两者配合使用，即 ：使用 prettier 做格式化， eslint 做代码校验。

所以还需要 eslint-plugin-prettier，eslint-config-prettier 加强两者的配合
eslint-plugin-prettier 是一个 ESLint 插件， 由 Prettier 生态提供，用于报告错误给 ESLint
eslint-config-prettier 的作用是使用 Prettier 默认推荐配置，并且关闭 eslint 自身的格式化功能，防止 Prettier 和 ESLint 的自动格式化冲突。

安装所需的npm包

npm i eslint prettier lint-staged eslint-plugin-prettier eslint-config-prettier

常用的配置.prettier.js

module.exports = {
  printWidth: 120, // 换行字符串阈值
  tabWidth: 2, // 设置工具每一个水平缩进的空格数
  useTabs: false,
  semi: false, // 句末是否加分号
  vueIndentScriptAndStyle: true,
  singleQuote: true, // 用单引号
  trailingComma: 'es5', // 最后一个对象元素加逗号
  bracketSpacing: true, // 对象，数组加空格
  jsxBracketSameLine: true, // jsx > 是否另起一行
  arrowParens: 'always', // (x) => {} 是否要有小括号
  requirePragma: false, // 不需要写文件开头的 @prettier
  insertPragma: false // 不需要自动在文件开头插入 @prettier
}

.eslintrc.js建议采用自己的项目配置

以下是vue3+typescript的 eslintrc 部分配置

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
  },
  "overrides": [
    {
      "files": [
        "*.js"
      ],
      "extends": [
        // 继承Eslint中推荐的（打钩的）规则项http://eslint.cn/docs/rules
        "eslint:recommended",
        // 把 eslint-config-prettier 中设置的规则添加进来，让它覆盖上面设置的规则。这样就不会和上面的规则冲突了
        "plugin:prettier/recommended"
      ]
    },
    {
      "files": [
        "*.ts",
        "*.tsx"
      ],
      "parser": "@typescript-eslint/parser",
      "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module",
        "parser": "@typescript-eslint/parser"
      },
      "extends": [
        "prettier",
        "plugin:@typescript-eslint/recommended",
        "plugin:prettier/recommended"
      ]
    },
    {
      "files": [
        "*.vue"
      ],
      "parser": "vue-eslint-parser",
      "parserOptions": {
        "parser": "@typescript-eslint/parser",
        "ecmaVersion": "latest",
        "sourceType": "module"
      },
      "extends": [
        "prettier",
        "plugin:@typescript-eslint/recommended",
        "plugin:vue/vue3-recommended",
        "plugin:prettier/recommended"
      ],
     }
    ]
  }

（2）自动配置husky

安装husky

npx husky-init install // npm
yarn dlx husky-init  //  Yarn 2+ 
pnpm dlx husky-init  // pnpm

它将设置 husky，修改package.json并创建一个pre-commit您可以编辑的示例挂钩。默认情况下，它将npm test在您提交时运行.

把示例 npm test 修改成 npm run lint-staged 或者 您自己定义的命令

在 package.json中添加 lint-staged 命令:

"scripts": {
    .....
    "lint-staged": "lint-staged --allow-empty"
  },
 "lint-staged": {
    "*.{js,vue, ts}": [
      "prettier --write",
      "eslint --fix"
    ]
  }

在 git commit 的时候，就会触发 .husky/pre-commit 文件下 的命令行 npm run lint-staged 或者 您自己定义的命令。
在检查代码成功的时候会自动格式化代码然后帮您提交，如果无法自主修复，就会停止提交并告知错误行，及时改正后可以再次提交。
推荐：通过 vscode 等编辑器，安装 Eslint 和 prettier 插件来配置自动保存时自动格式化代码

{
 "editor.defaultFormatter": "esbenp.prettier-vscode",
 "editor.formatOnSave": true
}

demo

github地址：https://github.com/chenyajin/vite-project.git