前言
工程化体现之一：代码规范和提交规范。
选择eslint，保证代码质量，避免不规范代码书写，包括冗余命名，无效声明等
选择prettier，保证代码风格，避免团队合作由于风格不同造成的合并冲突
选择husky，允许开发人员参与git流程操作中，触发指定hook
选择commitizen，保证代码提交规范同时记录更新内容，后续可生成changelog
选择commitlint，代码提交检查，保证提交内容符合规范
前置准备
采用vite脚手架搭建，模板采用vue-ts，包管理工具采用pnpm
pnpm create vite code-project -- --template vue-ts
eslint
安装
pnpm i -D eslint
初始化
npx eslint --init
eslint初始化会在项目根目录下生成.eslintrc.cjs文件并提供默认配置
避坑 ①
此时发现第一行代码会出现警告，'module' is not defined.，这是因为在初始化eslint时选择的代码环境是browser导致，可在配置同时勾选上browser和node或者在env中添加"node":true即可解决该问题
避坑 ②
vue3开启eslint便会导致该问题，通过修改解析字段即可解决
Prettier
安装
pnpm i -D prettier
初始化
根目录下新增 .prettierrc 文件，以JSON形式根据团队风格配置，并结合VSCode插件Prettier使用
个人喜好：{ "useTabs": false, "tabWidth": 2, "printWidth": 80, "arrowParens": "always", "trailingComma": "all", "endOfLine": "auto", "bracketSpacing": true, "htmlWhitespaceSensitivity": "ignore" }
此时如果存在eslint和prettier配置冲突的话，就会导致死循环，eslint觉得行，prettier觉得不行。
解决方法：通过在.eslintrc.cjs配置prettier插件，使eslint对prettier妥协
pnpm i -D @vue/eslint-config-prettier
husky
安装
pnpm i -D husky
初始化
npx husky install，也可以配置npm命令完成，通过npm set-script prepare 'husky install'并执行npm run prepare(大家都这么做，跟着做肯定没错)
执行后在根目录下自动生成默认配置文件 (前提：是个git项目，毕竟husky本质就是处理git流程)
玩转husky
目的：想在执行git操作时做点什么😊，想啥呢？一般就是校验代码还有提交规范
npx husky add .husky/pre-commit 'npx lint-staged'(后续补充lint-staged配置)
npx husky add .husky/commit-msg 'npx --no-install commmitlint --edit'
commitlint
安装
pnpm i -D @commitlint/cli @commitlint/config-conventional（后者为校验的规范）
初始化
根目录下创建 commitlint.config.cjs 文件(cjs后缀解决如果package.json中type:"module"情况)
commitizen
安装
pnpm i -D commitizen
初始化
npx commitizen init cz-conventional-changelog --save-dev --save-exact
安装适配器，后续提交代码通过git add . => npx cz即可启动交互式ui来提交规范信息
安装成功后在package.json中会自动新增配置
避坑 ①
可能出现安装适配器失败问题，报Cannot read property 'match' of undefined
解决办法：
- 优雅解决：不知道，希望知道的朋友可以告知一声
- 暴力解决：手动在package.json添加配置即可
补充(lint-staged)
lint-stage一个仅仅过滤出 Git 代码暂存区文件(被 git add 的文件)的工具做指定操作，减少每次对整个项目都重新检查造成的时间损耗(在package.json中配置，也可抽成.lintstagedrc文件中)
