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

最初发布于 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 之后结果是否相同

配置 Pretti