Saltar al contenido

Reglas personalizadas para ESLint

Reglas personalizadas para ESLint

Konstantin, desarrollador web senior de tecnologiapc, explica cómo hacer que trabajar con uno de los linters más populares sea aún más eficiente.

Es difícil imaginar un proyecto JavaScript moderno sin usar linters (herramientas de verificación automática de código), porque simplifican el trabajo de los desarrolladores: permiten identificar y corregir errores y mantener un estilo de código consistente. ESLint es uno de los linters de JavaScript más populares y se discutirá en este artículo.

Además de las muchas reglas admitidas por ESLint, también es posible escribir sus propias reglas. Esto le permite controlar las cosas específicas del proyecto: cierta forma de manejar los errores, el orden de las importaciones y mucho más. En nuestro caso, comprobando el formato de las claves de traducción.

Tarea

En todo el tiempo desde que comenzamos a usar las traducciones, no ha habido reglas claras para el formato de las claves, por lo que puede encontrar claves demasiado generalizadas en el código, por ejemplo error. Esto se convierte en un problema cuando el proyecto tiene 10 usos de esta clave, pero uno de ellos tiene que cambiar la traducción. En consecuencia, debe realizar cambios en el código, no solo en la traducción.

Para encontrar todos los lugares en el código donde se violó el formato de las claves de traducción, creamos una nueva regla para ESLint. Para simplificar, buscaremos todos los usos de la función tr y verificaremos que el primer parámetro de esta función (que es la clave de traducción) es una cadena que contiene al menos 3 palabras (este parámetro se puede configurar en la configuración de ESLint), separados por un guión bajo.

Configuración

Primero crearemos un complemento con todos los archivos necesarios y configuraremos su uso, luego veremos más de cerca cómo escribir la regla en sí.

1. Agrega el directorio a la raíz del proyecto. eslint-plugin-translation… El nombre del complemento debe comenzar con eslint-plugin-

2. Dentro de este directorio, cree package.json con el siguiente contenido:

{
  "name": "eslint-plugin-translation",
  "version": "1.0.0",
  "main": "index.js"
}

3. Cree un archivo index.js – en él describiremos la lógica de nuestra regla (más sobre esto en la siguiente sección).

4. Agregue el complemento al proyecto. En nuestro caso usamos hilo. En la raíz del proyecto, ejecute:

hilo insertardev archivo: ./eslint-plugin-translation

Xa npm Deberia de funcionar:

npm instalarRE. ./eslintcomplemento de traducción

Como resultado, en el archivo del proyecto package.json debería aparecer una entrada sobre nuestro complemento y el complemento en sí debería aparecer en el directorio node_modules.

5. Agregue el complemento a la configuración de eslint.

a. Agrega complementos.

segundo. Estableciendo una regla. El complemento puede describir varias reglas, cada una de las cuales se puede configurar por separado. Para la configuración, usamos el identificador de la regla en el siguiente formato: /… Nuestra regla tiene parámetros, por lo que usamos una matriz para la configuración. El primer elemento de la matriz, 2, significa que una infracción de la regla provocará un error cuando se seleccione. El segundo elemento de la matriz es un objeto con configuración de reglas. En este caso, indicamos que el número mínimo de palabras en la palabra clave de traducción debe ser 3.

// .eslintrc.js
module.exports = {
  ...
  plugins: ["translation"],
  rules: {
    "translation/check-length": [2, { min: 3 }],
  }
  ...
};

¡La regla está lista!

La regla

La regla en sí se describe en el archivo index.js de nuestro complemento.

// indes.js
module.exports = {
  rules: {
    'check-length': {
      meta: {
        // описание правила, параметров и т.д.
      },
      create(context) {
        return {
          // логика правила
        }
      },
    },
  },
}

reglas – un objeto que contiene reglas. Podemos enumerar algunas reglas relacionadas con la verificación de traducciones. La regla comprobar-longitud incluye tema medio y función crear.

Agregar parámetros

El conjunto completo de parámetros que se pueden describir en el meta se puede encontrar en la documentación de ESlint: https://eslint.org/docs/developer-guide/working-with-rules#rule-basics. Agreguemos una descripción y un parámetro para la cantidad de palabras.

meta: {
        type: 'suggestion',
        docs: {
          description: 'To avoid generic translation keys',
        },
        schema: [
          {
            type: 'object',
            properties: {
              min: {
                type: 'number',
              },
            },
            additionalProperties: false,
          },
        ],
      },
  • tipo: el tipo de regla («problema», «sugerencia» o «diseño»),
  • descripción: este parámetro puede ser utilizado por el IDE para mostrar una pista cuando ocurre un error,
  • esquema: esquema JSON que describe el objeto de parámetro con el que trabaja la regla. Usamos un parámetro numérico – min.

Árbol de sintaxis

Para trabajar, ESLint utiliza el árbol de sintaxis abstracta (AST), también es necesario escribir una regla.

Consideremos un ejemplo de código donde debería funcionar el control:

tr(‘Error’, ‘Error’);

Usamos el sitio https://astexplorer.net/ para crear el AST para este código.

Reglas personalizadas de tecnologiapc para eslintEn la representación AST, la función de traducción es CallExpression, llamada (callee.name) – tr y una matriz de argumentos, cada uno de los cuales tiene un tipo y un valor. Esta información es suficiente para escribir una regla.

create(context) {
        return {
          CallExpression(node) {
            const { callee } = node
            const { arguments } = node
            if (callee.name === 'tr' && arguments[0]?.type === 'Literal') {
              const translationKey = arguments[0].value
              const min = (context.options[0] && context.options[0].min) || 3
              const wordsCount = translationKey.split('_').length
              if (wordsCount < min) {
                context.report(
                  node,
                  `Short translation key "${translationKey}"`
                )
              }
            }
          },
        }
      },

La línea 3 es el tipo de nodo en el árbol de sintaxis, al igual que en AST Explorer.

Línea 6: compruebe que el nombre de la función sea tr y que el primer parámetro sea literal.

Línea 7: obtenga el valor del parámetro.

Línea 8: Obtenga el valor mínimo de la opción del contexto (si no se especifica, use 3)

Línea 10: si el número de palabras en la palabra clave de traducción es menor que min ...

Línea 11 -… reporta el error.

Usando el mecanismo descrito y el AST Explorer, es posible escribir reglas más complejas e interesantes que harán que la revisión del código sea más eficiente.

¡Mejore sus proyectos!

Conexiones:

  1. https://www.webiny.com/blog/create-custom-eslint-rules-in-2-minutes-e3d41cb6a9a0
  2. https://eslint.org/docs/developer-guide/working-with-rules
  3. https://astexplorer.net/
  4. https://blog.maximeheckel.com/posts/how-to-build-first-eslint-rule

Si encuentra un error, seleccione un fragmento de texto y presione Ctrl + Entrar...