prettier
?pre-commit Hook?
eslint-config-prettier沖突解決
conventional-changelog/commitlint
一、create-react-app環(huán)境配置prettier，在git commit前進(jìn)行代碼格式化谷浅，統(tǒng)一團(tuán)隊(duì)開(kāi)發(fā)代碼格式瓢阴，并且規(guī)范git commit message 提示信息格式
prettier官方網(wǎng)站：https://prettier.io/
二姐直、具體實(shí)現(xiàn)步驟
第一步：搭建create-react-app typescript環(huán)境
npx create-react-app my-app --template typescript
第二步:
安裝 prettier包
yarn add --dev --exact prettier
安裝報(bào)錯(cuò)：eslint@8.8需要指定版本或大于等于16+
解決:卸載：nodejs,下載并安裝nodejs@16+
?? 第三步:生成prettier配置文件.prettierrc.json
echo {}> .prettierrc.json? --建議手動(dòng)創(chuàng)建.prettierrc.json文件，不然字符集不對(duì)畜份，不要使用這個(gè)命令創(chuàng)建（坑）
.prettierrc.json文件中办素，只有:? {}
第四步:新建prettier忽略文件?.prettierignore?
#Ignore artifacts:
build
coverage
提示:如果要手動(dòng)格式化--執(zhí)行代碼格式化命令
yarn prettier --write .
??????????? 一般開(kāi)發(fā)的時(shí)候角雷，都是自動(dòng)化執(zhí)行格式化命令
第五步:安裝并配置pre-commit
Hook 在git
commit前自動(dòng)格式化代碼
? ? npxmrm@2 lint-staged
???????? 修改package.json
??????????? "lint-staged": {
??????????? "*.{js,css,md,ts,tsx}":
? ? ? ? ? ? ? ? ?"prettier --write"
??????????? }
????? 修改:package.json
"husky":
{
??????????????????"hooks": {
??????????????????"pre-commit": "lint-staged"
??????????????????? }
????????????????? },
第六步:
create-react-app 自帶eslint,在開(kāi)發(fā)中eslint和prettier有可能有沖突，需要解決
安裝eslint-config-prettier開(kāi)發(fā)Dev依賴(lài)
yarn add? eslint-config-prettier@6.15 --dev
?? 修改:package.json用prettier配置覆蓋上面的react-app配置
第六步:
????? 問(wèn)題：
?????????? 解決:? http://www.reibang.com/p/38f04aef1c9d
?????????? git config --globalcore.autocrlftrue
第七步:團(tuán)隊(duì)開(kāi)發(fā)需要規(guī)范git
commit message提示信息勺三，統(tǒng)一提示信息的寫(xiě)法
????????????????? conventional-changelog/commitlin
?????????????????https://github.com/conventional-changelog/commitlint
?????????????????? 注意:需要認(rèn)真閱讀文檔，如果message不符合規(guī)范需曾，則報(bào)錯(cuò)
1.安裝@commitlint/config-conventional
@commitlint/cli
? yarn add @commitlint/config-conventional@12@commitlint/cli --dev
2.執(zhí)行命令:
?? echo "module.exports= {extends: ['@commitlint/config-conventional']}">
commitlint.config.js???? --建議手動(dòng)創(chuàng)建commitlint.config.js文件吗坚，不然字符集不對(duì)，不要使用這個(gè)命令創(chuàng)建（坑）
文件名:? commitlint.config.js
內(nèi)容:
module.exports
= { extends: ["@commitlint/config-conventional"]
};
修改:
package.json
? "husky": {
??? "hooks": {
????? "pre-commit":"lint-staged",
????? "commit-msg": "commitlint-E HUSKY-GIT-PARAMS"
??? }
? },
npx husky add .husky/commit-msg 'npx --no -- commitlint --edit "$1"'
修改:
App.tsx
git add .
git commit -m “fix: change App.tsx”
三呆万、git message 提示信息規(guī)范構(gòu)成
git message 提示信息規(guī)范構(gòu)成: Header 是必需的商源，Body 和 Footer 可以省略。
??1.Header包括: 包括三個(gè)字段：type（必需）谋减、scope（可選）和subject（必需）牡彻。
(1)
type指本次提交的類(lèi)型，為必填項(xiàng)出爹，必須為以下之一：
feat:一項(xiàng)新功能
fix:一個(gè)錯(cuò)誤修復(fù)
docs:僅文檔更改
style:不影響代碼邏輯的更改（空白庄吼，格式缎除，缺少分號(hào)等）
refactor:既不修正錯(cuò)誤也不增加功能的代碼更改（重構(gòu)）
perf:改進(jìn)性能的代碼更改
test:添加缺失或更正現(xiàn)有測(cè)試
build:影響構(gòu)建系統(tǒng)或外部依賴(lài)項(xiàng)的更改（gulp，npm等）
ci:對(duì)CI配置文件和腳本的更改
chore:更改構(gòu)建過(guò)程或輔助工具和庫(kù)总寻，例如文檔生成
（2）Scope用于說(shuō)明commit 影響的范圍伴找，比如數(shù)據(jù)層、控制層废菱、視圖層等等，視項(xiàng)目不同而不同抖誉。
（3）subject是commit 目的的簡(jiǎn)短描述殊轴，以動(dòng)詞開(kāi)頭，使用第一人稱(chēng)現(xiàn)在時(shí)袒炉，比如change旁理，而不是changed或changes;第一個(gè)字母小寫(xiě),結(jié)尾不加句號(hào)（.）
2.Body可選：Body部分是對(duì)本次commit 的詳細(xì)描述，可以分成多行我磁。
有兩個(gè)注意點(diǎn)孽文。
（1）使用第一人稱(chēng)現(xiàn)在時(shí)，比如使用change而不是changed或changes夺艰。
（2）應(yīng)該說(shuō)明代碼變動(dòng)的動(dòng)機(jī)芋哭，以及與以前行為的對(duì)比。
3.Footer 可選
Footer部分只用于兩種情況郁副。
(1)不兼容變動(dòng)
如果當(dāng)前代碼與上一個(gè)版本不兼容减牺，則
Footer 部分以BREAKING
CHANGE開(kāi)頭，后面是對(duì)變動(dòng)的描述存谎、以及變動(dòng)理由和遷移方法拔疚。
(2)關(guān)閉Issue如果當(dāng)前
commit 針對(duì)某個(gè)issue，那么可以在
Footer 部分關(guān)閉這個(gè)issue 既荚。
命令:Closes #234
具體規(guī)范內(nèi)容:
https://github.com/conventional-changelog/commitlint/tree/master/@commitlint/config-conventional#type-enum
