Linters: verificación automática del estilo del código — guía completa para desarrolladores

Imagina que trabajas en un equipo de cinco desarrolladores. Uno prefiere comillas simples, el otro prefiere comillas dobles. El tercero pone punto y coma en todas partes, el cuarto los evita. El quinto usa cuatro espacios para la sangría, y tú, dos. El código empieza a parecer un mosaico y cada revisión de código se convierte en una discusión sobre el formato en lugar de una discusión sobre la arquitectura. ¿Te suena?

Para resolver estos problemas se inventaron los linters, herramientas que comprueban automáticamente el código para ver si cumple ciertas reglas de estilo. No solo ahorran tiempo en la revisión del código, sino que también ayudan a encontrar posibles errores incluso antes de que se ejecute el programa.

¿Qué es un linter y por qué lo necesitas?

Linter (del inglés lint, que significa «limpiar de pelusa») es un programa de análisis de código estático que comprueba el código fuente para ver si cumple con las reglas especificadas sin ejecutarlo. El término apareció en 1978, cuando Stephen Johnson creó la utilidad lint para el lenguaje C.

Los linters modernos resuelven varias tareas importantes. Garantizan la uniformidad del código en el proyecto para que cualquier desarrollador pueda leer y comprender fácilmente el código de sus compañeros. Los linters encuentran errores potenciales, como variables no utilizadas, errores tipográficos en los nombres de las funciones o problemas de visibilidad. Automatizan la verificación del estilo del código, lo que libera tiempo para discutir cosas más importantes durante la revisión del código. Además, los linters ayudan a los principiantes a adaptarse más rápidamente a los estándares del equipo y enseñan las mejores prácticas.

Linters populares para diferentes idiomas

Para JavaScript y TypeScript, la solución más popular es ESLint. Es una herramienta flexible y extensible con una gran cantidad de reglas y complementos. ESLint te permite personalizar las reglas para las necesidades del proyecto, usar configuraciones listas para usar de la comunidad, corregir automáticamente muchos problemas e integrarse con todos los editores de código populares.

El ecosistema de Python utiliza varias herramientas a la vez. Pylint ofrece una verificación completa con un amplio conjunto de reglas, Flake8 combina las capacidades de varias herramientas en una, y Black funciona como un «formateador de código sin concesiones» con una configuración mínima.

Para PHP, el estándar de facto es PHP_CodeSniffer, que comprueba el código para el cumplimiento de los estándares PSR y permite crear sus propias reglas de validación. En el mundo de CSS y SCSS, Stylelint es popular con soporte para CSS moderno y preprocesadores.

Cómo funciona el intercomunicador desde dentro

El proceso de trabajo del linter se puede dividir en varias etapas. Primero, el código fuente se analiza en un árbol de sintaxis abstracta (AST). A continuación, el linter recorre este árbol y aplica reglas a cada nodo, comprobando la estructura del código, los nombres de las variables, el formato y otros aspectos. Después de eso, el linter recopila todos los problemas encontrados y genera un informe que indica el archivo, la línea y la descripción del problema. Por último, para algunos problemas, el linter puede aplicar automáticamente las correcciones.

Veamos un ejemplo sencillo de cómo trabajar con ESLint. Digamos que tenemos el siguiente código:

function calculateSum(a,b) {
    var result = a + b
    console.log(unused)
    return result
}

ESLint encontrará varios problemas en él: no hay espacios después de una coma en los parámetros de la función, se usa una palabra clave obsoleta var en lugar de const, no hay punto y coma al final de la línea y también hay una llamada a una variable indefinida unused.

Configuración de ESLint para el proyecto Vue.js

Analicemos en detalle la configuración del linter para un proyecto real en Vue.js. Primero instalamos los paquetes necesarios:

npm install --save-dev eslint eslint-plugin-vue @vue/eslint-config-prettier

Luego creamos el archivo de configuración .eslintrc.js en la raíz del proyecto:

module.exports = {
  root: true,
  env: {
    node: true,
    browser: true,
    es2021: true
  },
  extends: [
    'plugin:vue/vue3-recommended',
    'eslint:recommended',
    '@vue/prettier'
  ],
  parserOptions: {
    ecmaVersion: 2021,
    sourceType: 'module'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'vue/multi-word-component-names': 'off',
    'vue/require-default-prop': 'error',
    'vue/no-unused-vars': 'warn'
  }
}

En el archivo package.json agregamos scripts para ejecutar la verificación:

{
  "scripts": {
    "lint": "eslint --ext .js,.vue src",
    "lint:fix": "eslint --ext .js,.vue src --fix"
  }
}

Ahora puede ejecutar la verificación con el comando npm run lint o corregir automáticamente los problemas con el comando npm run lint:fix.

Integración con el editor de código

Para ver los errores del linter directamente mientras se escribe el código, es necesario configurar la integración con el editor. Para VS Code, instalamos la extensión ESLint desde el marketplace y añadimos .vscode/settings.json a la configuración:

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue"
  ]
}

Ahora, al guardar el archivo, todos los problemas corregibles se solucionarán automáticamente.

Establecer reglas: un equilibrio entre rigor y comodidad

