ESLint出现故障:带有建议的规则必须将`meta.hasSuggestions`属性设置为`true`。

44

我正在使用VSCode,当我在.eslintrc.js文件中添加以下行:'react-hooks/exhaustive-deps': 'warn'时,我会在ESLint输出中得到以下内容:

Rules with suggestions must set the `meta.hasSuggestions` property to `true`. Occurred while linting
C:\Users\filepath.jsx:72 Rule: "react-hooks/exhaustive-deps"

这会破坏所有其他的代码检查。我已经尝试将以下内容添加到我的 .eslintrc.js 文件中:

meta: {
    hasSuggestions: true
},

这使得我遇到了以下错误:

UnhandledPromiseRejectionWarning: Error: ESLint configuration in .eslintrc.js is invalid:
    - Unexpected top-level property "meta".

任何帮助都将不胜感激。

这是我的.eslintrc.js文件:

module.exports = {
    env: {
        browser: true,
        es2021: true,
    },
    extends: ['eslint:recommended', 'plugin:react/recommended', 'plugin:react-hooks/recommended'],
    settings: {
        'react': {
            'version': 'detect'
        }
    },
    parserOptions: {
        ecmaFeatures: {
            jsx: true,
        },
        ecmaVersion: 13,
        sourceType: 'module',
    },
    plugins: ['react-hooks', 'react'],
    rules: {
        'react/prop-types': [0],
        quotes: ['error', 'single'],
        semi: [1],
        'react/jsx-indent': [1],
        'no-multi-spaces': [1],
        'indent': [2],
        'react/jsx-newline': [2, { prevent: true }],
        'no-trailing-spaces': [1],
        'no-multiple-empty-lines': [1, { max: 1 }],
        'space-infix-ops': [1],
        'object-curly-spacing': [1, 'always'],
        'comma-spacing': [1],
        'react-hooks/rules-of-hooks': 'error',
        'react/self-closing-comp': 1,
        'react/jsx-closing-tag-location': 1,
        'no-unreachable': 1,
        'react-hooks/exhaustive-deps': 'warn'
    },
};

这是我的 package.json 文件:

{
  "name": "app",
  "private": true,
  "dependencies": {
    "@babel/preset-react": "^7.14.5",
    "@emotion/react": "^11.4.1",
    "@emotion/styled": "^11.3.0",
    "@mui/icons-material": "^5.0.4",
    "@mui/material": "^5.0.3",
    "@mui/styles": "^5.0.1",
    "@rails/actioncable": "^6.1.4-1",
    "@rails/activestorage": "^6.1.4-1",
    "@rails/ujs": "^6.1.4-1",
    "@rails/webpacker": "^6.0.0-rc.5",
    "babel-plugin-macros": "^3.1.0",
    "prop-types": "^15.7.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-on-rails": "12.3.0",
    "react-player": "^2.9.0",
    "turbolinks": "^5.2.0",
    "webpack": "^5.53.0",
    "webpack-cli": "^4.8.0"
  },
  "version": "0.1.0",
  "babel": {
    "presets": [
      "./node_modules/@rails/webpacker/package/babel/preset.js"
    ]
  },
  "browserslist": [
    "defaults"
  ],
  "devDependencies": {
    "@webpack-cli/serve": "^1.6.0",
    "eslint": "^8.0.0",
    "eslint-plugin-react": "^7.26.1",
    "eslint-plugin-react-hooks": "^4.2.0",
    "webpack-dev-server": "^4.3.1"
  }
}


你是如何解决这个问题的?对我来说,所有的解决方案都没有起作用。 - Sagar
@Sagar 我使用下面接受的答案解决了这个问题。 - Flobbinhood
4个回答

56
ESLint 8.0.0带来了一个破坏性变更,适用于提供建议的规则。如果您使用的规则在此变更后没有更新以使其正常工作,那么您无法在.eslintrc.js中添加任何内容来使其工作。
您可以做以下操作:
  • 在插件更新以与ESLint 8兼容之前,继续使用ESLint 7。
  • 对于eslint-plugin-react-hooks,有关问题的规则已经更新(请检查GitHub上的此行),只是该软件包尚未发布稳定版本。但是,每天都有alpha版本发布,截至撰写本文时,最新版本为4.2.1-alpha-c3a19e5af-20211014。如果您确实需要ESLint 8和此插件,您可以使用alpha版本,直到下一个稳定版本发布。

2
React问题在这里:https://github.com/facebook/react/issues/22545 - aeharding
12
目前可以使用 npm install -D eslint-plugin-react-hooks@next - Ninh Pham
@下一个对我有用,谢谢! - bildungsroman
修复于4.3.0版本。 - Zmey
什么都不起作用,规则与建议必须将 meta.hasSuggestions 属性设置为 truemeta.docs.suggestion 被 ESLint 忽略。 - Sagar
升级提供规则的npm包解决了这个问题。 - totymedli

3

为了解决问题,我不得不移除规则"react/require-default-props": "off"。虽然并不完美,但在使用React v18时起到了作用。


1

在将react-scripts从4.x升级到5.0.1后,我遇到了相同的错误。由于我们的package.json中也有"eslint-config-react-app",所以解决方法是将其也升级到当前版本。在我们的情况下是7.0.1。希望这可以帮助您解决相同的问题。


0

eslint-config-react-app npm 包从 5.2.1 更新到 6.0.0 对我很有效!


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接