lunes 16 septiembre 2024

Cómo crear un plugin personalizado de ESLint

¿Alguna vez te has frustrado con nombres de funciones confusos o inconsistentes en tu código? En este artículo, vamos a resolver ese problema creando un plugin personalizado de ESLint para mantener el código limpio y legible, asegurando nombres de funciones consistentes.

Entonces, ¿qué es ESLint? Piensa en él como una herramienta útil que revisa tu código en busca de errores y asegura que sigas buenas prácticas de programación. ¿La parte genial? ¡Puedes crear tus propias reglas para adaptarse a tu estilo!

Empecemos:

Nuevo Proyecto: Crea un nuevo proyecto e instala ESLint ejecutando el siguiente comando en tu terminal:

mkdir myplugin
cd myplugin
npm init --y
npx eslint --init

Directorio del Plugin: Luego, crea un directorio llamado eslint-plugin y un archivo llamado index.js dentro de él. Aquí es donde residirán nuestras reglas personalizadas.
Estructura del Plugin: En index.js, configuraremos nuestro plugin. Este archivo tendrá algunas propiedades como meta y rules.
meta: Esto contiene el nombre del plugin y su versión.
rules: Aquí definiremos nuestra regla personalizada para verificar los nombres de funciones.

const plugin = {
  meta: {
    name: "func-prefix-matching",
    version: "0.0.1",
  },
  rules: {}
};

Objeto Rule: Dentro de rules, crearemos nuestra regla. La clave es el ID de la regla y el valor es un objeto con una función create.

const plugin = {
  meta: {
    name: "func-prefix-matching",
    version: "0.0.1",
  },
  rules: {
    prefix: {},
  },
};

Verificando Nombres de Funciones: La función create devuelve un objeto con un método Identifier. En la función Identifier, verificamos si el código es una función de flecha. Luego, nos aseguramos de que los nombres de las funciones comiencen con un prefijo específico, como "on" o "get", etc.

const rulePrefix = ["is", "pre", "on", "post", "get", "set"];

const isValidName = (name) => {
  const isValid = (prefix) => name.indexOf(prefix) === 0;
  return rulePrefix.some(isValid);
};

const plugin = {
  meta: {
    name: "func-prefix-matching",
    version: "0.0.1",
  },
  rules: {
    prefix: {
      create(context) {
        return {
          Identifier: (node) => {
            if (node.parent?.init?.type === "ArrowFunctionExpression") {
              const { name } = node;
              if (!isValidName(name)) {
                context.report(
                  node,
                  `${name} debería empezar con ${rulePrefix.join(", ")}.`
                );
              }
            }
          },
        };
      },
    },
  },
};

Reportando Errores: Si un nombre de función no comienza con el prefijo correcto, usamos context.report() para marcarlo como un error.

context.report(node, `${name} debería empezar con ${rulePrefix.join(", ")}.`);

Configuración de ESLint: Ahora, necesitamos decirle a ESLint que use nuestro plugin. Hacemos esto añadiéndolo al objeto plugins en nuestro archivo de configuración de ESLint.

import prefixMatcher from "./plugin/index.mjs";

export default [
  {
    files: ["src/**/*.js"],
    plugins: { prefixMatcher },
  },
];

Configurando la Regla: Configura la regla en la sección rules con el espacio de nombres que elijas.

import prefixMatcher from "./plugin/index.mjs";

export default [
  {
    files: ["src/**/*.js"],
    plugins: { prefixMatcher },
    rules: {
      "prefixMatcher/prefix": "warn",
    },
  },
];

Probando el Código: Crea algunos ejemplos de código con nombres de funciones correctos e incorrectos en una carpeta llamada src.

const someFunction = () => {
  console.log("Hola Mundo");
};
someFunction();

Ejecutando ESLint: Finalmente, ejecuta npm run lint en tu terminal para ver ESLint en acción.

npm run lint

Si todo está configurado correctamente, ESLint revisará tu código y mostrará mensajes de error para cualquier nombre de función que no siga las reglas.

1:7  warning  someFunction debería empezar con is, pre, on, post, get, set  prefixMatcher/prefix

✖ 1 problema (0 errores, 1 advertencia)

¡Gracias por leer! Espero que este artículo te ayude a crear tu propio plugin de ESLint para asegurar nombres de funciones consistentes en tu código. 👏

Etiquetas:

eslint javascript

Creado por:

Jorge García

Fullstack developer

Cómo crear un plugin personalizado de ESLint

Empecemos:

Valoramos tu privacidad