cra学习: 配置 eslint、 prettier 和 commitlint 规范工程

React的基本的校验/代码格式化以及git提交信息的规范

几个工具的说明

• eslint：cra 自带的，对代码规范的一些基本约束
• prettier: 代码统一格式化
• commitlint: 将提交信息，统一模板

prettier 安装 与配置

• https://prettier.io/docs/en/install.html
• https://prettier.io/docs/en/precommit.html

# 1. 安装
npm install --save-dev --save-exact prettier
# 2. 添加配置文件
touch .prettierrc.json .prettierignore
# 3.1 手动格式化
npx prettier --write .
# 3.2 在提交之前自动进行格式化
npx mrm@2 lint-staged

安装一个插件

• 默认的 react 里的 eslint 与 prettier 是冲突的
• https://github.com/prettier/eslint-config-prettier
• 添加 “prettier”，让prettier的规则覆盖一部分 cra里的 eslint的规则

npm install --save-dev eslint-config-prettier

commitlint

• 让提交的信息统一
• https://github.com/conventional-changelog/commitlint

参考

• https://www.youtube.com/watch?v=9vqJr4Kgk-A
• https://prettier.io/