Kuidas hoida Airbnb ESLinti konfiguratsiooni TypeScripti kolimisel

Tänapäeval näib, et kogu Javascripti maailm liigub kiiresti Typescripti, kuid mõnikord on see tähendanud ka kompromisside tegemist.

Peaaegu iga suur JS-projekt kasutab (või peakski olema!) ESLinti - hämmastavat tööriista, mis suudab korjata igasuguseid peeneid vigu ja rakendada mõistlikke tavasid, et hoida oma kood puhas ja hooldatav. Nagu paljud teised, kasutame pistikprogrammi Airbnbi Javascripti stiilijuhendi stiili jõustamiseks ja selle edasiseks kohandamiseks.

Kuni viimase ajani tähendas Typescripti juurde kolimine leppimist selle kõige loobumisega või vähemalt võitlusega eksperimentaalse parseriga, et proovida see tööle saada. Traditsiooniline Typescripti alternatiiv on olnud TSLint, kuid see oli palju piiratum ja on nüüd vananenud.

Õnneks on amortiseerumine käsikäes sellega, et ka ESLint võtab Typescripti ohjad üle, nii et saaksime nüüd mõlemast maailmast parima.

Kuidas seda üles seada

Esmalt peate lisaks tavalistele Javascripti failidele lubama ka ESLinti, et mõistaks ka Typescripti faile. Selleks läheb vaja täiendavat parserit ja pistikprogrammi.

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

Kui teil pole veel Airbnbi konfiguratsiooni ja sellega seotud pakette seadistatud, peate need hankima ka need.

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

Kui kõik on installitud, värskendage .eslintrc-faili, et uusi pakette kasutada.

{
   "parser": "@ typecript-eslint / parser",
   "pluginad": ["@ typcript-eslint"],
   "laieneb": ["airbnb"],
}

Töö tehtud? Mitte päris, sest peate ka alistama impordi pistikprogrammi vaikesätted, mida Airbnb-i konfiguratsioon kasutab. Kahjuks ei toeta see vaikimisi veel masinakirju-eslint / parser, kuid loodetavasti parandab see peagi uue väljaande.

Praegu on .eslintrcis vaja siiski järgmist ekstra, et tagada Typscripti failide õige tuvastamine.

{
    seaded: {
        'import / laiendid': [".js", ". jsx", ". ts", ". tsx"],
        'import / parserid': {
          '@ typecript-eslint / parser': [".ts", ". tsx"]
         },
         'import / lahendaja': {
             'sõlm': {
                 'laiendid': [".js", ". jsx", ". ts", ". tsx"]
             }
         }
    }
}

VSCode integreerimine

Siiamaani on kõik korras. Vaikimisi kontrollib ESLint ainult .js-laiendiga faile, kuigi ja veidral kombel pole seda .eslintrc-ist muuta.

Nii et kui kasutate VSCode ja soovite neid tõrketeateid redaktoris näha, on vaja veel natuke ära teha. Installige laiend ja lisage seejärel jaotisse Eelistused → Seadistused järgmine teave, nii et ESLint töötab nii teie JS- kui ka TS-failides.

{
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {"keel": "masinakiri", "autoFix": tõsi},
        {"keel": "typcriptreact", "autoFix": true}
    ]
}

(Typescripti suvandite erinev süntaks on sellepärast, et automaatne parandamine on Typescripti korral vaikimisi keelatud.)

Kui kasutate CLI-d, näiteks CI-süsteemis, kasutage faililaiendite edastamiseks lippu --ext.

eslint. - järgmised .js, .tsx, .ts

Kõik reeglite kohta

Kui põhiseadistused pole valmis, peaksite olema valmis ja töökorras. Kuid seal on paar reeglit, mis vajavad erilist käsitlemist.

Esiteks on reegli mittekasutatavate varude kohta tavalises ESLintis lemmik, kuna see on nii kasulik tõenäoliste vigade ja lohaka koodi tuvastamisel. Seda võib segi ajada Typescriptiga, kuna mõnikord tuleb moodul importida ainult selle tüübi määratluste järgi, ilma et seda muidu kasutataks.

Probleemide lahendamine on ka mõttetu konstrukatori reegel, mis tühistab Typescripti parameetrite omaduste süntaksi, nõudes tühja konstruktorit.

Mõlema parandus on piisavalt lihtne. Peate lihtsalt keelata ESLinti reeglid ja kasutama selle asemel pistikprogrammi Typescripti ekvivalente.

{
    "reeglid": {
        "no-unused-vars": "off",
        "@ typecript-eslint / no-unused-vars": "viga",
        "mõttetu konstruktor": "välja lülitatud",
        "@ masinakiri-eslint / kasutu-konstruktor": "viga"
    }
}

Ja oletegi valmis! Nüüd saate kasutada kogu ESLinti reeglite maailma ja lisaks pistikprogrammi täiendavaid Typescripti konkreetseid reegleid.