1. Code QA 工具链配置-主要流程
    1. 配置 Prettier
    2. 安装 lint-staged
    3. 配置 commitlint
    4. 配置 husky
    5. 配置 commitizen 并设置 cz 作为工具
    6. 详细配置 husky Hooks
  2. Reference
    1. Typescript Express eslint 配置
    2. Package.json 完全配置后的脚本
  3. Troubleshooting

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 的安装和配置

https://www.npmjs.com/package/lint-staged

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

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

详细的配置参考: https://prettier.io/docs/en/options.html

配置 commitlint

这部分会进行:

配置 husky

这部分会进行:

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

配置 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 '#######################################'
echo '# Pre Commit Check: Lint Staged'
npx lint-staged
echo '# Finished'
echo '#######################################'

commit-msg:

#!/bin/sh

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

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

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