前端 QA 工具链指南 - husky,commitlint,commitizen,eslint,typescript,express

最初发布于 szhshp的第三边境研究所, 转载请注明

Code QA 工具链配置-主要流程

1. 其他工具配置 (Typescript, Webpack, etc)
2. 配置 Prettier 实现快捷键格式化本地代码
   1. VSC 安装 prettier 插件
   2. 本地安装 Prettier 包
   3. 使用时通过 ctrl+shift+P 选择 Format Document with... 然后选择 Prettier
   4. 添加 Prettier 配置文件并 设定配置详细
3. 配置 eslint 并实现 yarn lint 格式化
   1. 安装 eslint 包
   2. 使用 eslint --init 创建一套基础配置, 这里选择了 airbnb 的配置
   3. 给 package.json 添加一个 lint 的 script
4. 配置 commitlint
   1. 本地会新建一个配置文件 commitlint.config.js
5. 配置 husky
   1. Husky 会新建一个 Hook, 随后可以详细设置一下所需要的 Hooks: 详细配置 husky Hooks
6. 配置 commitizen 并设置 cz 作为工具
   1. 安装完毕之后可以使用 yarn commit 来调用 cz 以实现格式化 commit
7. 安装 lint-staged 以配置 pre commit hook 进行检查
   1. 安装 lint-staged 并给 package.json 添加脚本
   2. Commit 的时候激活两个 Hooks:
      1. 先用 prettier 格式化: prettier --write src/**/*.{js, ts}
      2. 用 eslint 修复和检查问题: eslint src/**/*.{js, ts} --fix
8. 添加兼容包以通过 eslint 修复 Prettier 问题
   1. eslint-config-prettier 处理冲突的规则
   2. eslint-plugin-prettier 以使用 eslint 来修复 Prettier 的问题, 并且会直接套用 .prettierrc.json 的配置
   3. eslint 配置文件 .eslintrc.json 里面不需要再设置 prettier/prettier 规则
      • 仅仅使用 prettier 自己的配置文件 .prettierrc.json 来定制 prettier 的规则
      • IDE 插件会直接读取 .prettierrc.json 文件
      • eslint 会通过上述插件将 .prettierrc.json 的配置和 prettier/prettier 规则合并并使用
      • 若维护两份不一致的规则将会出现冲突的情况, 导致 eslint --fix 和本地 Format Document 后代码不一致的情况
      • 为减少维护成本直接删除 prettier/prettier 规则, 如此就能保证两边规则一致
   4. 注意: VSC 在修改 .prettierrc.json 配置文件之后很可能需要重启 VSC 才能生效
9. 以后使用格式化快捷键将会自动使用 eslint 修复格式问题
   1. 尝试一下运行 prettier --write src/**/*.{js, ts} 和 eslint src/**/*.{js, ts} --fix 之后结果是否相同

配置 Prettier

项目根目录放一个 .prettierrc.json 文件:

echo {}> .prettierrc.json

里面放上一些基础配置

.prettierrc.json:

{
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "none",
  "endOfLine": "auto"
}

安装 lint-staged

这部分会进行:

1. lint-stage 的安装和配置

www.npmjs.com/package/lin…

记得到 package.json 编辑一下 lint 的脚本:

"lint-staged": {
  "*.{ts,js}": [
    "prettier --write src/**/*.{js,ts}",
    "eslint src/**/*.{js,ts} --fix"
  ]
}

详细的配置参考: prettier.io/docs/en/opt…

配置 commitlint

这部分会进行:

• commitlint 的安装
• commitlint 规则包的安装和配置文件创建

配置 husky

这部分会进行:

• husky 的安装
• husky Hooks 的简单配置

• 可以简单地将 commit-msg 的 Hook 先设置起来
• commitizen 初始化之后应该可以看到 cz 被添加到了 package.json 的 scripts 中

配置 commitizen 并设置 cz 作为工具

这部分会进行:

• commitizen 的安装 和 cz 的配置

详细配置 husky Hooks

这部分会进行:

1. husky 的安装
2. husky 的 Hooks 的详细配置

1. Husky 主页
2. 安装 husky (如果 上文commitlint 的教程里面已经包含了 husky 的安装部分, 则忽略此步骤)
3. .husky 文件夹下面添加两个文件, 没有扩展名

pre-commit:

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

echo '# Lint Staged'
npx lint-staged
echo '# Finished'

commit-msg:

#!/bin/sh

# shellcheck source=./_/husky.sh
. "$(dirname "$0")/_/husky.sh"

echo '# Lint Commit Message' 
npx --no-install commitlint --edit "$1"
echo '# Finished'

Reference

Typescript Express eslint 配置

{
  "env": {
    "browser": true, 
    "es2021": true
  }, 
  /* airbnb 基础包 + 2 个 prettier 的兼容包 */
  "extends": ["airbnb-base", "plugin:prettier/recommended", "prettier"], 
  "parser": "@typescript-eslint/parser", 
  "parserOptions": {
    "ecmaVersion": 12, 
    "sourceType": "module"
  }, 
  /* prettier 也要加到 plugin */
  "plugins": ["@typescript-eslint", "prettier"], 
  "settings": {
    /* 处理 import 的 issue */
    "import/resolver": {
      "node": {
        "extensions": [".ts", ".js"]
      }
    }
  }, 
  "rules": {
    /* 不再需要这个 rule 了 */
    /* 
    "prettier/prettier": [
      2, 
      {
      }
    ], 
    */

    /* Other Rules */
  }
}

Package.json 完全配置后的脚本

{
  "name": "szhshp-qa",
  "version": "2.0.0",
  "private": true,
  "scripts": {
    "lint": "eslint . --ext .tsx,.ts --fix", /* 主要 lint 命令 */
    "lint-error": "eslint . --ext .tsx,.ts --fix --quite",
    "check": "eslint . --ext .tsx,.ts",
    "check-error": "eslint . --ext .tsx,.ts --quite",
    "format": "prettier --write **/*.{js,ts,tsx,json}",   /* 主要 prettier 命令 */
    "prepare": "husky install",
    "commit": "cz"
  },
  "dependencies": {
    /* .... */
  },
  "devDependencies": {
    /* .... */
  },
  "lint-staged": {
    /* 对于任何 staged ts,tsx,js 文件都进行 Prettier 和 eslint */
    "*.{ts,tsx,js}": ["yarn format", "yarn lint"]
  },
  "config": {
    /* 对于使用 cz 进行 commit 的必要配置文件 */
    "commitizen": {
      "path": "./node_modules/cz-conventional-changelog"
    }
  }
}

Troubleshooting

hint: The '.husky/pre-commit' hook was ignored because it's not set as executable.
hint: You can disable this warning with `git config advice.ignoredHook false`.

Solution: chmod +x .husky