Hablemos de cómo migrar tslint a eslint en Angular

 ng agregar @angular-eslint/schematics

Resultados de ejecución:

• El archivo .eslintrc.json se genera automáticamente en la raíz y el complemento eslint @angular-eslint se utiliza de forma predeterminada.

 {
  "raíz": verdadero,
  "ignorarPatrones": [
    "proyectos/**/*"
  ],
  "anulaciones": [
    {
      "archivos": [
        "*.ts"
      ],
      "opciones del analizador": {
        "proyecto": [
          "tsconfig.json"
        ],
        "createDefaultProgram": verdadero
      },
      "se extiende": [
        "complemento:@angular-eslint/recomendado",
        "complemento:@angular-eslint/template/process-inline-templates"
      ],
      "normas": {
        "@angular-eslint/selector-directiva": [
          "error",
          {
            "tipo": "atributo",
            "prefijo": "aplicación",
            "estilo": "camelCase"
          }
        ],
        "@angular-eslint/selector-de-componentes": [
          "error",
          {
            "tipo": "elemento",
            "prefijo": "aplicación",
            "estilo": "estuche para kebab"
          }
        ]
      }
    },
    {
      "archivos": [
        "*.html"
      ],
      "se extiende": [
        "complemento:@angular-eslint/plantilla/recomendado"
      ],
      "normas": {}
    }
  ]
}

• La siguiente configuración cli relacionada con eslint se agrega a angular.json. Si genera lib o aplicación a través de la línea de comando ng en el futuro, .eslintrc.json se generará automáticamente en este módulo.

 "cli": {
	    "defaultCollection": "@angular-eslint/schematics"
  }

2. Eliminar o reemplazar archivos o configuraciones relacionados con tslint

• Elimine tslint.json en el directorio o módulo raíz
• Elimine los paquetes de dependencia de desarrollo relacionados con tslint, como tslint o typescript-tslint-plugin etc.
• (Si corresponde) Elimine la configuración relacionada con tslint-plugin en tsconfig.json, como

• Cambie la configuración de tslint (si corresponde) en angular.json a eslint, que es posible que deba modificarse manualmente.

Configuración tslint original:

Configuración de eslint modificada (por ejemplo, configurada para ejecutar lint en el directorio proyectos/lint-test):

3. Si necesita desactivar temporalmente la verificación eslint de algunos códigos o archivos

• Agregue el siguiente comentario encima del código para desactivar temporalmente la verificación de ese código por parte de Eslint

 /* eslint-deshabilitar */
const alguna_un_used_var;

• Puede agregar la regla cuando la verificación de eslint informa un error en el comentario para indicar el motivo por el cual se desactivó temporalmente la verificación. Por ejemplo, en el siguiente código, no desea que eslint desproteja una variable no utilizada y genere un error.

 /* eslint-disable @typescript-eslint/no-unused-vars */
const alguna_un_used_var;

• Si necesita desactivar la verificación eslint de algunos archivos, puede agregar el archivo .eslintignore en la raíz.
• Los patrones que requieren verificación de pelusa se pueden configurar en .eslintrc (este artículo no entrará en detalles, introducción oficial)

4. Compruebe si se puede utilizar.

Ejecutar comando de pelusa

 pelusa

Si se ejecuta correctamente, ¡felicidades por completar la migración!

(Opcional) Otros complementos de eslint compatibles

• eslint-plugin-deprecation: Verificar que el código esté obsoleto
• eslint-plugin-header: verifica si los comentarios del encabezado del archivo siguen ciertas reglas (se pueden usar para versión, verificación de patentes, etc.)
• eslint-plugin-import: Verifique los errores ortográficos o de nombre de la dirección de importación, gramática, etc.
• eslint-plugin-prefer-arrow: Validar usando funciones de flecha
• eslint-plugin-unicorn: Verificar js, sintaxis ts relacionada
• eslint-plugin-jsdoc: Documentación relacionada
• ...

Se puede configurar en .eslintrc.json (documentación oficial)

(Opcional) Configurar el código VS

Instalar el complemento eslint

El código VS corrige automáticamente los problemas relacionados con eslint al guardar

Establecido en .vscode/settings.json

 "editor.codeActionsOnSave": { "source.fixAll.eslint": verdadero}

O busque la configuración al guardar en Archivo->Preferencias->Configuración para encontrar configuraciones relacionadas con eslint.