Как да запазите конфигурацията на Airbnb ESLint при преминаване към TypeScript

В днешно време изглежда целият Javascript свят бързо преминава към Typescript, но понякога това означава да се правят компромиси.

Почти всеки голям проект на JS вече ще бъде (или трябва да бъде!) С помощта на ESLint, невероятен инструмент, който може да вземе всички видове фини грешки и да приложи правилни конвенции, за да запази кода си чист и поддържан. Подобно на много други, ние използваме приставката, за да наложим стила на ръководството за стил на JavaScript на Airbnb и да го персонализираме допълнително.

Доскоро преминаването към Typescript означаваше да се примиря с това да се откажете или поне да се биете с експериментални парсери, за да опитате да го направите. Традиционната Typescript алтернатива е TSLint, но тя беше доста по-ограничена и сега е оттеглена.

За щастие, това оттегляне идва ръка за ръка с ESLint да поеме и юздите за Typescript, така че сега можем да вземем най-доброто от двата свята.

Как да го настроите

Първо ще трябва да разрешите на ESLint да разбира файловете на Typescript, в допълнение към нормалните файлове с Javascript. Това ще вземе допълнителен анализатор и плъгин.

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

Ако все още нямате конфигурирани Airbnb конфигурация и свързани пакети, ще трябва да ги получите и вие.

npm инсталирайте eslint-config-airbnb eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y --save-dev

След като всичко е инсталирано, актуализирайте вашия .eslintrc файл, за да се възползвате от новите пакети.

{
   "parser": "@ typecript-eslint / parser",
   "плъгини": ["@ typecript-eslint"],
   "extends": ["airbnb"],
}

Работата свършена? Не съвсем, защото ще трябва също да отмените настройките по подразбиране на приставката за импортиране, която използва конфигурацията Airbnb. За съжаление, той все още не поддържа typecript-eslint / parser по подразбиране, но нова версия скоро ще се надява да поправи това.

Засега обаче е необходимо следното допълнително съдържание в .eslintrc, за да се гарантира, че правилно открива файловете на Typescript.

{
    настройки: {
        'import / extensions': [".js", ". jsx", ". ts", ". tsx"],
        'import / parsers': {
          '@ typecript-eslint / parser': [".ts", ". tsx"]
         }
         „импортиране / разделителна способност“: {
             'възел': {
                 'разширения': [".js", ". jsx", ". ts", ". tsx"]
             }
         }
    }
}

VSCode интеграция

Дотук добре. По подразбиране ESLint ще проверява само файлове с разширение .js, макар и странно да няма начин да промените това от .eslintrc.

Така че, ако използвате VSCode и искате да видите тези съобщения за грешка в редактора, има още малко работа. Инсталирайте разширението, след което добавете следното под Предпочитания → Настройки, така че ESLint да работи както във вашите JS, така и в TS файлове.

{
    "eslint.validate": [
        "JavaScript",
        "Javascriptreact",
        {"language": "typecript", "autoFix": true},
        {"language": "typecriptreact", "autoFix": true}
    ]
}

(Различният синтаксис за опциите Typescript е, защото иначе опцията autoFix е деактивирана по подразбиране за Typescript.)

Ако работите от CLI, например в CI система, използвайте флага --ext вместо това, за да предадете разширенията на файловете.

eslint --ext .js, .tsx, .ts

Всичко за правилата

Когато основната настройка е извън пътя, трябва да сте готови. Но има няколко правила, които се нуждаят от специално лечение.

Първо е правилото no-unused-vars, любимо в нормалния ESLint, тъй като е толкова полезно при откриване на вероятни грешки и помия код. Въпреки това може да се обърка с Typescript, тъй като понякога трябва да импортирате модул само за неговите дефиниции, без да го използвате по друг начин.

Освен това се сблъсква с проблемите правилото безполезно-конструктор, което прескача синтаксиса на свойствата на параметрите на Typescript, изискващ празен конструктор.

Поправката и за двете е достатъчно лесна. Просто трябва да деактивирате правилата ESLint и вместо това да използвате еквивалентите на плъгините Typescript.

{
    "правила": {
        "no-unused-vars": "off",
        "@ typecript-eslint / no-unused-vars": "грешка",
        "безполезен конструктор": "изключен",
        "@ typecript-eslint / no-useless-constructor": "грешка"
    }
}

И сте готови! Вече можете да използвате пълния свят на ESLint правилата, плюс допълнителните специфични за Typescript от приставката.