前端项目配置 git hook + prettier + eslint

小肚肚肚肚肚哦
522 阅读3分钟

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第2天，点击查看活动详情

回看自己的文章时，发现文章库里没有关于全局配置npm项目格式校验工具的讲解，这里补充一下。

git hooks

顾名思义，就是git在提交、推送、回溯等操作前后会触发的一系列钩子函数，详情可见 官网。在仓库中的 .git 文件夹下可以看到hook目录:

image.png

默认的 git hooks 都是 shell 脚本，只需要将 git hooks 的示例文件的 .sample 扩展名去掉，那么示例文件即可生效。原生的 git hooks 有一个比较大的问题是 .git 文件夹下的内容不会被 Git 追踪。这就表示，无法保证让一个仓库中所有的成员都使用同样的 git hooks，除非仓库的所有成员都手动同步同一份 git hooks，但这显然不是个好办法。

husky

husky可以通过全局安装的方式，让所有开发者同享同一个hook。我们直接讲述最新版本（4.x以上）的版本。

安装

npm install husky --save-dev

or

yarn add husky -D

image.png

配置 git hook

npx husky install

image.png

设置 npm 包安装后自动启用 husky

npm pkg set scripts.prepare="husky install"

现在是一个空的husky，需要告诉他要做什么，我们用他的 pre-commit 钩子，在提交前触发检测：

## 添加pre-commit
npx husky add .husky/pre-commit "yarn lint-staged --allow-empty"
git add .husky/pre-commit

这里我们用到了一个库：lint-staged。在代码提交之前，进行代码规则检查整个项目上运行lint速度会很慢，lint-staged能够让lint只检测暂存区的文件，可以提升速度；另一方面，你拉取别人的代码，如果很多地方都有格式错误，但是只修改了你的文件，你提交后理论上不应该校验你不修改的文件，lint-staged 可以让你只专注于自己改动的文件。

此时目录结构：

image.png

接下来安装 lint-staged：

yarn add -D lint-staged

接下来我们 commit 试试：

image.png

可以看到钩子已经能够触发，但是我们没有配置具体要做什么。

eslint + prettier

安装 eslint：

yarn add eslint -D

项目根目录新建 .eslintrc:

{
  "env": {
    "node": true,
    "browser": true,
    "es2021": true
  },
  "extends": ["eslint:recommended", "plugin:react/recommended"],
  "parserOptions": {
    "sourceType": "module",
    "babelOptions": {
      "ecmaVersion": "es2020",
      "ecmaFeatures": {
        "globalReturn": true,
        "jsx": true
      },
      "lib": ["ES2020"]
    }
  },
  "plugins": ["react"],
  "settings": {
    "react": {
      "version": "detect"
    }
  },
  "overrides": [
    {
      "files": ["*.ts", "*.tsx"],
      "rules": {
        "no-undef": "off"
      }
    }
  ]
}

安装 prettier：

yarn add prettier -D

项目根目录新建 .prettierrc:

{
  "printWidth": 120,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "bracketSpacing": true,
  "overrides": [
    {
      "files": ["package.json", "yarn.lock"],
      "options": {
        "tabWidth": 2,
        "proseWrap": "never",
        "singleQuote": false
      }
    }
  ]
}

项目根目录新建 .prettierignore:

/build
node_modules
/public
/scripts

统一使用 lint-staged 管理：

// package.json
"lint-staged": {
  "src/**/*.{js,jsx,ts,tsx}": [
    "eslint --fix",
    "yarn prettier -w"
  ]
},

我这里配置的检测路径是 src 下的文件。我们试着改动一下文件，变更如下：

image.png

然后 commit 看看效果：

image.png

可以看到校验已经出来了，我这里 eslint 报错是因为 eslint-plugin-react 没有安装（vue和ng项目会有另外的提示，按照需求安装就好）

yarn add -D eslint-plugin-react

安装以后再执行:

image.png

此时就进入正常的校验错误的模式了，修改完提示的错误后再次 commit，就可以看到成功界面了：

image.png

此时再看刚刚改乱格式的文件，发现格式化已经做好了：

image.png

指令速查

  1. yarn add husky -D
  2. npx husky install
  3. npm pkg set scripts.prepare="husky install"
  4. npx husky add .husky/pre-commit "yarn lint-staged --allow-empty"
  5. git add .husky/pre-commit
  6. yarn add -D lint-staged
  7. yarn add eslint -D
  8. yarn add prettier -D
  9. react必须：yarn add -D eslint-plugin-react
  10. 添加文件：.eslintrc .prettierrc .prettierignore

完！

avatar
文章
阅读
粉丝