Configurar ESLint para proyecto React o React Native con JavaScript o TypeScript

Tiempo de lectura: 3 minutos

Hoy vamos a aprender cómo podemos configurar ESLint para un proyecto que utiliza React y React Native y JavaScript o TypeScript.

Nos permitirá reconocer los errores que aparecen en nuestro código y configurar el tipo de error que queremos.

Lo primero de todo es instalar ESLint:

npm install eslint --global

Una vez instalado, lo instalamos en nuestro proyecto.

npm install --save-dev eslint

Y ahora vamos a configurarlo:

eslint --init

Nos preguntará para qué vamos a utilizar ESLint:

En mi caso seleciono la opción por defecto «To check syntax and find problems».

Ahora selecicono JavaScript modules:

El tipo de framework en este caso es React:

Si no usamos TypeScript seleccionamos No.

En mi caso ejecuto con Node, ya que utilizo React Native, entonces seleccionamos Node pulsando la tecla espacio.

El formato de configuración, podemos elegir el que queramos, en mi caso JavaScript.

Nos preguntará si queremos instalarlo y seleccionamos Yes. Y usando NPM en mi caso.

Una vez instalado, nos habrá creado un archivo llamado .eslintrc.js

Recomiendo instalar el plugin de VSCode ESLint.

Para que ESLint te indique qué importar cuando encuentre un error de importación, puedes usar el plugin eslint-plugin-import. Este plugin proporciona una serie de reglas relacionadas con las importaciones en JavaScript, incluyendo la detección de errores de importación.

npm install eslint-plugin-import --save-dev

Y podemos añadirlo en el archivo .eslintrc.js

"plugins": ["import"],
"rules": {
    "import/no-unresolved": "error"
}

Si no nos crea el archivo .eslintrc.js podemos crearlo:

module.exports = {
    "env": {
        "browser": true,
        "es2021": true,
        "node": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended"
    ],
    "overrides": [
        {
            "env": {
                "node": true
            },
            "files": [
                ".eslintrc.{js,cjs}"
            ],
            "parserOptions": {
                "sourceType": "script"
            }
        }
    ],
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],
    "rules": {
        "react/prop-types": 0,
        "global-require": 0,
        "no-unused-vars": 1,
        "import/no-unresolved": "error"
    }
}

Nota: si utiliza la configuración de la versión 8, se utiliza el fichero eslint.config.mjs:

import globals from "globals";
import pluginJs from "@eslint/js";
import tseslint from "typescript-eslint";
import pluginReact from "eslint-plugin-react";
import parser from "@typescript-eslint/parser";

export default [
  {
    files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"],
    languageOptions: {
      ecmaVersion: "latest",
      sourceType: "module",
      globals: { ...globals.browser, ...globals.node }
    },
    parser: parser,
    plugins: {
      react: pluginReact,
      "@typescript-eslint": tseslint,
    },
    rules: {
      "react/prop-types": 0,
      "global-require": 0,
      "no-unused-vars": 1,
      "import/no-unresolved": "error",
    },
  },
  {
    files: [".eslintrc.{js,cjs}"],
    languageOptions: {
      sourceType: "script",
    },
    env: {
      node: true,
    },
  },
];