prettier
pre-commit Hook
eslint-config-prettier冲突解决
conventional-changelog/commitlint
一、create-react-app环境配置prettier，在git commit前进行代码格式化，统一团队开发代码格式，并且规范git commit message 提示信息格式
prettier官方网站：https://prettier.io/
二、具体实现步骤
第一步：搭建create-react-app typescript环境
npx create-react-app my-app --template typescript
第二步:
安装 prettier包
yarn add --dev --exact prettier
安装报错：[email protected]需要指定版本或大于等于16+
解决:卸载：nodejs,下载并安装nodejs@16+
第三步:生成prettier配置文件.prettierrc.json
echo {}> .prettierrc.json --建议手动创建.prettierrc.json文件，不然字符集不对，不要使用这个命令创建（坑）
.prettierrc.json文件中，只有: {}
第四步:新建prettier忽略文件 .prettierignore
#Ignore artifacts:
build
coverage
提示:如果要手动格式化--执行代码格式化命令
yarn prettier --write .
一般开发的时候，都是自动化执行格式化命令
第五步:安装并配置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,在开发中eslint和prettier有可能有冲突，需要解决
安装eslint-config-prettier开发Dev依赖
yarn add [email protected] --dev
修改:package.json用prettier配置覆盖上面的react-app配置
第六步:
问题：
解决: https://www.jianshu.com/p/38f04aef1c9d
git config --globalcore.autocrlftrue
第七步:团队开发需要规范git
commit message提示信息，统一提示信息的写法
conventional-changelog/commitlin
https://github.com/conventional-changelog/commitlint
注意:需要认真阅读文档，如果message不符合规范，则报错
1.安装@commitlint/config-conventional
@commitlint/cli
yarn add @commitlint/config-conventional@12@commitlint/cli --dev
2.执行命令:
echo "module.exports= {extends: ['@commitlint/config-conventional']}">
commitlint.config.js --建议手动创建commitlint.config.js文件，不然字符集不对，不要使用这个命令创建（坑）
文件名: commitlint.config.js
内容:
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 提示信息规范构成
git message 提示信息规范构成: Header 是必需的，Body 和 Footer 可以省略。
1.Header包括: 包括三个字段：type（必需）、scope（可选）和subject（必需）。
(1)
type指本次提交的类型，为必填项，必须为以下之一：
feat:一项新功能
fix:一个错误修复
docs:仅文档更改
style:不影响代码逻辑的更改（空白，格式，缺少分号等）
refactor:既不修正错误也不增加功能的代码更改（重构）
perf:改进性能的代码更改
test:添加缺失或更正现有测试
build:影响构建系统或外部依赖项的更改（gulp，npm等）
ci:对CI配置文件和脚本的更改
chore:更改构建过程或辅助工具和库，例如文档生成
（2）Scope用于说明commit 影响的范围，比如数据层、控制层、视图层等等，视项目不同而不同。
（3）subject是commit 目的的简短描述，以动词开头，使用第一人称现在时，比如change，而不是changed或changes;第一个字母小写,结尾不加句号（.）
2.Body可选：Body部分是对本次commit 的详细描述，可以分成多行。
有两个注意点。
（1）使用第一人称现在时，比如使用change而不是changed或changes。
（2）应该说明代码变动的动机，以及与以前行为的对比。
3.Footer 可选
Footer部分只用于两种情况。
(1)不兼容变动
如果当前代码与上一个版本不兼容，则
Footer 部分以BREAKING
CHANGE开头，后面是对变动的描述、以及变动理由和迁移方法。
(2)关闭Issue如果当前
commit 针对某个issue，那么可以在
Footer 部分关闭这个issue 。
命令:Closes #234
具体规范内容:
https://github.com/conventional-changelog/commitlint/tree/master/@commitlint/config-conventional#type-enum