實現(xiàn)目標：從零對項目工程進行配置定制，以保證在git提交時弧蝇，校驗代碼是否符合定制的規(guī)則及風格
說在前面??
代碼質(zhì)量作為前端工程化的一個重要指標碳褒，需要前端團隊共同管理起來。雖然基于vue-cli等腳手架可以配置出一些現(xiàn)成的工程鏈看疗，隔離開發(fā)者的關注點沙峻，但是我們還是需要大致進行一個了解，以便應用于其他項目工程两芳。
2021-04-22：以下流程已被我封裝成了一款npm插件摔寨，實現(xiàn)自動配置，歡迎體驗反饋
Let's beging
eslint
對代碼進行質(zhì)量檢測怖辆，預防某些用法可能存在的問題是复，配置項繁多，常規(guī)方案是使用被認可的標準指南
- 安裝eslint
npm i eslint -D
- 初始化配置（如果你使用了ts 請在此之前先安裝typescript竖螃，否則生成配置文件會拋錯）
npx eslint --init或node_modules/.bin/eslint --init（基于環(huán)境因素我無法使用npx淑廊，故使用后者）
通過對話得到基本配置文件
.eslintrc.js，配置詳細請參閱文檔
prettier
對代碼風格進行強制控制特咆，不允許freestyle??季惩，可配置項少，因為是opinionated，即自主傾向強硬的画拾，相當于喜歡就用啥繁，不喜勿噴，hahaha~青抛，相反的unopinionated旗闽，如eslint，可配置項就比較多
安裝prettier和eslint對應的插件
npm i prettier eslint-plugin-prettier -D-
配置
.eslintrc.js
eslint配置文件的增量修改
至此我們已經(jīng)完成了eslint和prettier的部分集成脂凶，此時如果運行eslint進行檢測宪睹，會先用prettier進行代碼風格修訂，然后對修訂后的代碼進行eslint的規(guī)則檢測，此時會產(chǎn)生出兩者規(guī)則不同之處的錯誤并且無法自動修正咽安，需要繼續(xù)做處理 安裝eslint-config-prettier
npm i eslint-config-prettier -D-
配置.eslintrc.js
eslint配置文件的第二次增量修改
對于standard和prettier的extends還可以繼續(xù)合并
合并standard和prettier
lint-staged
實際使用中每次都對整個項目進行l(wèi)int是不可取的蛹疯，所以我們要結合lint-staged使用。顧名思義但狭，只對staged的文件進行l(wèi)int，網(wǎng)上大部分方案都是利用husky和lint-staged結合進行使用，但是我們利用yorkie進行更簡單的配置??
- 安裝yorkie和lint-staged
npm i yorkie lint-staged -D
安裝好后就會自動打開git hooks邮屁，我們只需要對package.json進行簡單配置
package.json的增量修改
至此，配置完成菠齿，在我們對代碼進行commit時佑吝，就會進行代碼校驗啦~
完結，撒花??
