React18入门（第二篇）——React18+Ts项目配置husky、eslint、pretttier、commitLint_react husky

前言

我的项目版本如下：

• React： V18.2.0
• Node.js: V16.14.0
• TypeScript：最新版
• 工具： VsCode

本文将采用图文详解的方式，手把手带你快速完成在React项目中配置husky、prettier、commitLint，实现编码规范的统一，git提交规范的统一。

---

一、使用 eslint

1.1 装包

npm install eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev
1

1.2 ESLint 插件安装

---

1.3 创建命令并使用

新增命令

"lint": "eslint \"src/**/*.+(js|ts|jsx|tsx)\"",
1

执行 npm run lint :

二、使用 prettier

2.1 装包

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

2.2 创建配置文件

在根目录中创建 .eslintrc.js 文件，写入如下代码

module.exports = {
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended"
  ],
  "overrides": [
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "plugins": [
    "react",
    "@typescript-eslint"
  ],
  "settings": {
    "react": {
      "version": '18.2.0', // 指定你的 React 版本，可以是具体版本号或 "detect" 自动检测
    },
  },
  "rules": {
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

2.3 安装插件

Prettier - Code formatter
1

安装成功后：

2.3 创建命令并使用

新增命令：表示扫描文件格式，并将文件中的代码修改为正确的格式

"format": " prettier --write \"src/**/*.+(js|ts|jsx|tsx)\"",
1

运行命令：

2.4 vscode 配置

配置成功后，之前讲的通过 npm run format 可以将双引号格式化为 单引号，现在仅需使用 ctrl + s 保存文件，vscode 即可自行格式化

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}
1
2
3
4
5

2.5 代码风格配置

根目录下新建 .prettierrc.js 文件，并写入如下代码：

module.exports = {	
  // 箭头函数只有一个参数的时候可以忽略括号
  arrowParens: 'avoid',
  // 括号内部不要出现空格
  bracketSpacing: true,
  // 行结束符
  endOfLine: 'auto',
  // 行宽
  printWidth: 100,
  // 换行方式
  proseWrap: 'preserve',
  // 分号
  semi: false,
  // 使用单引号
  singleQuote: true,
  // 缩进
  tabWidth: 2,
  // 使用tab缩进
  useTabs: false,
  // 后置逗号，多行对象、数组在最后一行增加逗号
  trailingComma: 'es5',
  parser: 'typescript',
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

2.6 重启 vscode

重启 vscode 后，我们在 .prettierrc.js 文件中配置的代码风格才会生效

---

三、将代码提交到 git 仓库

如何使用 vscode 将代码推送至 git 仓库