Análisis estático de JavaScript con ESLint y Biome

Si llevas un tiempo trabajando con JavaScript, probablemente hayas oído hablar de ESLint como la herramienta preferida para el análisis estático de código JavaScript. Pero ¿conoces Biome? Este nuevo contendiente de Prettier para dar formato al código está causando revuelo en el ecosistema de JavaScript. Biome va más allá del formato del código e incluye un analizador de calidad, por lo que es una alternativa a ESLint.

Primero, una breve introducción al formato y la calidad del código como herramientas y aspectos importantes para los desarrolladores de JavaScript. Como habrás imaginado, mantener la calidad del código y seguir las convenciones adecuadas de formato es fundamental para el éxito de cualquier proyecto de software, sobre todo cuando trabajas en equipo.

La calidad del código tiene que ver con su comportamiento durante la ejecución. El código de alta calidad es eficiente, fácil de entender y no tiene errores. Por otro lado, el formato del código, que forma parte del estilo, consiste en organizarlo visualmente para que sea legible y fácil de entender.

// Convention of preferred code formatting and quality
function add(a, b){
  return a + b;
}

// An example for what would be considered as
// poor code formatting, making it hard to read
// and error-prone
function add(c,d){return c+d;}

En el ecosistema de JavaScript, hay varias herramientas que pueden ayudar a los desarrolladores a mantener el formato y la calidad del código. Entre ellas, ESLint y Biome se han convertido en opciones populares para quienes buscan optimizar su base de código.

Introducción a Biome y ESLint

ESLint es una herramienta de análisis de código JavaScript de código abierto que ayuda a los desarrolladores a producir código JavaScript de alta calidad. Permite detectar patrones problemáticos o código que no cumple con determinadas pautas de estilo. Es altamente personalizable y se puede configurar para aplicar distintos estándares de programación.

ESLint es muy popular y admite complementos, lo que significa que puedes agregar reglas personalizadas para aplicar tus estándares de programación. Por ejemplo, puedes exigir el uso de punto y coma al final de cada instrucción o el uso de comillas simples en lugar de dobles para las cadenas.

Si exploraste algún proyecto de JavaScript, quizá hayas visto un archivo .eslintrc.js como este:

// .eslintrc.js
module.exports = {
    "rules": {
        "semi": ["error", "always"],
        "quotes": ["error", "double"]
    }
};

Biome, por otro lado, es una herramienta relativamente nueva en el ecosistema de JavaScript que se centra en el formato y el análisis de calidad del código. Es posible que ya hayas oído hablar de Prettier o que lo hayas usado. Ahí es donde entra Biome. Está escrito en Rust y diseñado para ser más rápido. Biome es bastante preceptivo, pero ofrece un conjunto reducido de opciones configurables. Este es un ejemplo de un archivo biome.json:

{
  "javascript": {
    "formatter": {
      "indentWidth": 2,
      "lineWidth": 100,
      "trailingComma": "none",
      "semicolons": "always",
    }
  }
}

Actualmente, Biome es compatible con archivos JavaScript, TypeScript, JSX y JSON.

El cambio de Prettier a Biome y el enfoque de ESLint en la calidad del código

Tradicionalmente, muchos desarrolladores de JavaScript han confiado en Prettier para dar formato al código. Sin embargo, con la llegada de Biome, las cosas están cambiando. El objetivo principal de Biome es la velocidad y el rendimiento. Está escrito en Rust, que es hasta 35 veces más rápido que Pettier al dar formato a más de 170,000 líneas de código distribuidas en 2,000 archivos. La velocidad puede marcar una gran diferencia durante el desarrollo cuando se trabaja con una base de código extensa.

Esto no significa que ESLint vaya a desaparecer. Al contrario, ESLint sigue siendo una herramienta potente para mantener la calidad del código. Mientras que Biome se enfoca en la apariencia del código, ESLint se centra en su comportamiento. Estas herramientas se complementan: Biome se encarga del formato y ESLint verifica que el código siga las prácticas recomendadas y no tenga errores comunes.

Biome y ESLint son herramientas útiles para cualquier desarrollador de JavaScript. Cada una cumple una función importante para mantener la calidad y el formato del código, lo que permite tener una base de código más confiable y fácil de mantener.

Uso de Biome en un proyecto de JavaScript

Biome ofrece sus funciones mediante una herramienta de línea de comandos que realiza análisis estático del código. Una de sus principales ventajas es que se puede personalizar: los desarrolladores pueden definir sus propias reglas o usar un conjunto de reglas predeterminadas. Esta flexibilidad ayuda a aplicar estándares de programación y prácticas recomendadas en cualquier proyecto de JavaScript.

