React ESLint配置：对声明未使用的必填组件Props发出警告

要让ESLint检测组件中声明了但未使用的必填Props，需要结合TypeScript类型信息和ESLint的TypeScript插件实现，具体步骤如下：

1. 安装必要依赖 #

确保项目已安装TypeScript相关的ESLint插件和解析器，未安装则执行：

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

2. 配置ESLint规则 #

在项目的ESLint配置文件（如.eslintrc.js或.eslintrc.json）中添加以下配置：

module.exports = {
  parser: '@typescript-eslint/parser',
  parserOptions: {
    project: './tsconfig.json', // 指向你的tsconfig配置文件
    tsconfigRootDir: __dirname,
  },
  plugins: ['@typescript-eslint'],
  rules: {
    '@typescript-eslint/no-unused-vars': [
      'warn',
      {
        vars: 'all',
        args: 'after-used',
        argsIgnorePattern: '^_',
        ignoreRestSiblings: false,
      },
    ],
    '@typescript-eslint/no-unused-params': [
      'warn',
      {
        argsIgnorePattern: '^_',
      },
    ],
  },
};

3. 核心说明 #

• parserOptions.project是关键：开启后ESLint能读取TypeScript的类型信息，识别出哪些Props是必填（无?修饰的属性），从而精准检测未使用的必填项。
• 针对你提供的代码，users作为必填Prop未被使用，配置后ESLint会触发警告，提示'users' is defined but never used。
• 如果需要忽略特定前缀的Props（比如_开头的），可以调整argsIgnorePattern参数跳过检测。

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