使用ESLint、 prettier 、commitlint 、husky搭建规范React TypeScript项目基础框架

一、用 Create React App 初始化项目#

1、首先确保本机安装了Node.js
2、在终端窗口输入如下命令: 因为项目用到了typescript，所以后面加上这个参数，否则创建的项目是javascript版本的。

Copy
npx create-react-app jira --template typescript

二、配置 ESLint、 prettier 、commitlint 、husky规范工程#

Prettier。官网地址。这个工具能够使输出代码保持风格一致。

安装配置 Prettier#

第一步、 安装Prettier package#

打开终端，在项目根目录执行如下安装命令:

Copy
#yarn命令
yarn add -dev --exact prettier 

#npm命令
npm install --save-dev --save-exact prettier

第二步、配置.prettierrc.json#

Copy
## 终端输入以下命令
echo {}> .prettierrc.json
## 或者手动在项目根目录下新建.prettierrc.json

在.prettierrc.json文件添加以下内容。

Copy
{
    "trailingComma": "es5",
    "tabWidth": 4,
    "semi": false,
    "singleQuote": true
}

第三步、配置prettierignore#

在项目根目录新建.prettierignore文件，内容如下：

Copy
node_modules
# Ignore artifacts:
build
coverage

第四步，执行Prettier命令，#

注意该命令是手动执行代码整理格式指令。第五步是设置自动格式化命令。此步操作可以不做。

Copy
# yarn 命令
yarn prettier --write .

# npx  命令
npx prettier --write .

接着，在package.json文件中的scripts节点中增加：

Copy
"format": "prettier --write \"**/*.{ts,tsx,js,json,css,scss}\""

这样，就可以执行如下命令，对整个项目进行代码格式化

Copy
# yarn 命令
yarn format

# npx  命令
npm run format

第五步，设置自动化格式化命令,安装husky。#

该工具是管理git-hook的工具，在commit之前会调用lint-staged方法自动触发。

Copy
npx mrm@2 lint-staged

安装后package.json文件末尾会增加以下内容.

Copy
## 注意：此项目为TypeJavaScript项目，需要在后缀列表中添加ts和tsx文件。 
"devDependencies": {
    "husky": "^7.0.4",
    "lint-staged": "^12.3.8",
    "prettier": "2.6.2"
  },
  "lint-staged": {
    "*.{js,css,md,ts,tsx}": "prettier --write"
  }

第六步 配置兼容Eslint#

项目中使用了Eslint，如果您使用 ESLint，请安装eslint-config- prettier 以使 ESLint 和 Prettier 相互配合。它会关闭所有不必要或可能与 Prettier 冲突的 ESLint 规则。

Copy
yarn add eslint-config-prettier -D 

同时在package.json文件中eslintConfig增加"prettier"

Copy
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest",
      "prettier"
    ]
  },

安装配置commitlint、husky#

CommilLint。官网地址 。commitlint + husky 用来规范 git commit -m "" 中的描述信息。

第一步、安装commitlint#

Copy
## 在终端，项目根目录下运行：
yarn add @commitlint/{config-conventional,cli} -D

npm install --save-dev @commitlint/{config-conventional,cli}

## windows
npm install --save-dev @commitlint/config-conventional @commitlint/cli

第二步、配置commitlint#

运行命令，这里会在项目根目录下生成commitlint.config.js文件。

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

第三步、安装和配置husky#

Copy
# 安装 Husky v6
npm install husky --save-dev
yarn add husky --dev

# 激活 hooks
npx husky install
yarn husky install

# 添加 hook
npx husky add .husky/commit-msg "npx --no-install commitlint --edit "$1""

常用的提交规范：#

Copy
# 主要type

feat:     增加新功能
fix:      修复bug

# 特殊type

docs:     只改动了文档相关的内容
style:    不影响代码含义的改动，例如去掉空格、改变缩进、增删分号
build:    构造工具的或者外部依赖的改动，例如webpack，npm
refactor: 代码重构时使用
revert:   执行git revert打印的message

# 暂不使用type

test:     添加测试或者修改现有测试
perf:     提高性能的改动
ci:       与CI（持续集成服务）有关的改动
chore:    不修改src或者test的其余修改，例如构建过程或辅助工具的变动