Configuración Rápida de ESLint con Standard JS para Proyectos de JavaScript y de React con Vite JS

¿Que és Lint / Linter?

De acuerdo a Wikipedia: en la actualidad, se utiliza el término Lint para designar a herramientas que realizan tareas de comprobación (detectar código sospechoso, confuso o incompatible) en cualquier lenguaje de programación. Las herramientas de tipo lint generalmente funcionan realizando un análisis estático del código fuente.

En resumen, lo usamos para poder identificar algunos errores mientras estamos escribiendo nuestro código, ya que la herramienta se encarga de revisar en tiempo real nuestro código fuente, lo que nos permite corregir errores antes de si quiera ejecutar el código. Incluso un Linter es capaz de sugerir posibles soluciones al error mostrado.

Algunas cosas que detecta y nos puede ayudar a corregir un Linter son:

• Errores de sintaxis: No cerrar correctamente un elemento o que falten parámetros, etc.
• Inconsistencia en el estilo de escritura del código: Detecta cosas como el uso de 2 o 4 espacios para tabulación en diferentes partes del código, uso del ; al final, etc., y mantiene todo homogéneo según su configuración.
• Evitar malas prácticas: Es posible realizar una configuración para que todo nuestro código cumpla con ciertas reglas, esto es muy útil sobre todo cuando se desarrolla en colaboración, ya que todos escriben bajo las mismas reglas. También es capaz de avisarnos si declaramos alguna variable o función pero no hacemos uso de ella.

ESLint: El Linter de JavaScript

ESLint es un Linter de código abierto diseñado para ser usado en el lenguaje JavaScript (ECMAScript).

Recordemos que JavaScript es un lenguaje débilmente tipado (no especificamos el tipo de cada variable: string, boolean, int, etc.) y es también un lenguaje dinámico (la asignación del tipo de cada variable ocurre en tiempo de ejecución), por lo que es más fácil cometer errores (como typos) a la hora de estar escribiendo código.

Es ahí donde entra ESLint para analizar nuestro código en JavaScript y ayudarnos a identificar errores mientras lo escribimos.

Ahora que conocemos un poco más acerca del uso de Linters y ESLint, procederemos a mostrar su instalación y configuración en Visual Studio Code.

Prerrequisito: Instalación de Plugin de ESLint en Visual Studio Code

Antes de poder a comenzar a usar ESLint en nuestros proyectos, es necesario instalar y activar en Visual Studio Code el Plugin de ESLint .

Por lo que en Visual Studio Code, nos dirigiremos a la pestaña de extensiones (atajo: CTRL + SHIFT + X) y escribiremos Eslint en la barra de búsqueda y seleccionaremos el desarrollado por Microsoft.

Esto lo necesitamos hacer solo una vez por dispositivo que queramos usar ESLint con Visual Studio Code.

Tip: También puedes instalar la extensión de Error Lens para poder ver los errores en linea con tu código (aparecerán al lado derecho) y ahora serán más visibles.

Instalación de Standard JS en el proyecto y uso de configuración de ESLint (Vite 4.2 y anteriores)

Normalmente para usar ESLint necesitaríamos ejecutar el comando npm init @eslint/config y comenzar a establecer la configuración inicial para indicarle a ESLint como debe interpretar y corregir nuestro código, sin embargo es posible ahorrarnos esta parte y usar una configuración estandarizada y muy popular para proyectos en JavaScript, la cuál se llama Standard JS.

Primero, necesitamos instalar Standard JS como dependencia de desarrollo en nuestro proyecto:

npm i standard -D

Una vez instalado Standard JS, bastará con añadir su configuración de ESLint en el archivo package.json de nuestro proyecto, por lo que debemos agregar estas lineas al final del archivo pero justo antes de cerrar la última llave }

  "eslintConfig": {
    "extends": [
      "./node_modules/standard/eslintrc.json"
    ]
  }

Nota: Recuerda agregar una coma , al elemento anterior, antes de anexar esta configuración.

Esta configuración es exactamente la misma si estamos haciendo un proyecto con JavaScript Vanilla o bien si usamos Vite para crear un proyecto de React.

¡ Listo, ahora podemos usar ESLint en nuestro proyecto y comenzar a escribir código !

¿Te interesa que ESLint aplique las correcciones automáticamente al guardar el archivo para que se de formato al código de manera adecuada? Consulta el artículo ACTIVAR AUTOCORRECIÓN/AUTOFORMATO DE ESLINT AL GUARDAR UN ARCHIVO EN VS CODE.

ACTUALIZACIÓN: Instalación de Standard JS en el proyecto en Vite 4.3+

El día 20 de Abril de 2023, Vite actualizo su herramienta para crear un nuevo proyecto (create vite), donde ahora incluye un nuevo archivo .eslintrc.cjs para realizar la configuración del Linter, incluso ya viene con una configuración de fábrica, pero sí aún así queremos usar las reglas de Standard JS, solo debemos hacer lo siguiente:

1. Instalar la librería de Standard en el proyecto como dependencia de desarrollo.

npm i standard -D

2. En el archivo .eslintrc.cjs, en el apartado de extends, añadir las reglas ‘standard’ y ‘standard-jsx’, quedando de la siguiente forma dicho apartado:

  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:react/jsx-runtime',
    'plugin:react-hooks/recommended',
    'standard',
    'standard-jsx'
  ],

Y listo, con eso ya podemos disfrutar de las reglas de Standard JS en nuestro linter de Vite 4.3+.