Estoy usando VSCode, y cuando agrego la línea 'react-hooks/exhaustive-deps': 'warn' a mi .eslintrc.js, obtengo lo siguiente en la salida de 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"Esto rompe todas las demás pelusas. Intenté agregar lo siguiente a mi .eslintrc.js:
meta: { hasSuggestions: true },lo que me da el siguiente error:
UnhandledPromiseRejectionWarning: Error: ESLint configuration in .eslintrc.js is invalid: - Unexpected top-level property "meta".Cualquier ayuda sería apreciada.
Aquí está mi .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' }, };Aquí está mi paquete.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" } }ESLint 8.0.0 viene con un cambio importante para las reglas que brindan sugerencias . No hay nada que pueda poner en su .eslintrc.js para que funcione si usa reglas que no se han actualizado para que funcionen después de este cambio.
Lo que puedes hacer:
eslint-plugin-react-hooks , la regla infractora ya se actualizó (consulte esta línea en GitHub ), es solo que no ha habido una versión estable del paquete desde entonces. Sin embargo, ha habido lanzamientos alfa diarios, en el momento de escribir este artículo, la última versión es 4.2.1-alpha-c3a19e5af-20211014 . Si realmente necesita ESLint 8 y este complemento, puede usar una versión alfa hasta que salga la próxima versión estable.