JavaScripti lintimise seadistamine Visual Studio koodis

Olen ilmselgelt suur fänn kasutada kodeerimisstandardeid, kui kirjutate serveripoolset koodi (olenemata sellest, kas see on WordPress, PSR2 või mis iganes muu – nii kaua, kui midagi kasutate, on see minu arvates hea).

Kuid mis puudutab kliendipoolse koodi, nimelt JavaScripti selle postituse jaoks, kirjutamist, ei näe me seda nii palju arutatuna, kuigi arvan, et see on sama oluline. Sama kehtib ka CSS-i, Sassi või LESS -i kohta, kuid see on teise postituse sisu.

Viimaste projektide puhul oleme oma projektide jaoks kasutanud Airbnb JavaScripti stiilijuhendit. Olen fänn ja arvan, et see aitab kirjutada puhta ja loetava JavaScripti (näib, nagu oleks selle kirjutanud sama inimene – kodeerimisstandardite lõppeesmärk, eks?).

Selles postituses käsitlen selle Visual Studio Code’is seadistamise protsessi.

JavaScripti linting Visual Studio Code’is

See postitus eeldab, et olete tuttav Node Package Manager seadistamisega oma kohalikus masinas.

Kui te seda ei tee, on mul selles postituses juhend, kuidas seda teha. Otsetee? See on sõna otseses mõttes nii lihtne (kui Homebrew on installitud):

Kui olete selle seadistanud (kas nimetatud postitust kasutades või kui see on juba seadistatud), olete valmis edasi liikuma vajalike tööriistade installimisega, et konfigureerida Visual Studio Code JavaScripti lint.

1 ESLinti installimine

Oletame näiteks, et käivitate projekti Dropboxi projektide kataloogis olevast kataloogist nimega acme. Kui see nii on, siis liikuge selle projekti pistikprogrammide kataloogi. Tõenäoliselt näeb see välja umbes selline:

$ cd ~/Dropbox/Projects/acme/wp-content/plugins/acme-plugin

Selleks peate installima ESLinti ja Airbnb konfiguratsioonifailid. Õnneks on seda väga lihtne teha. Sisestage terminalist lihtsalt järgmine käsk:

$ npm i -S eslint eslint-config-airbnb-base eslint-plugin-import

Eeldan, et ükski ülaltoodud pakettidest pole juba installitud. Kui jah, näiteks eslint, saate selle konkreetse argumendi ülaltoodud realt eemaldada.

Lisaks on oluline mõista, et eslint-plugin-import projekt on oluline JavaScripti moodulite importimise ja eksportimise toe lisamiseks.

2 ESLinti konfiguratsioon

Enne Visual Studio Code konfiguratsiooni seadistamist on vaja veel ühte sammu. Nimelt on tegemist ESLint konfiguratsioonifaili loomisega. Sisestage ülaltoodud kataloogis acme-plugin järgmine käsk:

$ touch .eslintrc.js

See loob tühja faili (või tühja punktifaili, nagu mõned võivad sellele viidata) ja see on koht, kus meie konfiguratsioon viitab Airbnb stiilijuhendile.

Lisage faili lihtsalt järgmised konfiguratsioonikoodi read:

module.exports = {
  "extends": "airbnb-base"
};

Nüüd, kui teil on installitud ESLint, teil on viide Airbnb Styleguide’ile ja teil on viide täiendava süntaksi toetamisele, on aeg seadistada Visual Studio kood.

3 Visual Studio koodi seadistamine

Minu arvates on see kõige lihtsam osa. Avage laienduste paneel teile kõige sobivamal viisil (klõpsates ikoonil või kasutades otseteed) ja seejärel otsige ESLint. Võite näha mitut tulemust, kuid see, mida soovite, näeb välja selline:

Installige see ja laadige Visual Studio kood uuesti. See peaks olema määratud teie vaikeseadetes, mida saate kinnitada, avades seaded ja otsides seda koodiosa:

// Controls whether eslint is enabled for JavaScript files or not.
"eslint.enable": true,

Kui seda pole, saate selle lisada kasutaja sätetesse (ma ei ole vaikesätetega möllamise fänn igaks juhuks, kui peate kunagi puhtalt aluspõhjalt lähtestama).

Kui see on määratletud, on kõik korras ja teie JavaScript peaks projekti kallal töötades olema joonitud.

Teised paketihaldurid?

Eespool olen toonud näite selle kohta, kuidas seda Node’i kaudu teha; kuid seda on võimalik saavutada ka lõnga abil. See on miski, mida kavatsen tulevikus pukseerida, kuid kuna ma käsitlesin Node’i eelmises postituses, tundus loogiline ja kõige lihtsam jälgida seda postitust selle sisuga.

Kui mul on aeg kasutada mõnda teist paketihaldurit, konkreetselt Lõnga, käsitlen ka seda.