Una de las preguntas más frecuentes es: ¿cómo de estrictas deben ser las reglas del linter? Las reglas demasiado suaves no darán el efecto deseado, y las demasiado estrictas irritarán a los desarrolladores y ralentizarán el trabajo.

Una buena estrategia es comenzar con un conjunto básico de reglas recomendadas y adaptarlas gradualmente al equipo. No incluyas todas las reglas posibles a la vez, elige las que realmente ayuden a evitar errores. Utiliza niveles de gravedad: error detiene la compilación y requiere una corrección obligatoria, warn muestra una advertencia, pero no bloquea el trabajo, y off desactiva completamente la regla.

Ponte de acuerdo con el equipo sobre las reglas controvertidas. Por ejemplo, las comillas simples o dobles no son una cuestión de corrección, sino de acuerdo. Documenta las razones para elegir reglas específicas para que los nuevos miembros del equipo entiendan la lógica de las decisiones.

Linter en el pipeline de CI/CD

El verdadero beneficio de un linter es cuando se integra en el proceso de integración continua. Esto asegura que todo el código que entra en la rama principal cumpla con los estándares.

Ejemplo de configuración para GitHub Actions en el archivo .github/workflows/lint.yml:

name: Lint

on: [push, pull_request]

jobs:
  lint:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '18'
      - run: npm ci
      - run: npm run lint

Ahora, cada vez que se crea un push o pull request, se inicia automáticamente la comprobación del código. Si el linter encuentra errores, GitHub marcará la comprobación como fallida e inmediatamente verás lo que hay que corregir.

Corrección automática y formateadores

Muchos linters no solo pueden encontrar problemas, sino también corregirlos automáticamente. ESLint con la bandera --fix puede corregir problemas de formato, colocar los puntos y comas que faltan, corregir las comillas y mucho más.

Sin embargo, es mejor usar herramientas especializadas para formatear el código. Prettier es un formateador de código que da su opinión y que formatea el código según reglas estrictas con una configuración mínima. La combinación de ESLint para la verificación de la calidad del código y Prettier para el formato se ha convertido en el estándar en la comunidad de JavaScript.

Para evitar conflictos, usa eslint-config-prettier, que desactiva todas las reglas de ESLint relacionadas con el formato:

npm install --save-dev prettier eslint-config-prettier

Y añade a .eslintrc.js:

extends: [
  'plugin:vue/vue3-recommended',
  'eslint:recommended',
  'prettier' // debe ser el último
]

Errores típicos al usar linters

El primer error común es ignorar las advertencias del linter. Los desarrolladores agregan comentarios eslint-disable para deshabilitar las comprobaciones en lugar de corregir los problemas. Utiliza los comentarios de desactivación solo en casos excepcionales y añade siempre una explicación de por qué se desactiva la regla.

El segundo error es la falta de coherencia en el equipo. Si cada desarrollador utiliza su propia configuración local, se anulan todos los beneficios del linter. Guarda la configuración en el repositorio y asegúrate de que todos usen la misma configuración.

El tercer error es una implementación demasiado tardía. Es difícil añadir un linter a un proyecto grande con una base de código existente. Es mejor empezar desde el principio del proyecto o implementarlo gradualmente: primero para los archivos nuevos, y luego refactorizar gradualmente el código antiguo.

Funciones avanzadas

Los linters modernos ofrecen muchas funciones avanzadas. Puedes crear tus propias reglas de validación para los requisitos específicos de tu proyecto. Los complementos amplían la funcionalidad: por ejemplo, eslint-plugin-security encuentra posibles vulnerabilidades de seguridad, eslint-plugin-a11y comprueba la disponibilidad y eslint-plugin-import controla la corrección de las importaciones.

La integración con TypeScript a través de @typescript-eslint permite verificar el código tipificado teniendo en cuenta el sistema de tipos. Y las configuraciones personalizadas para diferentes partes del proyecto (por ejemplo, diferentes reglas para el front-end y el back-end) ayudan a configurar la verificación de manera flexible.

Conclusión

Los linters no son solo una herramienta para perfeccionistas exigentes. Es una forma probada de mejorar la calidad del código, acelerar la revisión del código, evitar errores y crear un estilo uniforme en el equipo. Empezar a usar un linter es fácil: elige la herramienta adecuada para tu lenguaje de programación, establece la configuración básica, configura la integración con el editor y CI/CD, adapta las reglas a las necesidades del equipo. Al principio, puede parecer que el linter solo ralentiza el trabajo y molesta con sus constantes comentarios. Pero después de una semana notarás cómo el código se ha vuelto más limpio y la revisión del código es más rápida y constructiva. El linter se convertirá en tu asistente silencioso, que controla la calidad del código las 24 horas del día y no se cansa de recordarte las mejores prácticas.

Anexo Kodik ofrece cursos interactivos en Python, JavaScript y otras tecnologías para desarrolladores de cualquier nivel.

Únete a nuestro Canal de Telegram, donde compartimos regularmente artículos útiles, analizamos conceptos complejos en un lenguaje sencillo y ayudamos a resolver los problemas que surgen.

Aprende con un comunidad de desarrolladores!