Comment conserver la configuration Airbnb ESLint lors du passage à TypeScript

De nos jours, il semble que tout le monde Javascript passe rapidement à Typescript, mais parfois cela impliquait aussi de faire des compromis.

Presque tous les grands projets JS utiliseront (ou devraient utiliser!) ESLint, un outil formidable capable de détecter toutes sortes d'erreurs subtiles et d'appliquer des conventions saines pour que votre code soit propre et maintenable. Comme beaucoup d’autres, nous utilisons ce plugin pour appliquer le style du guide de style Javascript d’Airbnb et le personnaliser davantage.

Jusque récemment, passer à Typescript impliquait de renoncer à tout cela, ou au moins de se battre avec des analyseurs syntaxiques expérimentaux pour tenter de le faire fonctionner. TSLint était l’alternative traditionnelle avec les types de script, mais elle était beaucoup plus limitée et est maintenant obsolète.

Heureusement, cette dépréciation va de pair avec la prise en main par ESLint des commandes pour Typescript, de sorte que nous pouvons maintenant obtenir le meilleur des deux mondes.

Comment le mettre en place

Vous devez d’abord permettre à ESLint de comprendre les fichiers Typescript, en plus des fichiers Javascript normaux. Cela va prendre un analyseur syntaxique supplémentaire et un plugin.

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

Si la configuration Airbnb et les packages associés ne sont pas déjà configurés, vous devez également les obtenir.

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

Une fois que tout est installé, mettez à jour votre fichier .eslintrc pour tirer parti des nouveaux packages.

{
   "analyseur": "@ typescript-eslint / analyseur",
   "plugins": ["@ typescript-eslint"],
   "étend": ["airbnb"],
}

Travail accompli? Pas tout à fait, car vous devrez également remplacer les paramètres par défaut du plug-in d'importation utilisé par la configuration d'Airbnb. Malheureusement, il ne prend pas encore en charge le type scriptcript-eslint / parser, mais une nouvelle version corrigera bientôt ce problème, espérons-le.

Pour l'instant cependant, l'extrait suivant est nécessaire dans .eslintrc pour s'assurer qu'il détecte correctement les fichiers Typescript.

{
    paramètres: {
        'import / extensions': [".js", ".jsx", ". ts", ". tsx"],
        'import / analyseurs': {
          '@ typescript-eslint / parser': [".ts", ". tsx"]
         },
         'import / resolver': {
             'noeud': {
                 'extensions': [".js", ".jsx", ". ts", ". tsx"]
             }
         }
    }
}

Intégration VSCode

Jusqu'ici tout va bien. Par défaut, ESLint ne vérifiera que les fichiers portant l’extension .js et, curieusement, il n’ya aucun moyen de changer cela à partir de .eslintrc.

Donc, si vous utilisez VSCode et souhaitez voir ces messages d’erreur dans l’éditeur, il vous reste encore un peu de travail à faire. Installez l’extension, puis ajoutez ce qui suit sous Préférences → Paramètres pour que ESLint s’exécute sur vos fichiers JS et TS.

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

(La syntaxe différente pour les options de Typescript est due au fait que l'option de correction automatique est par ailleurs désactivée par défaut pour Typescript.)

Si vous exécutez à partir de la CLI, par exemple dans un système CI, utilisez plutôt l’indicateur --ext pour transmettre les extensions de fichier.

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

Tout sur les règles

Avec la configuration de base en retrait, vous devriez être opérationnel. Mais il y a quelques règles qui nécessitent un traitement spécial.

Tout d’abord, la règle no-inutilisé-vars, un favori de ESLint normal, car elle est très utile pour détecter les erreurs probables et le code bâclé. Cependant, il peut être confondu avec Typescript, car vous devez parfois importer un module uniquement pour ses définitions de type sans l’utiliser autrement.

La règle no-useless-constructor pose également des problèmes, ce qui interrompt la syntaxe des propriétés de paramètre de Typescript nécessitant un constructeur vide.

La solution pour les deux est assez facile. Vous devez simplement désactiver les règles ESLint et utiliser les équivalents du plug-in Typescript.

{
    "règles": {
        "no-inutilisé-vars": "off",
        "@ typescript-eslint / no-used-vars": "erreur",
        "no-useless-constructor": "off",
        "@ typescript-eslint / no-useless-constructor": "erreur"
    }
}

Et tu as fini! Vous pouvez maintenant utiliser le monde complet des règles ESLint, ainsi que celles supplémentaires spécifiques à Typescript du plug-in.