prettier
?pre-commit Hook?
eslint-config-prettier沖突解決
conventional-changelog/commitlint
一、create-react-app環(huán)境配置prettier，在git commit前進(jìn)行代碼格式化，統(tǒng)一團(tuán)隊開發(fā)代碼格式，并且規(guī)范git commit message 提示信息格式
prettier官方網(wǎng)站：https://prettier.io/
二、具體實現(xiàn)步驟
第一步：搭建create-react-app typescript環(huán)境
npx create-react-app my-app --template typescript
第二步:
安裝 prettier包
yarn add --dev --exact prettier
安裝報錯：eslint@8.8需要指定版本或大于等于16+
解決:卸載：nodejs,下載并安裝nodejs@16+
?? 第三步:生成prettier配置文件.prettierrc.json
echo {}> .prettierrc.json? --建議手動創(chuàng)建.prettierrc.json文件，不然字符集不對，不要使用這個命令創(chuàng)建（坑）
.prettierrc.json文件中，只有:? {}
第四步:新建prettier忽略文件?.prettierignore?
#Ignore artifacts:
build
coverage
提示:如果要手動格式化--執(zhí)行代碼格式化命令
yarn prettier --write .
??????????? 一般開發(fā)的時候，都是自動化執(zhí)行格式化命令
第五步:安裝并配置pre-commit
Hook 在git
commit前自動格式化代碼
? ? 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,在開發(fā)中eslint和prettier有可能有沖突，需要解決
安裝eslint-config-prettier開發(fā)Dev依賴
yarn add? eslint-config-prettier@6.15 --dev
?? 修改:package.json用prettier配置覆蓋上面的react-app配置
第六步:
????? 問題：
?????????? 解決:? http://www.lxweimin.com/p/38f04aef1c9d
?????????? git config --globalcore.autocrlftrue
第七步:團(tuán)隊開發(fā)需要規(guī)范git
commit message提示信息，統(tǒng)一提示信息的寫法
????????????????? conventional-changelog/commitlin
?????????????????https://github.com/conventional-changelog/commitlint
?????????????????? 注意:需要認(rèn)真閱讀文檔，如果message不符合規(guī)范，則報錯
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???? --建議手動創(chuàng)建commitlint.config.js文件，不然字符集不對，不要使用這個命令創(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包括: 包括三個字段：type（必需）、scope（可選）和subject（必需）。
(1)
type指本次提交的類型，為必填項，必須為以下之一：
feat:一項新功能
fix:一個錯誤修復(fù)
docs:僅文檔更改
style:不影響代碼邏輯的更改（空白，格式，缺少分號等）
refactor:既不修正錯誤也不增加功能的代碼更改（重構(gòu)）
perf:改進(jìn)性能的代碼更改
test:添加缺失或更正現(xiàn)有測試
build:影響構(gòu)建系統(tǒng)或外部依賴項的更改（gulp，npm等）
ci:對CI配置文件和腳本的更改
chore:更改構(gòu)建過程或輔助工具和庫，例如文檔生成
（2）Scope用于說明commit 影響的范圍，比如數(shù)據(jù)層、控制層、視圖層等等，視項目不同而不同。
（3）subject是commit 目的的簡短描述，以動詞開頭，使用第一人稱現(xiàn)在時，比如change，而不是changed或changes;第一個字母小寫,結(jié)尾不加句號（.）
2.Body可選：Body部分是對本次commit 的詳細(xì)描述，可以分成多行。
有兩個注意點。
（1）使用第一人稱現(xiàn)在時，比如使用change而不是changed或changes。
（2）應(yīng)該說明代碼變動的動機(jī)，以及與以前行為的對比。
3.Footer 可選
Footer部分只用于兩種情況。
(1)不兼容變動
如果當(dāng)前代碼與上一個版本不兼容，則
Footer 部分以BREAKING
CHANGE開頭，后面是對變動的描述、以及變動理由和遷移方法。
(2)關(guān)閉Issue如果當(dāng)前
commit 針對某個issue，那么可以在
Footer 部分關(guān)閉這個issue 。
命令:Closes #234
具體規(guī)范內(nèi)容:
https://github.com/conventional-changelog/commitlint/tree/master/@commitlint/config-conventional#type-enum
