Durante años, en el ecosistema Javascript se ha utilizado ESLint, un linter Javascript que se ha vuelto el estándar para la revisión de código Javascript. Sin embargo, en los últimos años han aparecido varias herramientas creadas con el objetivo de ser mucho más rápidas y sustituir a ESLint. Es el caso de OxLint.
¿Qué es OxLint?
OxLint es una herramienta, que forma parte de Oxidation Compiler, una suite de herramientas desarrolladas en Rust con la intención de ser muy rápidas y eficientes para realizar varias tareas como revisión, parseo, formateo, minificación o transformación de código.
La principal ventaja de OxLint sobre ESLint es su velocidad. Es muchísimo más rápido revisando reglas y encontrando errores en el código, lo que reduce los tiempos en que nuestro navegador está leyendo el código y se queda bloqueado, sobre todo si tenemos una máquina lenta. Además, la configuración está simplificada y está preparado para que funcione de forma sencilla, soportando incluso configuraciones actuales de ESLint.
Instalación de OxLint
Para instalar oxlint en nuestro proyecto, simplemente escribimos lo siguiente:
$ npm install -D oxlint
Lo ideal es instalar una extensión en nuestro editor de código que sea capaz de comunicarse con OxLint. En nuestro caso, si usamos VSCode, utilizaremos la extensión oxc.
El comando
oxlintno requiere Node, por lo que también puede descargarse manualmente desde los releases de GitHub. También podemos ejecutarlo sin instalarlo, con unnpx oxlint.
Reglas de OxLint
OxLint funciona igual que EsLint o la mayoría de estos linters. Sigue una serie de reglas para asegurarse que el código de tu proyecto cumple dichas normas. Puedes ampliar estas reglas, activar nuevas reglas o modificar las actuales. En el momento de escribir esto, OxLint tiene un total de 520 reglas y tiene activadas por defecto 123.
En la página Reglas de OxLint puedes encontrar varias tablas explicativas de todas las reglas existentes, teniendo en cuenta que son facilmente configurables por el desarrollador. También puedes consultarlas desde una terminal con el comando oxlint --rules.
Simplemente, creamos un fichero .oxlintrc.json en el raíz del proyecto:
{
"rules": {
"no-unused-vars": "warn"
}
}
Como puedes ver, dentro de rules, podemos definir (O redefinir) las reglas e indicar cuál es el comportamiento que buscamos. Simplemente colocando un "error", "warn" o "off", podemos indicar que queremos que se marque como un error con el linter (en rojo), como un warning (en amarillo) o simplemente desactivarla y que no la use.
En ciertos casos puedes hacer uno de un
. Normalmente esto se hace para indicar parámetros a la regla, por ejemplo "max-lines": ["error", 250]. Esta regla configura que si un fichero tiene más de250lineas, se marque como error, en rojo.
Extender configuración
OxLint nos permite crear configuraciones modulares. Por ejemplo, podemos crear varios ficheros por tecnología usada, de modo que sea muy fácil extender la configuración. Por ejemplo, observa el contenido de este fichero .oxlintrc.json:
{
"extends": [".oxlint-typescript.json"],
"rules": {
"no-unused-vars": "warn"
}
}
Este fichero sólo tiene una regla que afecta a Javascript nativo. Sin embargo, está extendiendo de la configuración indicada en el fichero .oxlint-typescript.json, que es un fichero externo donde definiremos las reglas de Typescript. De esta forma, podemos extender y activar/desactivar fácilmente configuraciones. El contenido del fichero .oxlint-typescript.json:
{
"plugins": ["typescript"],
"rules": {
"typescript/no-explicit-any": "error"
}
}
Observa que en este caso, usamos el plugin typescript y configuramos las reglas para este plugin, que se prefijan con typescript/. Aquí puedes encontrar los plugins soportados por OxLint en este momento.
Probando oxlint desde terminal
Aunque con la instalación de la extensión anterior, ya deberíamos poder utilizar OxLint. Una buena forma de probar las configuraciones o simplemente probar el linter, es utilizar la consola o terminal.
Vamos a usar el comando oxlint para comprobar como se ve en un fichero .js que simplemente tiene la linea var hello = "Hola!";:
$ npx oxlint index.js
⚠ eslint(no-unused-vars): Variable 'hello' is declared but never used. Unused
variables should start with a '_'.
╭─[index.js:1:5]
1 │ var hello = "Hola!";
· ──┬──
· ╰── 'hello' is declared here
╰────
help: Consider removing this declaration.
Observa que nos indica el error que ha detectado, la regla implicada, e incluso algo de ayuda para resolver el error.
Ahora, creamos un fichero .oxlintrc.json con el siguiente contenido:
{
"rules": {
"no-unused-vars": "off",
"eslint/no-var": "error"
}
}
En este caso, hemos deshabilitado la regla no-unused-vars para que no la revise, y hemos habilitado la regla no-var del plugin eslint (activado por defecto) para que la muestre como un error. Ahora, en una nueva comprobación de oxlint debería mostrarnos sólo la última regla, que te prohibe usar var a favor de let o const.
Excepciones o ignorar linter
En ciertos casos nos puede interesar desactivar el linter en una linea, fichero, o con una regla concreta. Para ello, podemos añadir comentarios de código con esta misión:
/* oxlint-disable */
// Desactiva oxlint en todo el fichero
/* oxlint-disable no-unused-vars */
// Desactiva la regla `no-unused-vars` en este fichero
/* oxlint-disable no-unused-vars, no-console */
// Desactiva varias reglas en este fichero
/* oxlint-disable-next-line no-console */
// Desactiva la regla `no-console` en la siguiente linea
/* oxlint-disable-next-line */
// Desactiva el linter en la siguiente linea
// oxlint-disable-line
// Desactiva el linter en la linea actual
Recuerda usar esto sólo en casos muy puntuales, donde evitar el linter está justificado, y no sólo lo ignoras por evitar el linter. Lo ideal siempre es respetar los consejos y recomendaciones del linter.
