概覽:
prettier
eslint fix
git hook
commitlint
以配置js為例
第一步 格式化所有代碼 prettier
yarn add prettier -D
在package.json的script里面添加如下配置菠净,注意修改成自己的文件路徑虾宇,采用glob配置册舞。
"format":"prettier --single-quote --trailing-comma es5 --write \"src/**/*.js\"",
配置完畢容燕,可以執(zhí)行?yarn format測(cè)試一下左电。
更多配置訪問官網(wǎng)?https://prettier.io/docs/en/install.html
如果有eslint配置文件,會(huì)發(fā)現(xiàn)格式化之后酿矢,有些不符合eslint規(guī)范絮缅,配置eslint。
第二步 配置Eslint
yarn add -D eslint
假設(shè)你已經(jīng)配置好eslint的配置文件 在package.json的scripts里添加如下荠锭,注意修改成自己的文件路徑旱眯。
"fix":"eslint --fix \"src/**/*.js\""
配置完畢。 執(zhí)行完?yarn format之后再執(zhí)行?yarn fix证九,完美自動(dòng)格式化所有JS代碼删豺。
此時(shí)我們配置format的語句如下:
"format":"prettier --single-quote --trailing-comma es5 --write \"src/**/*.js\" && yarn fix",
可以一次實(shí)現(xiàn)格式化和fix。
更多信息?https://eslint.org/
第三步 添加Git鉤子(Pre-commit Hook)
Git 鉤子(hooks)是在Git 倉庫中特定事件(certain points)觸發(fā)后被調(diào)用的腳本愧怜。 詳情可瀏覽?https://git-scm.com/book/zh/v2/%E8%87%AA%E5%AE%9A%E4%B9%89-Git-Git-%E9%92%A9%E5%AD%90
每次提交代碼呀页,執(zhí)行?git commit之后進(jìn)行自動(dòng)格式化,免去每次人為手動(dòng)格式化叫搁,使遠(yuǎn)程倉庫代碼保持風(fēng)格統(tǒng)一赔桌。
yarn add lint-staged husky --dev
在package.json里面配置
{"scripts":{"precommit":"lint-staged"},"lint-staged":{"*.js":["yarn run format -- ","git add"]}}
配置完成。 這樣每次git commit 都會(huì)自動(dòng)執(zhí)行格式化并fix渴逻,成功之后會(huì)將格式化之后的文件自動(dòng)add疾党,然后統(tǒng)一commit。
第四步 添加git commit注釋規(guī)范
yarn add -D @commitlint/cli @commitlint/config-conventional
在根目錄下面添加commitlint.config.js文件惨奕,內(nèi)容如下:
module.exports={extends:['@commitlint/config-conventional'],rules:{'type-enum':[2,'always',['merge','add','update','delete','feat','fix','docs','style','refactor','test','revert']],'subject-case':[0,'never',['lower-case']]}}
提交commit格式如下:
type: subjectName
bodyDetail
For example:
add: 添加了readme.md文件
添加了X的配置
添加了文檔
配置package.json
{"scripts":{"commitmsg":"commitlint -e $GIT_PARAMS"}}
配置完畢雪位。
更多信息請(qǐng)查看:http://marionebl.github.io/commitlint/#/
現(xiàn)在提交代碼,只需要執(zhí)行g(shù)it commit然后格式化成功之后梨撞,進(jìn)入默認(rèn)編輯器(我的是VIM)雹洗,填寫commit香罐。wq保存就OK了。