526互联

eslint prettier commitizen husky集成

发布时间 2023-04-27 11:32:23作者: 如戏一场

初始化 eslint

执行以下命令并根据提示选择仓库类型(会在项目根目录自动生成 .eslintrc.cjs 文件)

npm init @eslint/config

添加 prettier（格式化代码）

npm i prettier eslint-config-prettier eslint-plugin-prettier -D

添加.prettierrc.json 文件在项目根目录（用于写 prettier 的规则）

{
  "semi": false,
  "singleQuote": true
}

在.eslintrc.cjs 文件中做如下修改

module.exports = {
  extends: [
    // ... other
    'prettier', // 添加prettier风格
  ],
  // ... other
}

安装 husky（用于 git 钩子，在执行 git 命令时促发自定义校验）

npm i husky -D
npm pkg set scripts.prepare="husky install" // 会在package.json文件的script中添加一条命令，用于后续初始化项目时自动执行husky install
npx husky install

eslint 接入 husky（在 git commit 之前执行）

npm i lint-staged -D // eslint与husky接入
npx husky add .husky/pre-commit 'npx lint-staged'

在 package.json 中添加以下配置

"lint-staged": {
  "*.{js,jsx,ts,tsx}": "eslint --fix",
  "*.{js,jsx,ts,tsx,css,md,html,json}": "prettier --cache --write"
}

添加 git commit 检查

npm i commitizen cz-conventional-changelog @commitlint/cli @commitlint/config-conventional -D

在 package.json 文件中添加如下配置

{
  "scripts": {
    "commit": "cz"
  },
  "config": {
    "commitizen": {
      "path": "./node_modules/cz-conventional-changelog"
    }
  }
  // ...other
}

在做 git 提交时将 git commit 命令换成 npm run commit 会有步骤式提示

接入 husky，在提交 git 时检查 commit 信息是否合规则

npx husky add .husky/commit-msg 'npx commitlint --edit "$1"'

在项目根目录添加 commitlint.config.cjs 配置文件

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

vscode 按 prettier 自动格式化文件

1、 安装 prettier 插件
2、 vscode =》settings =》Format On Save（开启）+ Default Formatter（选择 Prettier - Code formatter）