创建并初始化项目

本文主要是记录如何在React+Typescript项目中，提交代码时，能够自动格式化代码、规范编码风格，使用到的第三方库主要有eslint(为了格式化并校验代码)、prettier(统一代码风格)、husky(为在git commit之前或其他时候提供各类钩子操作)、lint-stage(方便定位暂存的所有文件)、commiltlint(规范commit message)。
本文使用react脚手架CRA(create-react-app)快速生成模板项目，为了使用Typescript，可以使用--template使用以下命令即可创建一个以react为基础的初始化空项目：
npx create-react-app project-name --template typescript
以上命令完成后，可以得到一个名为project-name的初始化项目，在此之后可以进行相关配置了，首先是Eslint的配置。

Eslint相关配置

安装Eslint相关插件

• 安装Eslint npm i eslint -D
• 由于使用了Typescript，所以还需要安装解析Typescript的Eslint相关插件，包括解析Typescript的解析器插件@typescript-eslint/parser等，使用以下命令：npm i @typescript-eslint/parser @typescript-eslint/eslint-plugin -D
• 安装Eslint与React、Hooks相关的插件： npm i eslint-plugin-react eslint-plugin-react-hooks -D

.eslintrc.js配置文件

eslint相关插件安装完成后，需要配置eslint相关的规则，新建.eslintrc.js配置文件。
.eslintrc.js文件中主要需要完成env(运行环境)、extends、plugins和rules等属性的配置，如下代码：

module.exports = {
    env: {
        es6: true,
        browser: true,
    },
    // 继承已启用的规则
    extends: [
        "react-app",
    ],
    // 配置插件列表，插件名称可以省略eslint-plugin-前缀。
    plugins: [
        "react",
    ],
    // 配置解析器支持的语法
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "sourceType": "module"
    },
    // ESLint的规则设置：
    // "off" 或 0 表示关闭规则
    // "warn" 或 1 表示开启警告级别的错误规则
    // "error" 或 2 表示开启错误级别的规则
    rules: {
        // 每行最长字数
        'max-len': [1, 80],
        // 禁止 case 语句落空
        'no-fallthrough': [0],
        'import/no-unresolved': 'off',
        'import/extensions': 'off',
    },
     "babelOptions": {
        "presets": ["@babel/react"]
   },
}

以上代码为最基本的eslint的配置，可以根据需要进行个性化配置。

Prettier相关配置

##prettier相关插件安装

• eslint-config-prettier插件主要作用为：禁用其他与Prettier配置相冲突的规则
• eslint-plugin-prettier插件主要作用则为设置优先使用Prettier配置的规则
  npm i -D prettier eslint-config-prettier eslint-plugin-prettier
• 插件安装完成后，需要设置继承并使用Prettier代码美化规则，在.eslintrc.js 文件的extends配置选项中增加如下代码：

{
    "extends": ["eslint:recommended","plugin:prettier/recommended"]
}

表示使用prettier推荐的配置。

.prettierrc配置文件

{
  "singleQuote": true,
  "trailingComma": "es5"
}

# Husky+lint-staged配置

正所谓千人千面，所以在我们使用git命令时，特别是使用git commit进行代码提交时，不同的开发人员都有自己的编码风格，所以可能会导致团队代码风格不一致，从而造成阅读困难、code review困难及代码冲突等一系列问题。
所以为了统一代码风格和格式，可以使用eslint格式化代码和prettier美化代码，此后再进行git commit提交，这就需要使用husky(处理pre-commit等钩子的工具)和lint-staged(处理暂存区的文件)来完成：

• 首先安装依赖npm i husky -D
• 在package.json中添加scripts脚本："prepare": "husky install",
• 执行npm run prepare命令，此时会初始化husky初并生成.husky文件夹
• 添加pre-commit钩子: npx husky add .husky/pre-commit "npm run lint"，但此时会弹出以下提示：

Usage:

husky install [dir] (default: .husky)

husky uninstall

husky set|add <file> [cmd]

解决方式为：执行npx husky add .husky/pre-commit "npm-run-lint"，然后在生成的文件中将"npm-run-lint"的中划线去掉

• 此后通过git commit提交代码时，会先执行npm run lint命令，而我们希望通过这个命令，执行eslint格式化（此时需要安装并使用lint-staged）
• 安装lint-staged： npm install lint-staged -D
• 在package.json中添加scripts配置，"lint": "lint-staged",
• 继续在packages.json中配置lint-staged相关命令

"lint-staged": {
    "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
      "prettier --write",
      // "eslint --fix",
      "git add"
    ]
  },

上述husky相关的配置表示：在执行git commit之前，所有staged(暂存)状态的，并且扩展名是js,jsx,ts,tsx,json,css,scss,md的文件都会自动使用prettier --write命令格式化。
格式化后，husky钩子会自动检查所有文件，是否全部符合eslint规范，不符合的会进行自动修复，修复不了的或者存在不符合规范的代码，git commit执行将被终止。也可以省略"eslint --fix".

commitlint相关配置

该配置主要用于规范与格式化提交信息(commit message)

• 首先安装commitlint相关插件： npm install --save-dev @commitlint/config-conventional @commitlint/cli
• 添加commit-msg钩子
• 执行npx husky add .husky/commit-msg "npx --no-install commitlint --edit "$1""
• 但在上一步应该注意，windows不能直接执行，所以可以按以下步骤执行
• npx husky add .husky/commit-msg
• 再在文件在写入如下内容：npx --no-install commitlint --edit "$1"
• 创建commitlint.config.js文件配置commitlint规则

module.exports = {
	parserPreset: 'conventional-changelog-conventionalcommits',
	rules: {
		'subject-case': [
			2,
			'never',
			['sentence-case', 'start-case', 'pascal-case', 'upper-case'],
		],
		'subject-empty': [2, 'never'],
		'subject-full-stop': [2, 'never', '.'],
		'type-case': [2, 'always', 'lower-case'],
		'type-empty': [2, 'never'],
		'type-enum': [
			2,
			'always',
			[
				'build',
				'chore',
				'ci',
				'docs',
				'feat',
				'fix',
				'perf',
				'refactor',
				'revert',
				'style',
				'test',
			],
		],
	},
    };

以上为基础配置，更多详细介绍与配置可参考官网

补充

遇到Parsing error: [BABEL] 错误：
在.eslintrc.js文件中添加如下内容:

 "babelOptions": {
      "presets": ["@babel/react"]
 },