Cómo mantener la configuración de Airbnb ESLint al pasar a TypeScript

Hoy en día parece que todo el mundo de Javascript se está moviendo rápidamente a Typecript, pero a veces eso también ha significado hacer compromisos.

Casi todos los proyectos grandes de JS ya estarán (¡o deberían estarlo!) Usando ESLint, una herramienta increíble que puede detectar todo tipo de errores sutiles y aplicar convenciones sensatas para mantener su código limpio y fácil de mantener. Como muchos otros, utilizamos el complemento para aplicar el estilo de la guía de estilo Javascript de Airbnb y personalizarlo aún más.

Hasta hace poco, pasar a Typecript significaba llegar a un acuerdo con renunciar a todo eso, o al menos luchar con analizadores experimentales para intentar que funcione. La alternativa tradicional de Typecript ha sido TSLint, pero era mucho más limitada y ahora está en desuso.

Afortunadamente, esa depreciación viene de la mano con ESLint tomando las riendas de Typecript también, por lo que ahora podemos obtener lo mejor de ambos mundos.

Cómo configurarlo

Primero tendrá que habilitar ESLint para comprender los archivos de Typecript, además de los Javascript normales. Eso requerirá un analizador y un complemento adicionales.

npm install @ typescript-eslint / parser @ typescript-eslint / eslint-plugin --save-dev

Si aún no tiene configurada la configuración de Airbnb y los paquetes relacionados, también deberá obtenerlos.

npm install eslint-config-airbnb eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y --save-dev

Una vez que todo esté instalado, actualice su archivo .eslintrc para aprovechar los nuevos paquetes.

{
   "parser": "@ typescript-eslint / parser",
   "complementos": ["@ typescript-eslint"],
   "extiende": ["airbnb"],
}

¿Trabajo hecho? No del todo, porque también deberá anular la configuración predeterminada del complemento de importación que usa la configuración de Airbnb. Desafortunadamente, todavía no es compatible con el typecript-eslint / parser de forma predeterminada, pero una nueva versión pronto solucionará eso.

Por ahora, sin embargo, se necesita el siguiente extra en .eslintrc para garantizar que detecte correctamente los archivos de Typecript.

{
    configuración: {
        'importación / extensiones': [".js", ". jsx", ". ts", ". tsx"],
        'importación / analizadores': {
          '@ typescript-eslint / parser': [".ts", ". tsx"]
         },
         'importar / resolver': {
             'nodo': {
                 'extensiones': [".js", ". jsx", ". ts", ". tsx"]
             }
         }
    }
}

Integración VSCode

Hasta aquí todo bien. De forma predeterminada, ESLint solo verificará los archivos con una extensión .js y, extrañamente, no hay forma de cambiar esto de .eslintrc.

Entonces, si está usando VSCode y desea ver esos mensajes de error dentro del editor, hay un poco más de trabajo por hacer. Instale la extensión, luego agregue lo siguiente en Preferencias → Configuración para que ESLint se ejecute en sus archivos JS y TS.

{
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {"language": "typecript", "autoFix": true},
        {"language": "typescriptreact", "autoFix": true}
    ]
}

(La sintaxis diferente para las opciones de Typecript se debe a que la opción autoFix está deshabilitada de forma predeterminada para Typecript).

Si está ejecutando desde la CLI, como en un sistema de CI, use la bandera --ext en su lugar para pasar las extensiones de archivo.

Eslint. --ext .js, .tsx, .ts

Todo sobre las reglas.

Con la configuración básica fuera del camino, debe estar en funcionamiento. Pero hay un par de reglas que necesitan un tratamiento especial.

Primero está la regla de no vars no utilizados, un favorito en ESLint normal, ya que es muy útil para detectar posibles errores y códigos descuidados. Sin embargo, puede confundirse con Typecript, ya que a veces necesita importar un módulo solo para sus definiciones de tipo sin usarlo de otra manera.

También hay problemas con la regla del constructor inútil, que se dispara sobre la sintaxis de las propiedades de los parámetros deescriptcript que requieren un constructor vacío.

La solución para ambos es bastante fácil. Solo necesita deshabilitar las reglas de ESLint y usar los equivalentes del complemento de Tipos de letra en su lugar.

{
    "reglas": {
        "no-unused-vars": "off",
        "@ typescript-eslint / no-unused-vars": "error",
        "constructor no inútil": "off",
        "@ typescript-eslint / no-useless-constructor": "error"
    }
}

¡Y tu estas listo! Ahora puede utilizar todo el mundo de las reglas de ESLint, además de las específicas adicionales de Typecript del complemento.