Linter en Node.js: Una guía para mejorar la calidad del código

El desarrollo de software a menudo se compara con el arte de la construcción. Los códigos son como los ladrillos que utilizamos para construir nuestras aplicaciones, y al igual que en la construcción, necesitamos asegurarnos de que cada ladrillo esté colocado correctamente. En este sentido, el Linter funciona como nuestro supervisor de calidad, que examina cada línea de código para asegurarse de que cumple con ciertas reglas y directrices.

¿Qué es un Linter?

Un linter es una herramienta de software que realiza análisis estático de código, es decir, examina tu código sin ejecutarlo. Su propósito es destacar los errores de sintaxis, encontrar bugs, problemas de rendimiento y garantizar que el código siga un estilo coherente, lo que hace que tu código sea más fácil de leer y mantener. Los linters están disponibles para muchos lenguajes de programación, y JavaScript no es una excepción.

¿Por qué deberías usar un Linter en Node.js?

La primera y más obvia ventaja de usar un linter es la detección temprana de errores. Pero más allá de la simple corrección de errores, un linter puede mejorar la calidad general de tu código de varias maneras:

• Consistencia: Un linter asegura que el código siga un estilo y formato coherente, lo que hace que el código sea más fácil de leer y mantener.

• Prácticas recomendadas: Muchas reglas de linter están diseñadas para garantizar que sigas las prácticas recomendadas de JavaScript, lo que puede resultar en un código más eficiente y menos propenso a errores.

• Aprendizaje: Si estás aprendiendo JavaScript, un linter puede ser una excelente herramienta de aprendizaje. Puede señalar errores que podrías no haber notado y enseñarte cómo corregirlos.

Cómo configurar un Linter en VS Code

VS Code tiene una gran cantidad de extensiones que puedes utilizar para linting. Para el propósito de este artículo, vamos a utilizar ESLint, que es uno de los linters más populares para JavaScript y Node.js.

• Instalación: Primero, instala ESLint en tu proyecto utilizando npm:

npm install eslint --save-dev

• Configuración inicial: A continuación, ejecuta el asistente de configuración de ESLint para crear un archivo de configuración inicial. Este paso es opcional, podrías crear tu propio archivo desde cero, pero el asistente de configuración te ayudará a configurar ESLint para que se ajuste a tus necesidades.

./node_modules/.bin/eslint --init

Este asistente te hará algunas preguntas sobre tu estilo de código y tus preferencias, como qué tipo de módulos utilizas, si usas TypeScript, algún framework web, etc. Basándose en tus respuestas, generará un archivo de configuración .eslintrc en la raíz de tu proyecto. Este archivo es un archivo JSON (podría ser YAML, pero te recomiendo JSON) que contiene todas las reglas que se aplicarán a tu código.

• Personalización de las reglas: Puedes personalizar las reglas de ESLint editando el archivo .eslintrc. Cada regla en ESLint tiene un nombre, y puedes establecer el nivel de cada regla utilizando “off”, “warn” o “error”.

{
  "rules": {
    "semi": "error",
    "quotes": ["error", "double"]
  }
}

• Instala la extensión de ESLint en VS Code: Para que VS Code utilice ESLint para linting, necesitas instalar la extensión de ESLint. Puedes hacer esto desde el menú de extensiones de VS Code.

• Habilita ESLint en VS Code: Finalmente, necesitas habilitar ESLint en VS Code. Puedes hacer esto yendo a las configuraciones de VS Code (File -> Preferences -> Settings) y buscando ESLint. Allí, puedes habilitar la casilla que dice “ESLint: Enable”. Si ya tienes alguna otra extensión como Prettier, te recomiendo que la deshabilites para que ESLint sea el único linter que se ejecute en tu código. La ventaja de usar ESLint sobre otras extensiones es que es altamente personalizable para cada proyecto, mientras que otras extensiones pueden no serlo.

Sobre la librería Standard

Si prefieres no definir tus propias reglas, puedes utilizar una librería como Standard, que proporciona un conjunto de reglas estándar (valga la redundancia) para JavaScript. Standard es un linter, formateador y conjunto de reglas todo en uno. Puedes instalarlo en tu proyecto con:

npm install standard --save-dev

Luego, debes modificar la configuración del package.json de tu proyecto para importar las reglas de Standard:

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

De este modo, todas las reglas de estilo predefinidas por Standard se aplicarán a tu proyecto. Cabe resaltar que, si utilizas esta librería, no necesitas instalar eslint en tu proyecto, ya que Standard utiliza eslint internamente.

Conclusión

Utilizar un linter en tus proyectos puede mejorar drásticamente la calidad de tu código y reducir la cantidad de errores. VS Code hace que sea increíblemente fácil configurar y utilizar un linter como ESLint. Aunque hay algunas desventajas, como el tiempo inicial de configuración y la posibilidad de tener que ajustar ciertas reglas para que se ajusten a tu estilo de codificación, los beneficios superan con creces estos pequeños inconvenientes. En el mundo de hoy, donde la calidad del código es tan importante, no puedes permitirte el lujo de no utilizar un linter.

Referencias

Este video de midudev me ayudó a entender mejor el tema de los linters y como configurarlos en VS Code: ¡Tu CÓDIGO JAVASCRIPT sin ERRORES!