如何在React+TS+Vite项目构建时禁用no-unused-vars错误？

我用create-react-app构建了React + TypeScript + Vite项目，执行npm build时一直碰到"no-unused-vars"错误，想彻底禁用这个错误提示。

我已经尝试过以下配置，但都没效果：

• tsconfig.json：

"compilerOptions": { 
  "noUnusedLocals": false, 
  "noUnusedParameters": false 
}

• eslint.config.json：

"no-unused-vars": [ "error", { "caughtErrors": "none" } ],
"@typescript-eslint/no-unused-vars": ["off"]

• .eslintrc.js：

module.exports = {
    rules: {
        "no-unused-vars": "off",
        "@typescript-eslint/no-unused-vars": "off",
    }
}

• package.json：

"rules": {
    "no-unused-vars": "off",
    "@typescript-eslint/no-unused-vars": "off"
}

注意：我不想通过给变量加_或者注释的方式抑制错误，只希望项目能顺利构建，不再出现这个错误。

正确配置方案（针对Vite+TypeScript+React项目） #

Vite项目的ESLint配置逻辑和传统create-react-app（webpack）项目略有不同，尤其是使用新的ESLint flat config（eslint.config.js）的情况下，你之前的配置可能因为格式或优先级问题不生效。以下是几种可行的解法：

1. 修正ESLint Flat Config（推荐，Vite新项目默认用这个） #

如果你的项目用的是ESLint 8.21+的扁平配置文件eslint.config.js，需要确保规则正确覆盖TypeScript的检查：

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: 'latest',
      globals: globals.browser,
    },
    plugins: {
      'react-hooks': reactHooks,
      'react-refresh': reactRefresh,
    },
    rules: {
      // 禁用原生no-unused-vars，因为TypeScript的规则会覆盖它
      'no-unused-vars': 'off',
      // 彻底禁用TypeScript未使用变量检查
      '@typescript-eslint/no-unused-vars': 'off',
      // 保留你需要的其他规则
      'react-hooks/rules-of-hooks': 'error',
      'react-hooks/exhaustive-deps': 'warn',
      'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
    },
  },
);

2. 若使用旧版.eslintrc.js配置 #

如果你的项目仍在使用传统的.eslintrc.js，需要确保配置正确继承TypeScript规则，并且规则优先级正确：

module.exports = {
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  plugins: ['@typescript-eslint'],
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
  ],
  rules: {
    'no-unused-vars': 'off',
    '@typescript-eslint/no-unused-vars': 'off',
  },
};

3. 检查Vite配置是否强制开启了ESLint检查 #

有时候Vite插件会强制在构建时执行ESLint，你可以在vite.config.ts中调整ESLint插件的配置，确保错误级别不会阻断构建：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import eslint from 'vite-plugin-eslint';

export default defineConfig({
  plugins: [
    react(),
    eslint({
      // 禁用ESLint错误导致构建失败
      failOnError: false,
      // 或者只禁用no-unused-vars的错误
      overrideConfig: {
        rules: {
          '@typescript-eslint/no-unused-vars': 'off',
        },
      },
    }),
  ],
});

4. 验证配置是否生效 #

执行以下命令检查ESLint配置是否正确加载：

npx eslint your-component-file.tsx --print-config

在输出中查找@typescript-eslint/no-unused-vars，确认它的值是off。

为什么之前的配置无效？ #

• 如果你用的是ESLint扁平配置，旧的.eslintrc.js或package.json中的ESLint配置会被忽略，必须在eslint.config.js中配置。
• TypeScript的noUnusedLocals和noUnusedParameters是编译器选项，只控制TS编译时的错误，而你遇到的是ESLint的错误，所以这两个配置不影响ESLint的检查。
• 若ESLint规则中同时存在no-unused-vars和@typescript-eslint/no-unused-vars，需要确保两者都被禁用，因为TypeScript的规则会覆盖原生规则，但原生规则仍可能触发。

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