Vite React TypeScript项目TodoList功能正常但ESLint报错求助

我正在练习TypeScript技能，使用Vite TypeScript React创建了一个简易TodoList项目，功能可正常运行，但ESLint对代码标记了红色下划线错误。

相关代码片段 #

<div className="flex justify-center flex-col items-center gap-4">
  <h2 className="text-3xl font-bold">Todo Input</h2>

  <form onSubmit={handleSubmit} className="flex gap-2">
    <Input
      placeholder="Input details"
      onChange={handleChange}
      value={value}
    />
    <button className="bg-[#0077D4] text-white px-4 rounded-md">
      Add new task
    </button>
  </form>

  <h3 className="text-2xl font-bold mt-4">Todo list</h3>
  <div className="flex gap-4 mb-4">
    <button
      onClick={handleAll}
      className="bg-[#0077D4] text-white px-24 active:bg-[#005A9C]"
    >
      All
    </button>
    <button
      onClick={handleDone}
      className="bg-[#0077D4] text-white px-24 active:bg-[#005A9C]"
    >
      Done
    </button>
    <button className="bg-[#0077D4] text-white px-24 active:bg-[#005A9C]">
      Todo
    </button>
  </div>
  <List
    todos={filteredTodos}
    onDelete={handleDelete}
    onChecked={handleCheckTodo}
  />
</div>

ESLint错误信息 #

• '>' expected. Cannot find 'className'
• ';' expected.ts(1005) Cannot find name 'onSubmit'. Did you mean 'onsubmit'?
• Operator '<' cannot be applied to types 'boolean' and 'RegExp'

配置文件 #

tsconfig.json #

{
  "files": [],
  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.node.json" }
  ]
}

ESLint配置文件 #

import js from '@eslint/js'
import globals from 'globals'
import reactHooks from 'eslint-plugin-react-hooks'
import reactRefresh from 'eslint-plugin-react-refresh'
import tseslint from 'typescript-eslint'

export default tseslint.config(
      { ignores: ['dist'] },
      {
        extends: [js.configs.recommended, ...tseslint.configs.recommended],
        files: ['**/*.{ts,tsx}'],
        languageOptions: {
          ecmaVersion: 2020,
          globals: globals.browser,
        },
        plugins: {
          'react-hooks': reactHooks,
          'react-refresh': reactRefresh,
        },
        rules: {
          ...reactHooks.configs.recommended.rules,
          'react-refresh/only-export-components': [
            'warn',
            { allowConstantExport: true },
          ],
        },
      },
    )

错误解决方法 #

1. 处理'className'未找到、'>' expected错误 #

这类错误是因为ESLint未正确识别TSX中的JSX语法，缺少React相关配置。

步骤：

1. 安装依赖：

npm install eslint-plugin-react --save-dev

2. 修改ESLint配置，添加React插件及规则：

import js from '@eslint/js'
import globals from 'globals'
import react from 'eslint-plugin-react'
import reactHooks from 'eslint-plugin-react-hooks'
import reactRefresh from 'eslint-plugin-react-refresh'
import tseslint from 'typescript-eslint'

export default tseslint.config(
      { ignores: ['dist'] },
      {
        extends: [
          js.configs.recommended,
          ...tseslint.configs.recommended,
          react.configs.flat.recommended,
          react.configs.flat['jsx-runtime']
        ],
        files: ['**/*.{ts,tsx}'],
        languageOptions: {
          ecmaVersion: 2020,
          globals: globals.browser,
          parserOptions: {
            ecmaFeatures: {
              jsx: true
            }
          }
        },
        plugins: {
          react,
          'react-hooks': reactHooks,
          'react-refresh': reactRefresh,
        },
        rules: {
          ...reactHooks.configs.recommended.rules,
          'react-refresh/only-export-components': [
            'warn',
            { allowConstantExport: true },
          ],
          'react/prop-types': 'off'
        },
      },
    )

2. 处理'onSubmit'未找到、';' expected错误 #

核心原因是TypeScript未正确识别JSX事件属性，或文件扩展名错误：

• 确保包含JSX的组件文件后缀为.tsx，而非.ts；
• 检查tsconfig.app.json的compilerOptions，确保启用JSX支持：

{
  "compilerOptions": {
    "jsx": "react-jsx",
    // 其他配置...
  }
}

3. 处理Operator '<' cannot be applied to types 'boolean' and 'RegExp'错误 #

这个错误是代码逻辑中出现了错误的类型比较，比如把布尔值和正则表达式用<对比。

• 检查handleChange、handleCheckTodo等函数的逻辑，找到错误的比较语句；
• 若要判断字符串是否匹配正则，应使用regex.test(stringValue)，而非<运算符。

内容的提问来源于stack exchange，提问作者Denyyel