Jimena, miembro de este gran equipo de trabajo, nos hizo el favor de crear esta reseña ya que conoce muy bien dicho tema.
Solución:
Configuración de ESLint para el proyecto Next.js/React (javascript)
Instalar ESLint
npm i eslint --save-dev
Instale los complementos de ESLint:
npx install-peerdeps --dev eslint-config-airbnb
El comando anterior instalará 6 complementos: eslint-config-airbnb, eslint-plugin-import, eslint-plugin-react, eslint-plugin-react-hooksy eslint-plugin-jsx-a11y. También puede instalar estos complementos individualmente.
instalar babel eslint
npm i -D babel-eslint
Instale el complemento más bonito (opcional, para que más bonito no se estropee con la pelusa)
npm i -D eslint-config-prettier eslint-plugin-prettier
Tus “devDependencies” deberían verse así:
"devDependencies":
"babel-eslint": "^10.1.0",
"eslint": "^6.8.0",
"eslint-config-airbnb": "^18.1.0",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-prettier": "^3.1.3",
"eslint-plugin-react": "^7.20.0",
"eslint-plugin-react-hooks": "^2.5.1"
Ahora, crea un archivo .eslintrc.json en la raíz del proyecto. Pegue debajo de la configuración:
"env":
"browser": true,
"commonjs": true,
"es6": true,
"node": true
,
"parser": "babel-eslint",
"extends": [
"eslint:recommended",
"airbnb",
"airbnb/hooks",
"plugin:react/recommended",
"plugin:import/errors",
"plugin:import/warnings",
"plugin:jsx-a11y/recommended",
// "plugin:react-hooks/recommended",
// always put prettier at last
"prettier"
],
"globals":
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
,
"parserOptions":
"ecmaFeatures":
"jsx": true // enable linting for jsx files
,
"ecmaVersion": 11,
"sourceType": "module"
,
"settings":
"react":
"version": "detect"
,
"plugins": ["react", "react-hooks"],
"rules":
// NextJs specific fix: suppress errors for missing 'import React' in files for nextjs
"react/react-in-jsx-scope": "off",
// NextJs specific fix: allow jsx syntax in js files
"react/jsx-filename-extension": [1, "extensions": [".js", ".jsx"] ], //should add ".ts" if typescript project
"react/display-name": 1
Además, instale la extensión ESLint para VSCode.
Vuelva a cargar la ventana VSCode una vez para obtener la pelusa adecuada
ESLint comenzará automáticamente a detectar errores/advertencias en *.js y *.jsx archivos Si ese no es el caso, entonces su proyecto no tiene errores de pelusa o ESLint no está configurado correctamente. Para probar si el linting funciona, ejecute el comando eslint en la terminal con la ruta de la carpeta, es decir eslint pages/** y aviso de salida.
Para deshabilitar la pelusa de algunos archivos/carpetas, puede crear un .eslintignore en la raíz del proyecto.
.eslintignore:
# don't ever lint node_modules
node_modules
# don't lint build output (make sure it's set to your correct build folder name)
dist
# don't lint nyc coverage output
coverage
Finalmente, también puede agregar pelusa a scripts en package.json como parte de su proceso de compilación/implementación:
"scripts":
"lint": "eslint ./components/** ./pages/** -c .eslintrc.json --ext js,jsx",
"lint-fix": "eslint ./components/** ./pages/** -c .eslintrc.json --fix --ext js,jsx",
necesita instalar los módulos npm necesarios.
con NPM:
npm i -D babel-eslint eslint-config-airbnb eslint eslint-plugin-jsx-a11y eslint-plugin-import eslint-plugin-react eslint-plugin-react-hooks
con hilo:
yarn add -D babel-eslint eslint-config-airbnb eslint eslint-plugin-jsx-a11y eslint-plugin-import eslint-plugin-react eslint-plugin-react-hooks
Aquí hay un artículo relacionado sobre eso
https://medium.com/@melih193/next-js-eslint-setup-tutorial-for-airbnb-config-c2b04183a92a
Acuérdate de que te brindamos la opción de agregar una reseña si te ayudó.