Configuración de ESLint

¿Qué es ESLint?

ESLint es una herramienta de linting para Javascript. Un linter es un programa que se encarga de revisar el código escrito y es capaz de señalar errores y posibles bugs que podemos corregir para mejorar nuestros programas, de esta manera tenemos acceso a los errores incluso antes de que sucedan.

¿Por qué usar ESLint?

Gracias a que JavaScript es un lenguaje dinámico y débilmente tipado, especialmente propenso a errores por parte del programador es que ESLint es muy útil. Esta herramienta nos ayuda a prevenir la manera de antaño para encontrar errores en este lenguaje.

El objetivo de ESLint es encontrar errores mucho antes de que sucedan, de manera automática y sin necesidad de ejecutar el código. Esto nos permite reparar los errores muy rápido y agilizar nuestro tiempo de desarrollo.

ESLint está basado en reglas configurables y viene con un conjunto preestablecido que podemos usar como punto de inicio y más adelante poder habilitar o deshabilitar ciertas reglas considerando nuestro estilo de código o incluso una convención en nuestro equipo de desarrollo.

ESLint y Gatsby

Gatsby incluye una configuración integrada de ESLint . Para la mayoría de los usuarios, la configuración incorporada de ESLint es todo lo que necesita. Sin embargo, si tienes una configuración personalizada o una convención en tu equipo de trabajo podemos configurarlo.

instalación

Ya que Gatsby viene con ESLint configurado de base podemos añadir nuestra configuración inicializando desde la herramienta en node_modules:

./node_modules/.bin/eslint --init

Este comando va a lanzar un proceso de ayuda para configurar ESLint paso a paso, revisemos los elementos:

1. ¿Con qué objetivo vamos a usar ESLint?

Revisar la sintaxis; revisar la sintaxis y encontrar problemas; o revisar sintaxis, encontrar problemas y forzar un estilo de código.

En nuestro caso basta con revisar la sintaxis y encontrar problemas.

2. ¿Qué tipo de módulos va a utilizar nuestro proyecto?

Utilizaremos Javascript modules.

3. ¿Qué Framework/Biblioteca va a usar nuestro proyecto?

Nuestro proyecto va a utilizar React.

4. ¿En qué entorno corre nuestro proyecto?

Para nuestro proyecto podemos seleccionar ambas.

5. ¿En qué formato deseas el archivo de configuración?

6. Por último, Hace falta una dependencia para trabajar con el estándar de JavaScript, ¿quieres instalarla ahora?

Continúa con Y, esto va a instalar una herramienta que nos va a permitir trabajar con React.

El resultado de este proceso es un archivo llamado .eslintrc.js con el siguiente contenido:

module.exports = {
  env: {
    browser: true,
    es6: true,
    node: true
  },
  extends: 'eslint:recommended',
  globals: {
    Atomics: 'readonly',
    SharedArrayBuffer: 'readonly'
  },
  parserOptions: {
    ecmaFeatures: {
      jsx: true
    },
    ecmaVersion: 2018,
    sourceType: 'module'
  },
  plugins: ['react'],
  rules: {}
}

Vamos a cambiar la propiedad extends, que nos ayuda a heredar una serie de configuraciones pre establecidas y recomendadas. El proceso de init nos ayudó a instalar un plugin para react, vamos a heredar de él en extends.

"extends": [
    "eslint:recommended",
    "plugin:react/recommended"
  ]

Por último, vamos a revisar la opción de rules, esta sección nos permite configurar reglas en particular. Podemos habilitar o deshabilitar reglas para el linter, por ejemplo, que nos notifique con un error o advertencia si no colocamos los punto y coma en el proyecto.

"rules": {
    "semi": "warning",
  },

Gracias a que tenemos configurado el plugin de React y React busca mejores prácticas también hay reglas orientadas al desarrollo de React, podemos modificarlas de igual manera, por ejemplo, remover la linterna para prop-types:

"rules": {
    "semi": "off",
    "react/prop-types": 0,
    "react/display-name": 0,
  },

Esta es la manera de configurar ESLint de manera manual, recuerda que la herramienta nos ayuda a prevenir errores incluso antes de ejecutar el código y ver los errores en consola.