React 创建项目流程+配置 eslint prettier 和 commitlint 规范工程

Posted 2022-04-12 石工记

一、 利用create-react-app创建TS项目
React中文文档 ：开始 – React

npx create-react-app projectName --template typescript
// --template typescript ：创建TS项目

二、 配置 eslint、 prettier 和 commitlint 规范工程
 

1.prettier安装与配置： prettier官网
1.1 安装命令

yarn add --dev --exact prettier

1.2 创建空文件：.prettierrc.json

echo > .prettierrc.json

1.2.1 在.prettierrc.json中添加：

    "semi": true,
    "trailingComma": "all",
    "singleQuote": true,
    "printWidth": 120,
    "tabWidth": 4

// 这样配置完后，如果保存还是不能格式化，可能是vscode的默认formatter不是prettier。
// 这时候可以按CTRL + SHIFT + P,输入format然后选择Format Document，
// 点击弹出框的按钮configure,然后选择pretter.

1.3 创建 .prettierignore 文件内容如下：

build
coverage

1.4 安装Pre-commit Hook，实现每次代码提交前自动格式化

npx mrm@2 lint-staged
// 这一行会同时安装husky和lint-stage，并自动生成.husky/pre-commit文件

1.5 安装eslint-config-prettier ，解决eslint和prettier规则冲突

yarn add eslint-config-prettier -D

1.6 在package.json中增加

    "eslintConfig":
        "extends": [
            "react-app",
            "react-app/jest",
            "prettier"  //新增加内容，替换部分eslint规则
        ]
    ,

    "lint-staged":
        "*.js,css,md,ts,tsx,json": "prettier --write" 
         //新增加ts,tsx,json等需要校验的文件
   

2.commitlint安装与配置：commitlint文档
2.1 安装命令

yarn add @commitlint/config-conventional @commitlint/cli -D

2.2 创建文件：commitlint.config.js

echo module.exports = extends: ['@commitlint/config-conventional'] > commitlint.config.js

2.3 在.husky文件夹下生成commit-msg文件

npx husky add .husky/commit-msg "npx --no-install commitlint --edit "$1""

3.git提交规范
feat: 新增feature
fix: 修复bug
docs: 仅仅修改了文档，如readme.md
style: 仅仅是对样式进行修改，如逗号、缩进、空格等。不改变代码逻辑。
refactor: 代码重构，没有新增功能或修复bug
perf: 优化相关，如提升性能、用户体验等。
test: 测试用例，包括单元测试、集成测试。
chore: 改变构建流程、或者增加依赖库、工具等。
revert: 版本回滚

示例：

git commit -m "test: demo test"