react+ts+vite项目从零起手配置eslint+prettier+git交互式规范提交

我：give me time，这个项目我一个人撸

领导：what？你一个人撸，okk，加加班，下周要。

我：--||，加不了一点，我撤回上一句话，我只是不想看到项目五花八门的风格和git提交，一起开发问题不大。

emo中，还是想想怎么统一下开发规范。

一、创建react+ts+vite项目

在你隐藏的文件夹打开小黑板（win+R），执行命令 npm init vite

vscode打开创建的项目react-ts-demo1，npm i一下，嗖就好了。恭喜你，你不仅创建了一个react+ts+vite项目，项目还配置好了eslint。

温馨提示：vscode记得装上这两插件

• Eslint
• Prettier

二、添加prettier

1. 在vscode中打开终端，执行命令npm install -D prettier eslint-config-prettier

2. 在package.json文件同级目录下创建.prettierrc文件

{
  "semi": true, // 是否以分号结尾（true 表示加分号）
  "singleQuote": true, // 是否使用单引号（true 表示使用 `'`）
  "trailingComma": "all", // 多行对象/数组最后一个元素后是否加逗号（all 表示都加）
  "printWidth": 120, // 每行最大长度（超出将换行）
  "tabWidth": 2, // 缩进宽度（空格数）
  "bracketSpacing": true, // 对象中 `{ a: b }` 是否在大括号之间加空格
  "arrowParens": "always", // 箭头函数是否总是包裹参数，如 `(x) => x`
  "endOfLine": "lf" // 行尾换行符统一为 `LF`（跨平台防止换行符混乱）
}

3. 在package.json文件同级目录下创建.prettierignore文件

node_modules
dist
build

4. 修改eslint.config.js文件

...
import prettier from 'eslint-config-prettier';

export default tseslint.config([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      ...
      prettier, // 添加到extends最后,禁用eslint中与Prettier有冲突的规则
    ],
    languageOptions: {
      ecmaVersion: 2020,
      globals: globals.browser,
    },
  },
]);

5. 在package.json文件添加可执行命令

 "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "lint": "eslint .", // 会校验所有文件
    "preview": "vite preview",
    "format": "prettier --write .", // 会校验所有文件
  },

7. 在package.json文件同级目录下创建.vscode/settings.json

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

到这里，你的prettier已经配置好了，不行你改改文件，执行下npm run lint 和 npm run format试试。

三、添加Husky

1. 在vscode中打开终端，执行命令npm install -D husky（文档传送门Husky）
2. 执行命令 npx husky init，执行这个命令后会做如下两件事

（1）在package.json文件中添加可执行命令

 "scripts": {
    ...
    "prepare": "husky"
  },

（2）在package.json文件同级目录下创建.husky/pre-commit,文件内容如下

npm test

3. 修改pre-commit文件内容如下，这里面的命令你可以根据需要添加

npm run lint
npm run format
git add .

4. 在vscode终端中执行git commit -m "xxxxxx"，终端显示如下，恭喜你配置成功了。

四、添加lint-staged

1. 在vscode中打开终端，执行命令npm install -D lint-staged（文档传送门lint-staged/lint-staged: 🚫💩 --- Run tasks like formatters and linters against staged git files）
2. 在package.json文件中devDependencies同级添加

"lint-staged": {
    "*.{ts,tsx,js,jsx}": [
      "eslint --fix",
      "prettier --write"
    ]
  }

3. 修改pre-commit文件内容如下

npx lint-staged

4. 在vscode终端中执行git commit -m "xxxxxx"，终端显示如下，恭喜你配置成功了。

解释一下：

（1）为什么使用lint-staged？

• 每次 commit 都全项目 lint/format → ⚠️慢！

• git add . 可能把你未准备提交的文件一并加进来 → ⚠️危险！

（2）为什么要移除git add .？

• 你已经 staged 了你要提交的文件

• lint-staged 自动处理并保留文件修改（不需要你手动 git add）

• git add . 会把你没准备提交的文件一并加入 → 很容易误提交测试代码、日志等

（3）为什么要在package.json文件中增加lint-staged配置？

这样只会对被 git add 的 .ts/.tsx/.js/.jsx 文件执行：

