实现目标：从零对项目工程进行配置定制，以保证在git提交时，校验代码是否符合定制的规则及风格

说在前面🤞

代码质量作为前端工程化的一个重要指标，需要前端团队共同管理起来。虽然基于vue-cli等脚手架可以配置出一些现成的工程链，隔离开发者的关注点，但是我们还是需要大致进行一个了解，以便应用于其他项目工程。

2021-04-22：以下流程已被我封装成了一款npm插件，实现自动配置，欢迎体验反馈

Let's beging

eslint

对代码进行质量检测，预防某些用法可能存在的问题，配置项繁多，常规方案是使用被认可的标准指南

npm i eslint -D

npx eslint --init或node_modules/.bin/eslint --init（基于环境因素我无法使用npx，故使用后者）

eslint初始化的配置对话

通过对话得到基本配置文件.eslintrc.js，配置详细请参阅文档

对代码风格进行强制控制，不允许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是不可取的，所以我们要结合lint-staged使用。顾名思义，只对staged的文件进行lint，网上大部分方案都是利用husky和lint-staged结合进行使用，但是我们利用yorkie进行更简单的配置👌