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

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

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

这部分会进行:

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

这部分会进行:

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

配置 husky

这部分会进行:

husky 的安装husky Hooks 的简单配置

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

这部分会进行:

commitizen 的安装 和 cz 的配置

详细配置 husky Hooks

这部分会进行:

husky 的安装husky 的 Hooks 的详细配置

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

pre-commit:

#!/bin/sh
. "$(dirname "commit-msg")/_/husky.sh"

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

#!/bin/sh # shellcheck source=./_/husky.sh . "$(dirname ""env"")/_/husky.sh" echo '# Lint Commit Message' npx --no-install commitlint --edit "" echo '# Finished' :

:

Reference Typescript Express eslint 配置

{
  "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 */
    }

    }
  "name"
:

Package.json 完全配置后的脚本

{
  "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"} }
    }
  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`.

chmod +x .husky

Troubleshooting

Solution: