EnlightenCode

前言 ​

在团队开发中，代码规范和提交规范对于项目的可维护性至关重要。本文将详细介绍如何从零搭建一个规范的React TypeScript项目，包括代码检查、格式化、Git提交规范等配置。

项目初始化 ​

首先，我们需要创建一个React TypeScript项目。可以选择使用Create React App或Vite：

shell
# 使用Create React App
npx create-react-app my-app --template typescript

# 或使用Vite（推荐，更快）
npm create vite@latest react-demo-vite --template react-ts

ESLint配置 ​

ESLint用于代码质量检查，帮助我们发现和修复代码中的问题。

  1. 安装依赖
shell
npm install eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin -save-dev
  1. 配置ESLint

初始化配置文件 .eslint.js

shell
npx eslint --init    ## 然后根据引导一步一步走

eslint.config.mjs（使用新版扁平配置）：

js
import globals from "globals";
import pluginJs from "@eslint/js";
import tseslint from "typescript-eslint";
import pluginReact from "eslint-plugin-react";

export default [
  {
    files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"],
    rules: {
      "no-unused-vars": "error",
      "@typescript-eslint/no-unused-vars": "error"
    }
  },
  {
    languageOptions: { 
      globals: globals.browser 
    }
  },
  pluginJs.configs.recommended,
  ...tseslint.configs.recommended,
  pluginReact.configs.flat.recommended,
];
  1. 添加npm scripts
json
{
  "scripts": {
    "lint": "eslint ."
  }
}

Prettier配置 ​

Prettier用于代码格式化，确保团队代码风格统一。

  1. 安装依赖
sh
npm install prettier eslint-config-prettier eslint-plugin-prettier -save-dev
  1. 配置Prettier(创建.prettierrc.js)
js
module.exports = {
  semi: true,
  trailingComma: 'all',
  singleQuote: true,
  printWidth: 80,
  tabWidth: 2,
  endOfLine: 'auto'
};
  1. 添加npm scripts
json
{
  "scripts": {
    "format": "prettier --write \"./**/*.{js,jsx,ts,tsx}\""
  }
}
  1. VSCode配置
json
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

Git提交规范 ​

配置Husky ​

Husky用于设置Git钩子，在代码提交前进行检查。

sh
# 安装husky
npm install -D husky

# 初始化husky
npx husky install

# 添加prepare脚本（package.json）
{
  "scripts": {
    "prepare": "husky install"
  }
}

配置Commitlint ​

Commitlint用于规范化提交信息。

sh
# 安装 commitlint 和 commitlint 配置
npm install --save-dev @commitlint/cli @commitlint/config-conventional

# 创建配置文件
echo "module.exports = {extends: ['@commitlint/config-conventional'],}" > commitlint.config.js

配置Git钩子 ​

创建.husky/pre-commit：

sh
npm run lint
npm run format
git add .

创建.husky/commit-msg：

sh
npx --no -- commitlint --edit ${1}

确保钩子文件有执行权限：

sh
chmod +x .husky/pre-commit
chmod +x .husky/commit-msg

提交规范说明 ​

Commitlint 支持以下类型的提交信息：

  • feat: 新功能
  • fix: 修复bug
  • docs: 文档更新
  • style: 代码格式（不影响代码运行的变动）
  • refactor: 重构（既不是新增功能，也不是修改bug的代码变动）
  • perf: 性能优化
  • test: 增加测试
  • chore: 构建过程或辅助工具的变动

提交示例

sh
git commit -m "feat: add user login function"
git commit -m "fix: resolve memory leak in dashboard"