在 Eslint 配置中设置属性"files"会引发 Eslint VSCode 扩展错误

Question

当我尝试设置属性"文件"；在ESLint配置文件中"；。eslintrc.cjs"我从EsLint VsCode扩展中得到以下错误：

ESLint:客户端.eslintrc.cjs中的ESLint配置无效：-意外的顶级属性"文件"。有关详细信息，请参阅"ESLint"输出通道。

每次我运行npm run lint(我将此脚本包含在我的package.json文件"lint": "eslint ./**",中)时，ESlint不仅会在.jsx文件中查找错误，还会在.svg、.png等文件中查找。因此，我试图将以下属性files: ['src/**/*.jsx'],添加到我的ESlint配置文件中，以避免检查src目录外的文件和不是.jsx.的文件

这是我的.eslintrc.js文件：

module.exports = {
env: {
browser: true,
es2021: true,
},
extends: [
'airbnb',
'airbnb/hooks',
'plugin:react/recommended',
],
overrides: [
],
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
},
plugins: [
'react',
],
files: ['src/**/*.jsx'],
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 }],
},
};

Answer 1

您应该使用overrides来包括files，例如

module.exports = {
env: {
browser: true,
es2021: true,
},
extends: ['airbnb', 'airbnb/hooks', 'plugin:react/recommended'],
overrides: [
{
plugins: ['react'],
files: ['src/**/*.jsx'],
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 }],
},
},
],
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
},
}

请参阅此处的文档https://eslint.org/docs/latest/use/configure/configuration-files#how-do覆盖工作。