husky、prettier、eslint、lint-staged 使用（代码规范）

前言：

一个项目如果涉及到多人协作，由于每个人代码的书写习惯和风格不太一样，如果没有统一的规范，那就会很乱，这对代码的可维护性大大降低。

所以现代工程有个环节就是代码风格检查(lint)，来保障代码规范一致性。

现在有很多保障代码规范一致性，比如：ESLint、prettier 等。

本文是对几种代码规范工具的作用以及如何使用做一个简单介绍。

husky

在 git 中存在一些钩子，其中较常用的有 pre-push、pre-commit，其中 pre-commit 钩子会在 commit 前触发，pre-push 会在 push 前触发。（所有钩子默认情况下都是禁用的）

这些钩子可以用来干嘛？

我们可以利用 pre-commit 钩子在 commit 时对代码先进行 eslint 检查，如果不合格就不给 commit，
不过使用 git 钩子稍微麻烦，于是就有了 husky ，它能让我们使用 git 钩子变得更加容易。

// 安装 husky
$ npm install husky --save-dev
// 启用 git hooks
$ npx husky install

执行完之后文件目录会多一个 .husky 文件。

在 package.json 文件的 scripts 中新增命令自动启用 git hooks:

// package.json
scripts: {
    "prepare": "husky install"
}

创建一个 pre-commit hook

$ npx husky add .husky/pre-commit "npm run lint"

执行完之后 .husky 目录下会多一个 pre-commit 文件，里面的 npm run lint 就是这个 hook 要执行的命令，后续可以直接改这个文件执行其它命令。

现在 commit 的话就会先自动执行 npm run lint ，然后才会 commit。

但是每次 lint 是整个项目的文件，如果整个项目过大文件太多会跑很久，另外如果不是一开始就 lint，后面新增的 lint 可能会报很多错误。要解决这个问题，需要使用后面提到的 lint-staged，它的解决方案就是只检查本次提交所修改(git 暂存区里的东西)的文件，这样每次 lint 量就比较小，而且符合需求。

prettier

prettier 工具可以在代码保存时进行格式化和检查（主要用来代码保存时自动格式化）。

// 安装
$ npm install -D prettier

在项目根目录新建 .prettierrc.json 配置文件，内容如下：

{
    "tabWidth": 2, 
    "semi": false,
    "printWidth": 100,
    "singleQuote": true
}

关于 .prettierrc 更多配置可参考官方文档

eslint

eslint 可以对代码进行约束规范，如果代码不符合规范则会在下面呈现一条红色~~~~ 波浪线，相比于 prettier 的检查，eslint 更丰富更强大，因此 prettier 常用于保存自动格式化代码， 而 eslint 作为代码规范检查，两者可以结合使用。

// 安装
$ npm install eslint -D

在根目录新建 .eslintrc.js 配置文件，

module.exports = {
    root: true,
      env: {
        node: true,
      },
      extends: [
        "plugin:vue/vue3-essential",
        "eslint:recommended",
        "@vue/typescript/recommended",
        "plugin:prettier/recommended",
      ],
      parserOptions: {
        ecmaVersion: 2020,
      },
      rules: {
        "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
        "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
      }
}

关于 .eslintrc.js 更多配置可参考 官方文档

lint-staged

lint-staged 可以让这些插件只扫描暂存区的文件而不是全盘扫描。

// 安装
$ npm install --save-dev lint-staged

package.json 新增 lint-staged 选项

{
    devDependencies:{
        // ...
    },
    "lint-staged": { 
        "src/**/*.{js,vue,ts}": "npm run lint"
     }
}

将 .husky 下面 pre-commit 的文件设置为 运行 lint-staged

现在 git commit 时会自动帮我们跑检查脚本，而且是只针对本次提交的代码进行检查。