在ESLint配置中设置files属性触发VS Code扩展报错

Let's break down your problem and fix it step by step:

First, the "Unexpected top-level property 'files'" error happens because prior to ESLint v8.23.0, the files property wasn't allowed at the top level of your config—it could only be used inside entries in the overrides array. Your current config places files at the root, which violates the schema the ESLint extension expects.

Here are three solid solutions to resolve both the config error and your unwanted file-scanning issue:

Solution 1: Move files into the overrides array #

This is the most compliant approach for older ESLint versions. Wrap your files specification inside an override entry (you can add rules specific to these files here if needed, or keep your global rules as-is):

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'airbnb',
    'airbnb/hooks',
    'plugin:react/recommended',
  ],
  overrides: [
    {
      files: ['src/**/*.jsx'], // Place files here instead of top-level
      // Optional: Add rules specific to JSX files only
    }
  ],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  plugins: [
    'react',
  ],
  rules: {
    'react/jsx-uses-react': 'off',
    'react/react-in-jsx-scope': 'off',
    'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
    'no-use-before-define': ['error', { functions: false }],
    'no-param-reassign': ['error', { props: false }],
  },
};

Solution 2: Use ignorePatterns to exclude unwanted files #

Instead of specifying which files to include, tell ESLint which files to skip. This keeps your config clean and avoids the files property issue entirely:

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  ignorePatterns: ['**/*.svg', '**/*.png', '**/*.jpg', '**/*.gif'], // Add all non-JSX files here
  extends: [
    'airbnb',
    'airbnb/hooks',
    'plugin:react/recommended',
  ],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  plugins: [
    'react',
  ],
  rules: {
    'react/jsx-uses-react': 'off',
    'react/react-in-jsx-scope': 'off',
    'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
    'no-use-before-define': ['error', { functions: false }],
    'no-param-reassign': ['error', { props: false }],
  },
};

Solution 3: Update your lint script to target specific files #

Skip modifying the ESLint config entirely and adjust your package.json script to only scan the files you care about:

"lint": "eslint src/**/*.jsx"

Running npm run lint will now only check .jsx files in the src directory, ignoring all other file types automatically.

Bonus: Check your ESLint version #

If you're using ESLint v8.23.0 or newer, top-level files is actually supported. You can verify your version with:

npm list eslint

If your version is outdated, upgrading to v8.23.0+ would let you keep the top-level files property without errors. Just make sure your VS Code ESLint extension is up to date too.

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