Este es un ejemplo de cómo podrías usar Biome con JavaScript:

# Install Biome as a development dependency
npm install --save-dev @biomejs/biome

Ten en cuenta que, después de la instalación, Biome deberá ejecutar un script de instalación para descargar los binarios necesarios para tu plataforma. Después, continúa:

# Initialize a new Biome configuration file
npx @biomejs/biome init

Esto crea un archivo de configuración biome.json en la raíz del proyecto. Luego puedes personalizarlo para definir las reglas y la configuración del proyecto. Estos son los valores predeterminados:

{
	"$schema": "https://biomejs.dev/schemas/1.5.3/schema.json",
	"organizeImports": {
		"enabled": true
	},
	"linter": {
		"enabled": true,
		"rules": {
			"recommended": true
		}
	}
}

Como puedes ver, la configuración predeterminada no incluye reglas de formato, que podrían ser incompatibles con la configuración de Prettier de tu proyecto. En mi caso, el archivo .prettierrc.js se ve así:

module.exports = {
  printWidth: 100,
  tabWidth: 2,
  singleQuote: true,
  semi: false,
  trailingComma: 'none',
  useTabs: false,
  bracketSpacing: false
}

Para que Biome sea lo más compatible posible con las reglas de formato de código de Prettier anteriores, puedes agregar lo siguiente al archivo biome.json:

{
  "formatter": {
    "enabled": true,
    "indentStyle": "space",
    "indentWidth": 2,
    "lineWidth": 100,
    "quoteStyle": "single",
    "trailingComma": "none",
    "semicolons": "asNeeded",
    "bracketSpacing": true,
    "arrowParentheses": "asNeeded"
  }
}

Ahora podemos ejecutar el formateador de Biome en nuestra base de código:

npx @biomejs/biome format ./src

El resultado es que solo hay una regla de formato propia de Biome que no se puede configurar y que se relaciona con el espaciado de las funciones:

