React配置路径别名、ESLint设置、git commit前规范检查

前言

在开发中，不单单只是对功能的实现、对现有项目的维护，还有对个人代码风格和习惯的养成。一次的写法可能就是永久，习惯是最可怕的。

每个人都有自己的代码风格，在新增功能时选择代码风格的多样性，那么在进行项目代码维护的时，你就要难受的去适应每一种的代码风格，导致内心烦躁，影响团队亲密度，影响工作效率。所以使用ESLint来统一代码风格，那么大家都是这样写代码，只是功能不一样。

设置路径别名

使用create-react-app 创建的项目默认无法修改webpack配置，不像vue-cli是可以通过我们创建的vue.config.js来修改配置文件。我们可以使用 craco来覆盖配置

创建ts模板的react项目

lua 复制代码

npx create-react-app react-app --template typescript

安装craco依赖

css 复制代码

npm install --save @craco/craco

根目录下创建配置文件craco.config.js

要是有其他的需求，自行添加。

js 复制代码

const path = require('path');
module.exports = {
  webpack: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    },
  },
};

修改tsconfig.json文件,防止ts报错

json 复制代码

{
  "compilerOptions": {
    //.....
    "baseUrl": ".",
    "paths": {
      "@/*":["src/*"],
    }
  },
   //....
}

修改 package.json

json 复制代码

 "scripts": {
    "start": "craco  start",
    "build": "craco  build",
    "test": "craco  test",
  },

重新启动一下项目，就可以在项目中使用@，熟悉的使用方式。

ESlint设置

安装ESlint

css 复制代码

npm install eslint --save-dev

根据官网，编写ESlint配置文件

之前我们团队的ESlint规则就是我编写的，下面就是能用到的几个网站。

ESlint的中文官网
ESLint 入门 - ESLint - 插件化的 JavaScript 代码检查工具
配置typescript-eslint
Getting Started | typescript-eslint
配置eslint-plugin-react
eslint-plugin-react: React-specificESLint的linting规则
配置react hooks
eslint-plugin-react-hooks - npm (npmjs.com)
Rules of Hooks -- React (reactjs.org)

Prettier代码格式化工具

代码格式化工具，一般都是配合ESlint使用，自动格式化代码，使其具有一致的风格和可读性。Prettier的重点在于格式化，并不像ESlint那样具有检查代码中的潜在问题和错误的能力

安装Prettier

css 复制代码

npm install prettier --save-dev

编写Prettier配置

Prettier官网
What is Prettier? · Prettier 中文网

解决Prettier与ESLint的配置冲突

安装eslint-config-prettier插件，把其配置到eslintrc规则的尾部

css 复制代码

npm i eslint-config-prettier --save-dev

js 复制代码

module.exports = {
  //...
  extends: ['eslint:recommended', 'plugin:react/recommended', 'plugin:@typescript-eslint/recommended','prettier'],
};

git commit前规范检查

Husky

官网： 🐶 husky | 🐶 husky (typicode.github.io)

官网上是这么说的：You can use it to lint your commit messages, run tests, lint code, etc... when you commit or push. Husky supports all client-side Git hooks.

（你可以用它来检查提交消息、运行测试、检查代码等等。当你承诺或推动。Husky支持所有客户端Git钩子）

简单来说，Husky是一个用于在Git仓库中的Git hooks工具，它的作用是在git执行一些操作的时候触发一些钩子，在钩子处执行一些自己需要的命令。

客户端钩子：

pre-commit：在执行提交前触发，用于检查代码风格、运行代码测试等。
prepare-commit-msg：在提交信息编辑器打开前触发，可以用于自动化生成提交信息。
commit-msg：在提交信息编辑器关闭后触发，用于校验提交信息的格式和内容。
pre-rebase：在执行变基操作前触发，可以用于执行额外的检查或准备工作。

服务器端钩子：（还不知道怎么使用，知道的可以在评论区说一下）

pre-receive：在接收到推送操作前触发，用于对推送的代码进行检查或拒绝。
update：在分支引用更新前触发，可以用于限制分支的修改或执行其他操作。
post-receive：在接收到推送操作后触发，用于执行一些后续处理，如自动化构建、部署等。

安装

js 复制代码

npx husky-init install

这个命令做了一些事情，在项目目录下创建.husky文件夹,并且默认创建了一个pre-commit的钩子；在package.json中添加脚本： "prepare"："husky install"。

这就已经完成了在每次执行git commit命令的时候都会触发pre-commit钩子。

向钩子添加命令或创建一个新钩子

js 复制代码

husky add <file> [cmd]
//npx husky add .husky/commit-msg  "xxxxx"  创建了一个commit-msg钩子并添加xxxxx命令

lint-staged

git commit命令的时候都会触发pre-commit钩子，如果我们设置pre-commit时运行ESlint检查命令，那个会把src文件夹下的所有符合文件格式的文件都走一遍eslint校验，这样太浪费时间了。所以，我们需要过滤出git暂存区里的文件，仅对暂存区的文件做eslint校验即可。 lint-staged的工作原理是在Git提交前，根据配置的规则选择性地对暂存区中的文件进行代码检查。只有满足规则的文件才会被检查，这样就提高了效率。

安装

js 复制代码

npm install lint-staged --save-dev

在package.json中配置lint-staged

js 复制代码

  "lint-staged": {
    "src/**/*.{ts,tsx,js,jsx}": [
      "eslint -c .eslintrc.js --fix",
    ]
  }

上面的意思是执行eslint校验并自动修复，也可以配置其他的命令

js 复制代码

  "lint-staged": {
    "src/**/*.{ts,tsx,js,jsx}": [
      "eslint -c .eslintrc.js --fix",
      "XXXXX",
      "xxxxxxxxxx"
    ]
  }

在pre-commit钩子中添加lint-staged

可以使用命令添加，也可以打开文件手动添加，将pre-commit钩子的内容修改为

js 复制代码

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

echo "pre-commit";
npx lint-staged;

这样最后的结果就是在每一次提交代码时，都会进行ESlint检查，检查不通过则不能成功提交代码，十分的霸道也十分的难受。

结语

不知道的可以去试试。