1.创建项目

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

2.安装依赖

• eslint：核心代码质量工具。

• prettier：代码格式化工具。

• eslint-plugin-prettier：将 Prettier 的规则集成到 ESLint 中。

• eslint-config-prettier：禁用与 Prettier 冲突的 ESLint 规则。

• @typescript-eslint/parser：TypeScript 的 ESLint 解析器。

• @typescript-eslint/eslint-plugin：为 TypeScript 提供额外的 ESLint 规则。

npm install --save-dev eslint prettier eslint-plugin-prettier eslint-config-prettier @typescript-eslint/parser @typescript-eslint/eslint-plugin

3.配置 ESLint

在项目根目录下创建 .eslintrc.js 文件，配置 ESLint 以支持 Prettier 和 TypeScript：

module.exports = {
  root: true, // 确保 ESLint 不会向上查找配置文件
  parser: '@typescript-eslint/parser', // 使用 TypeScript 解析器
  parserOptions: {
    ecmaVersion: 2020, // 支持 ES2020 语法
    sourceType: 'module', // 支持 ES 模块
    ecmaFeatures: {
      jsx: true, // 支持 JSX
    },
  },
  env: {
    browser: true, // 浏览器环境
    node: true, // Node.js 环境
    es6: true, // ES6+ 语法支持
  },
  extends: [
    'eslint:recommended', // ESLint 推荐规则
    'plugin:@typescript-eslint/recommended', // TypeScript 推荐规则
    'plugin:react/recommended', // React 推荐规则
    'plugin:react/jsx-runtime', // 支持 React 17+ 的 JSX 运行时
    'plugin:prettier/recommended', // Prettier 推荐规则
    'prettier', // 禁用与 Prettier 冲突的 ESLint 规则
  ],
  plugins: [
    'react', // React 插件
    'prettier', // Prettier 插件
    '@typescript-eslint', // TypeScript ESLint 插件
  ],
  rules: {
    // ESLint 规则
    'no-unused-vars': 'warn', // 允许未使用的变量，但发出警告
    'no-console': 'warn', // 允许 console，但发出警告
    'react/react-in-jsx-scope': 'off', // React 17+ 不需要此规则
    'react/jsx-uses-react': 'off', // React 17+ 不需要此规则
    'react/jsx-filename-extension': [1, { extensions: ['.tsx', '.jsx'] }], // 允许在 JSX 文件中使用 TS/JS

    // Prettier 规则
    'prettier/prettier': [
      'error',
      {
        singleQuote: true, // 使用单引号
        semi: true, // 使用分号
        trailingComma: 'all', // 在对象或数组的最后一个元素后添加逗号
        printWidth: 80, // 每行的最大字符数
        tabWidth: 2, // 缩进宽度
        useTabs: false, // 不使用制表符缩进
        endOfLine: 'auto', // 自动处理换行符
      },
    ],
  },
  settings: {
    react: {
      version: 'detect', // 自动检测 React 版本
    },
  },
};

4.配置 Prettier

在项目根目录下创建 .prettierrc.js 文件，配置 Prettier 的格式化规则：

module.exports = {
  singleQuote: true, // 使用单引号
  semi: true, // 使用分号
  trailingComma: 'all', // 在对象或数组的最后一个元素后添加逗号
  printWidth: 80, // 每行的最大字符数
  tabWidth: 2, // 缩进宽度
  useTabs: false, // 不使用制表符缩进
  jsxSingleQuote: true, // JSX 中使用单引号
  bracketSpacing: true, // 对象字面量的括号是否换行
  jsxBracketSameLine: false, // JSX 的闭合括号是否在同一行
  endOfLine: 'auto' // 自动处理换行符
};

5.配置 VS Code（可选）

如果你使用的是 VS Code，可以通过以下配置自动格式化代码：

安装插件

1. ESLint 插件：自动检查代码质量。

2. Prettier 插件：自动格式化代码。

配置 .vscode/settings.json

在项目根目录下创建 .vscode 文件夹，并在其中创建 settings.json 文件：

{
  "editor.formatOnSave": true, // 保存时自动格式化
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true // 保存时自动修复 ESLint 问题
  },
  "prettier.configPath": "./.prettierrc.js", // 指定 Prettier 配置文件路径
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode" // 设置 Prettier 为默认格式化工具
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

6.测试配置

npx eslint . --ext .ts,.tsx,.js,.jsx --fix
npx prettier . --write

7. 配置 Husky 和 Lint-staged（可选）

为了确保提交的代码符合格式要求，可以使用 husky 和 lint-staged 在提交前自动运行 ESLint 和 Prettier。

npm install --save-dev husky lint-staged

在 package.json 中添加以下配置：

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

检查配置是否生效   

//都得代码在暂存区才能用下面方法测试
npx lint-staged

如果没有生效？？？？

1.用 npx husky --version  检查，如何显示如下需要安装 npx husky install

Usage:
  husky install [dir] (default: .husky)
  husky uninstall
  husky set|add <file> [cmd]

2.然后关联 npx husky add .husky/pre-commit "npx lint-staged"

8. 总结

现在，你的 React + TypeScript 项目已经配置了 ESLint 和 Prettier，所有配置文件都使用 .js 格式。你可以根据需要进一步调整规则或扩展配置。以下是配置文件的总结：

• .eslintrc.js：ESLint 配置文件。

• .prettierrc.js：Prettier 配置文件。

• .vscode/settings.json：VS Code 的自动格式化配置（可选）。

• husky 和 lint-staged：提交前自动格式化和修复代码（可选）