./src/Utils.js format ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Formatter would have printed the following content:

     2  2 │
     3  3 │   module.exports = {
     4    │ - ··parseUrl:·function(urlToScan)·{
        4 │ + ··parseUrl:·function·(urlToScan)·{
     5  5 │       if (urlToScan === undefined) return urlToScan
     6  6 │
    ····· │
    12 12 │       return urlToScan
    13 13 │     },
    14    │ - ··trimUtmParams:·function(urlToTrim)·{
       14 │ + ··trimUtmParams:·function·(urlToTrim)·{

Otra opción es descartar por completo la configuración de Prettier y usar las reglas de formato de Biome.

Combinar el formato y el análisis de código con Biome

Biome también ofrece un analizador que permite aplicar reglas de calidad del código y que podría considerarse una alternativa a ESLint. Se puede configurar para aplicar un conjunto de reglas predeterminadas o reglas personalizadas definidas en el archivo de configuración biome.json.

Para ejecutar el analizador de Biome, usaremos el comando biome check para comprobar si se incumple alguna de las reglas recomendadas predeterminadas definidas en biome.json.

# Run Biome on your code
npx @biomejs/biome check ./src

Al probar Biome en mi repositorio de código, obtuve el siguiente resultado:

./src/Audit.js:30:7 lint/complexity/useOptionalChain  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Change to an optional chain.

    29 │     if (
  > 30 │       vulnerableAudit.details &&
       │       ^^^^^^^^^^^^^^^^^^^^^^^^^^
  > 31 │       vulnerableAudit.details.items &&
       │       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    32 │       vulnerableAudit.details.items.length > 0
    33 │     ) {

  ℹ Unsafe fix: Change to an optional chain.

     28  28 │
     29  29 │       if (
     30     │ - ······vulnerableAudit.details·&&
     31     │ - ······vulnerableAudit.details.items·&&
         30 │ + ······vulnerableAudit.details?.items·&&
     32  31 │         vulnerableAudit.details.items.length > 0
     33  32 │       ) {

./src/RenderJson.js:27:7 lint/complexity/noForEach ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Prefer for...of instead of forEach.

    25 │       vulnerabilitiesResults.details.items.length > 0
    26 │     ) {
  > 27 │       vulnerabilitiesResults.details.items.forEach(vulnItem => {
       │       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  > 28 │         vulnerabilitiesCount += vulnItem.vulnCount
  > 29 │         const vulnInfo = this.formatVulnerability(vulnItem)
  > 30 │         vulnerabilities.push(vulnInfo)
  > 31 │       })
       │       ^^
    32 │     }
    33 │

  ℹ forEach may lead to performance issues when working with large arrays. When combined with functions like filter or map, this causes multiple iterations over the same type.

The number of diagnostics exceeds the number allowed by Biome.
Diagnostics not shown: 15.
Checked 4 file(s) in 3ms
Found 35 error(s)
check ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Some errors were emitted while running checks.

Así que, efectivamente, hay muchas diferencias con la configuración de ESLint y Prettier que ya tengo. Tendrás que decidir si quieres usar el analizador y las reglas de formato preceptivas de Biome o aplicar, en la medida de lo posible, tu configuración actual mediante sus reglas y opciones.

Los comandos biome ci y biome explain

El comando biome ci resulta útil en un entorno de integración continua (CI). Al ejecutarlo, comprueba si el código incumple alguna de las reglas definidas en el archivo de configuración biome.json. Si encuentra algún incumplimiento, termina con un código de estado distinto de cero, lo que indica un error.

Este es un ejemplo de uso del comando biome ci:

# Check your code using biome ci
npx @biomejs/biome ci ./src

Por otro lado, el comando biome explain sirve para obtener información detallada sobre una regla específica. Explica por qué la regla es importante y cómo su incumplimiento puede afectar la calidad del código. También muestra un fragmento de código para ilustrar la regla.

Por ejemplo, para entender la regla 'useArrowFunction', ejecutarías el siguiente comando:

# Understand a specific rule
npx @biomejs/biome explain useArrowFunction

Esto muestra en la consola un documento Markdown que explica la regla en detalle.

# useArrowFunction

Fix is Safe.

This rule is recommended.

# Description
Use arrow functions over function expressions.

An arrow function expression is a compact alternative to a regular function expression,
with an important distinction:

this is not bound to the arrow function. It inherits this from its parent scope.

This rule proposes turning all function expressions that are not generators (function) and don't use this into arrow functions.

## Examples

### Invalid

const z = function() {
return 0;
}

const delegatedFetch = async function(url) {
return await fetch(url);
}

const f = function() {
return this.prop;
}

Named function expressions are ignored:

const z = function z() {
return 0;
}

Function expressions that declare the type of `this` are  also ignored:

const z = function(this: A): number {
return 0;
}

Uso de Biome en VS Code

Para quienes usan Visual Studio Code (VS Code), Biome ofrece una extensión específica que integra todas sus funciones y capacidades directamente en el IDE. Esta extensión ofrece análisis en tiempo real, formato automático y mucho más.

Para usar Biome en VS Code, sigue estos pasos:

1. Instala la extensión de Biome desde el marketplace de VS Code.

2. Abre la paleta de comandos (View o Ctrl/⌘+⇧+P), selecciona Format Document With, elige Configure Default Formatter y, luego, selecciona Biome.

Biome y el proyecto Node.js

Uno de los avances recientes más importantes en la base de código del proyecto Node.js es el pull request abierto por Yagiz Nizipli, que busca agregar Biome como formateador de código predeterminado.

Integrar Biome en la base de código del proyecto Node.js es un gran paso para garantizar la coherencia del formato. En una base de código tan extensa como la de Node.js, el rendimiento en tiempo de ejecución del formateador y del analizador de calidad del código es fundamental para que los colaboradores reciban comentarios rápidos.

Conclusión

¿Significa esto que ESLint y Prettier van a desaparecer? Para nada. ESLint sigue siendo una herramienta potente para mantener la calidad del código; admite fácilmente reglas personalizadas y se usa ampliamente en muchos proyectos del ecosistema. Prettier también sigue siendo una opción popular para dar formato al código. Sin embargo, Biome se perfila como una alternativa más rápida a Prettier y como un analizador de calidad del código que podría reemplazar a ESLint.

Adopta prácticas de programación segura

No te pierdas los recursos de Snyk Learn que te ayudarán a escribir código seguro y de alta calidad.

Si valoras el análisis estático del código para dar formato y analizarlo, la extensión de Snyk para VS Code te resultará muy útil para recibir comentarios en tiempo real sobre vulnerabilidades de seguridad en el código y vulnerabilidades de código abierto. Para profundizar tus conocimientos y mejorar tus habilidades en prácticas de programación segura, regístrate en Snyk. Es una plataforma que prioriza la seguridad para desarrolladores y ofrece muchos recursos para ayudarte a escribir código seguro y de alta calidad.