Búsqueda de sitios web

Configuración personalizada de @typescript-eslint/naming-convention para archivos de estilo de @emotion

Dentro de un sistema de diseño que mantengo, usamos un formato BEM modificado para el nombramiento de los estilos JSS exportados con @emotion/css.

La sintaxis se ve algo así:

Selector_descendant___modifier

ej (código pseudo):

// header.styles.ts
export const Header_container___isFlex = css`
  display: flex;
  flex: 1;
`;

Por supuesto, a @typescript-eslint/naming-convention no le gusta esta sintaxis. Me pregunto, ¿hay alguna manera de crear una regla personalizada para permitir que esta sintaxis se use SÓLO dentro de archivos *.style.ts? O, de no ser así, ¿hay algún tipo de configuración de regla personalizada que podamos agregar a este plugin de eslint para hacer cumplir esta sintaxis?

Respuesta #1

Esta pregunta se puede dividir en dos partes:

  1. ¿Cómo proporcionar dos conjuntos de reglas para diferentes archivos?
  2. ¿Cómo personalizar las reglas @typescript-eslint/naming-convention para soportar mi formato personalizado?

ESLint múltiples conjuntos de reglas:

A partir de eslint v4.1.0, puedes crear configuraciones basadas en patrones glob, doc: https://eslint.org/docs/user-guide/configuring/configuration-files#configuration-based-on-glob-patterns

Ejemplo del enlace anterior:

{
  "rules": {
    "quotes": ["error", "double"]
  },

  "overrides": [
    {
      "files": ["bin/*.js", "lib/*.js"],
      "excludedFiles": "*.test.js",
      "rules": {
        "quotes": ["error", "single"]
      }
    }
  ]
}

Formato personalizado de @typescript-eslint/naming-convention

Puedes encontrar el documento en el comentario de @jsejcksn: https://github.com/typescript-eslint/typescript-eslint/blob/87cfc6ad3e3312d7b6f98a592fb37e69d5d6880a/packages/eslint-plugin/docs/rules/naming-convention.md

Algo así:

{
  '@typescript-eslint/naming-convention': ['error', {
      selector: 'variableLike',
      format: null,
      custom: {
        regex: '^[A-Z]\\w*_\\w+___\\w+$',
        match: true
      }
  }]
}

Solución final:

module.exports = {
  rules: {
    '@typescript-eslint/naming-convention': ['error', {
      selector: 'variableLike',
      leadingUnderscore: 'allow',
      trailingUnderscore: 'allow',
      format: ['camelCase', 'PascalCase', 'UPPER_CASE']
    }],
  },
  overrides: [{
    files: ['**/*.style.ts'],
    rules: {
      '@typescript-eslint/naming-convention': ['error', {
        selector: 'variableLike',
        format: null,
        custom: {
          regex: '^[A-Z]\\w*_\\w+___\\w+$',
          match: true
        }
      }]
    }
  }]
}

Cambia la expresión regular para que se ajuste a tu caso real.

Artículos relacionados