实现目标：从零对项目工程进行配置定制，以保证在git提交时，校验代码是否符合定制的规则及风格
说在前面🤞
代码质量作为前端工程化的一个重要指标，需要前端团队共同管理起来。虽然基于vue-cli等脚手架可以配置出一些现成的工程链，隔离开发者的关注点，但是我们还是需要大致进行一个了解，以便应用于其他项目工程。
2021-04-22：以下流程已被我封装成了一款npm插件，实现自动配置，欢迎体验反馈
Let's beging
eslint
对代码进行质量检测，预防某些用法可能存在的问题，配置项繁多，常规方案是使用被认可的标准指南
- 安装eslint
npm i eslint -D
- 初始化配置（如果你使用了ts 请在此之前先安装typescript，否则生成配置文件会抛错）
npx eslint --init或node_modules/.bin/eslint --init（基于环境因素我无法使用npx，故使用后者）
eslint初始化的配置对话
通过对话得到基本配置文件
.eslintrc.js，配置详细请参阅文档
prettier
对代码风格进行强制控制，不允许freestyle😂，可配置项少，因为是opinionated，即自主倾向强硬的，相当于喜欢就用，不喜勿喷，hahaha~，相反的unopinionated，如eslint，可配置项就比较多
安装prettier和eslint对应的插件
npm i prettier eslint-plugin-prettier -D-
配置
.eslintrc.js
eslint配置文件的增量修改
至此我们已经完成了eslint和prettier的部分集成，此时如果运行eslint进行检测，会先用prettier进行代码风格修订，然后对修订后的代码进行eslint的规则检测，此时会产生出两者规则不同之处的错误并且无法自动修正，需要继续做处理 安装eslint-config-prettier
npm i eslint-config-prettier -D-
配置.eslintrc.js
eslint配置文件的第二次增量修改
对于standard和prettier的extends还可以继续合并
合并standard和prettier
lint-staged
实际使用中每次都对整个项目进行lint是不可取的，所以我们要结合lint-staged使用。顾名思义，只对staged的文件进行lint，网上大部分方案都是利用husky和lint-staged结合进行使用，但是我们利用yorkie进行更简单的配置👌
- 安装yorkie和lint-staged
npm i yorkie lint-staged -D
安装好后就会自动打开git hooks，我们只需要对package.json进行简单配置
package.json的增量修改
至此，配置完成，在我们对代码进行commit时，就会进行代码校验啦~
完结，撒花🍜
