React + Ts eslint配置

你现在需要的是 React + TypeScript 项目中配置 ESLint 所需的 npm 包，以及对应的安装和配置方法，我会按照 Vue3+TS 相同的清晰逻辑为你讲解。

一、核心依赖包（分基础和 React/TS 适配）

React + TS 项目的 ESLint 依赖同样分为基础核心包 和适配 React/TS 的插件包，以下是完整列表及作用：

包名	作用
`eslint`	ESLint 核心库，提供代码检查基础能力
`@typescript-eslint/eslint-plugin`	TypeScript 专属 ESLint 规则插件
`@typescript-eslint/parser`	ESLint 解析 TS 代码的解析器
`eslint-plugin-react`	React 专属 ESLint 插件（支持 React 18+）
`eslint-plugin-react-hooks`	检查 React Hooks 使用规范（如依赖项、规则 Hooks 调用）
`eslint-plugin-react-refresh`（可选）	检查 React 组件热更新相关规范（Vite 项目推荐）
`eslint-config-prettier`（可选）	禁用 ESLint 中与 Prettier 冲突的规则
`eslint-plugin-prettier`（可选）	将 Prettier 规则集成到 ESLint 中

二、安装命令

1. 基础安装（仅 ESLint + React + TS）

bash

运行

bash 复制代码

# npm 安装
npm install eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-plugin-react eslint-plugin-react-hooks --save-dev

# yarn 安装
yarn add eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-plugin-react eslint-plugin-react-hooks -D

# pnpm 安装（推荐）
pnpm add eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-plugin-react eslint-plugin-react-hooks -D

2. 包含 Prettier + 热更新检查（推荐）

如果需要 Prettier 格式化 + React 热更新检查，补充安装：

bash

运行

lua 复制代码

pnpm add prettier eslint-config-prettier eslint-plugin-prettier eslint-plugin-react-refresh --save-dev

三、核心配置（.eslintrc.js）

在项目根目录创建 .eslintrc.js 文件，这是 React + TS 最常用的配置模板：

javascript

运行

java 复制代码

module.exports = {
  // 指定代码运行环境，启用对应全局变量
  env: {
    browser: true, // 浏览器环境（React 运行环境）
    es2021: true,  // 支持 ES2021 语法
    node: true     // Node.js 环境（如配置文件、脚本）
  },
  // 继承已有规则集，减少重复配置
  extends: [
    'eslint:recommended', // ESLint 官方推荐规则
    'plugin:@typescript-eslint/recommended', // TS 推荐规则
    'plugin:react/recommended', // React 推荐规则
    'plugin:react/jsx-runtime', // 适配 React 17+ 的 JSX 自动导入（无需手动 import React）
    'plugin:react-hooks/recommended', // React Hooks 强制规则
    'eslint-config-prettier' // 禁用与 Prettier 冲突的规则（装了 Prettier 才加）
    // 'plugin:prettier/recommended' // 开启 Prettier 作为 ESLint 规则（装了 eslint-plugin-prettier 才加）
  ],
  // 指定解析器（TS 解析器）
  parser: '@typescript-eslint/parser',
  // 解析器选项
  parserOptions: {
    ecmaVersion: 'latest', // 支持最新 ES 版本
    sourceType: 'module',  // 模块化代码（ES Module）
    ecmaFeatures: {
      jsx: true // 支持 JSX 语法（React 核心）
    }
  },
  // 启用的插件
  plugins: [
    '@typescript-eslint',
    'react',
    'react-hooks',
    'react-refresh' // 可选，热更新检查
  ],
  // 自定义规则（按需调整）
  rules: {
    // 关闭 TS any 类型禁止规则（新手项目可临时关闭）
    '@typescript-eslint/no-explicit-any': 'off',
    // React Hooks 必选规则（强制检查依赖项）
    'react-hooks/rules-of-hooks': 'error',
    'react-hooks/exhaustive-deps': 'warn',
    // 禁用 React 组件文件名必须 PascalCase 的检查（可选）
    'react/filename-rules': 'off',
    // 关闭 React 必须声明 props 类型的检查（TS 已做类型检查，无需重复）
    'react/prop-types': 'off',
    // 热更新检查：禁止默认导出（React 组件推荐命名导出）
    'react-refresh/only-export-components': [
      'warn',
      { allowConstantExport: true }
    ]
  },
  // 针对 React 版本的配置（自动检测）
  settings: {
    react: {
      version: 'detect'
    }
  }
}

四、补充配置（可选但推荐）

忽略文件（.eslintignore） ：指定 ESLint 不检查的文件 / 目录

plaintext

复制代码

node_modules/
dist/
build/
*.d.ts
.vscode/

package.json 脚本：添加检查 / 修复命令

json

json 复制代码

{
  "scripts": {
    "lint": "eslint . --ext .js,.jsx,.ts,.tsx", // 检查所有 React/TS 文件
    "lint:fix": "eslint . --ext .js,.jsx,.ts,.tsx --fix" // 自动修复可修复问题
  }
}

五、特殊说明（针对 Create React App 项目）

如果你的 React 项目是通过 create-react-app 创建的（内置了 ESLint），无需手动安装核心包，只需：

安装缺失的适配包：

bash

运行

sql 复制代码

pnpm add eslint-plugin-react-hooks @typescript-eslint/eslint-plugin @typescript-eslint/parser --save-dev

在项目根目录创建 .eslintrc.js 覆盖默认配置即可。

总结

核心必装包 ：eslint + @typescript-eslint/*（解析器 + 插件） + eslint-plugin-react + eslint-plugin-react-hooks；
可选扩展 ：eslint-plugin-react-refresh（热更新）、eslint-config-prettier/eslint-plugin-prettier（兼容 Prettier）；
关键配置 ：.eslintrc.js 中需启用 jsx: true 支持 React 语法，通过 settings 自动检测 React 版本，同时开启 React Hooks 核心规则。

安装完成后运行 npm run lint 即可检查代码，npm run lint:fix 可自动修复缩进、空格等格式问题。