• eslint --fix
• prettier --write

而不会处理整个项目，也不会误伤未 staged 的文件。

（4）为什么是"eslint --fix"和"prettier --write"而不是"eslint ."和"prettier --write ."

• "eslint --fix" 对 lint-staged 传入的 单个文件 执行 eslint --fix
• "eslint ."对 整个项目（当前目录） 执行 lint（⚠️慢且可能误扫）

五、添加commitlint

1. 在vscode中打开终端，执行命令npm install -D @commitlint/cli @commitlint/config-conventional（文档传送门Getting started | commitlint）
2. 在package.json文件同级目录下创建commitlint.config.js文件

export default {
  extends: ['@commitlint/config-conventional'],
  rules: {
    // type 类型定义，表示提交的类型必须是以下这些之一
    'type-enum': [
      2,
      'always',
      [
        'feat', // ✨ 新功能
        'fix', // 🐛 修复 Bug
        'docs', // 📝 仅文档变更
        'style', // 💄 代码格式（不影响功能，如空格、分号等）
        'refactor', // 🔨 代码重构（既不是功能也不是修复）
        'perf', // ⚡ 性能优化
        'test', // ✅ 添加或修改测试
        'build', // 📦 构建相关（构建脚本、依赖更新）
        'ci', // 🧪 持续集成相关（GitHub Actions、CI 配置文件）
        'chore', // 🔧 其他杂项（不属于以上类型）
        'revert', // ⏪ 回滚代码
      ],
    ],

    // subject 不能为空
    'subject-empty': [2, 'never'],

    // 禁止 subject 以句号结尾
    'subject-full-stop': [2, 'never', '.'],

    // type 不能为空
    'type-empty': [2, 'never'],

    // subject 最长不得超过 100 个字符
    'subject-max-length': [2, 'always', 100],

    // 可以允许 scope 为空
    'scope-empty': [2, 'always'],
  },
};

3. 在.husky文件夹下创建commit-msg文件

npx commitlint --edit "$1"

4. 在vscode终端中执行git commit -m "xxxxxx"，终端显示如下，恭喜你配置成功了。如果你想正确提交，请使用格式（git commit -m "feat: xxxx"）

六、添加commitizen（交互式提交） + cz-customizable（自定义中文提示器）

1. 在vscode中打开终端，执行命令npm install -D commitizen cz-customizable
2. 在package.json文件中devDependencies同级添加

  "config": {
    "commitizen": {
      "path": "cz-customizable"
    }
  },

3. 在package.json文件添加可执行命令

 "scripts": {
    ...
     "commit": "cz"
  },

4. 在package.json文件同级目录下创建.cz-config.js文件

export const types = [
  { value: 'feat', name: 'feat:     ✨ 新功能' },
  { value: 'fix', name: 'fix:      🐛 修复缺陷' },
  { value: 'docs', name: 'docs:     📝 文档变更' },
  { value: 'style', name: 'style:    💄 代码格式（不影响功能，例如空格、分号等）' },
  { value: 'refactor', name: 'refactor: 🔨 代码重构（既不是新增功能，也不是修复 bug）' },
  { value: 'perf', name: 'perf:     ⚡ 性能优化' },
  { value: 'test', name: 'test:     ✅ 添加测试' },
  { value: 'build', name: 'build:    📦 构建相关' },
  { value: 'ci', name: 'ci:       🧪 持续集成相关' },
  { value: 'chore', name: 'chore:    🔧 其他杂项' },
  { value: 'revert', name: 'revert:   ⏪ 回滚代码' },
];

export const skipQuestions = ['scope']; // 跳过 scope 提问

export const messages = {
  type: '请选择提交类型:',
  scope: '请输入变更的范围（可选）:',
  customScope: '请输入自定义的变更范围:',
  subject: '请简要描述提交 (必填):',
  body: '请输入详细描述（可选），使用 "|" 换行:',
  breaking: '列出破坏性变更（可选）:',
  footer: '关联关闭的 issue，例如：#31, #34（可选）:',
  confirmCommit: '确认提交吗？(y/n)',
};

温馨提示：不要使用module.exports或者export default

文章到此结束，现在让我们愉快在终端输入npm run commit吧