{"id":229851,"date":"2022-11-26T14:56:00","date_gmt":"2022-11-26T11:56:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=229851"},"modified":"2022-11-26T14:57:16","modified_gmt":"2022-11-26T11:57:16","slug":"javascripti-lintimise-seadistamine-visual-studio-koodis","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/et\/javascripti-lintimise-seadistamine-visual-studio-koodis\/","title":{"rendered":"JavaScripti lintimise seadistamine Visual Studio koodis"},"content":{"rendered":"\n

Olen ilmselgelt suur f\u00e4nn kasutada kodeerimisstandardeid, kui kirjutate serveripoolset koodi (olenemata sellest, kas see on WordPress, PSR2 v\u00f5i mis iganes muu \u2013 nii kaua, kui midagi kasutate, on see minu arvates hea).<\/p>\n

Kuid mis puudutab kliendipoolse koodi, nimelt JavaScripti selle postituse jaoks, kirjutamist, ei n\u00e4e me seda nii palju arutatuna, kuigi arvan, et see on sama oluline. Sama kehtib ka CSS-i, Sassi<\/a><\/strong> v\u00f5i LESS<\/a><\/strong> -i kohta, kuid see on teise postituse sisu.<\/p>\n

Viimaste projektide puhul oleme oma projektide jaoks kasutanud Airbnb JavaScripti stiilijuhendit. Olen f\u00e4nn ja arvan, et see aitab kirjutada puhta ja loetava JavaScripti (n\u00e4ib, nagu oleks selle kirjutanud sama inimene \u2013 kodeerimisstandardite l\u00f5ppeesm\u00e4rk, eks?).<\/p>\n

\"JavaScripti<\/a><\/p>\n

Selles postituses k\u00e4sitlen selle Visual Studio Code’is seadistamise protsessi.<\/a><\/strong><\/p>\n

JavaScripti linting Visual Studio Code’is<\/h2>\n

See postitus eeldab, et olete tuttav Node Package Manager<\/a><\/strong> seadistamisega oma kohalikus masinas.<\/p>\n

\"JavaScripti<\/a><\/p>\n

Kui te seda ei tee, on mul selles postituses<\/a><\/strong> juhend, kuidas seda teha. Otsetee? See on s\u00f5na otseses m\u00f5ttes nii lihtne (kui Homebrew on<\/a><\/strong> installitud):<\/p>\n

Kui olete selle seadistanud (kas nimetatud postitust kasutades v\u00f5i kui see on juba seadistatud), olete valmis edasi liikuma vajalike t\u00f6\u00f6riistade installimisega, et konfigureerida Visual Studio Code JavaScripti lint.<\/p>\n

1 ESLinti installimine<\/h3>\n

Oletame n\u00e4iteks, et k\u00e4ivitate projekti Dropboxi projektide kataloogis olevast kataloogist nimega acme. Kui see nii on, siis liikuge selle projekti pistikprogrammide kataloogi. T\u00f5en\u00e4oliselt n\u00e4eb see v\u00e4lja umbes selline:<\/p>\n

$ cd ~\/Dropbox\/Projects\/acme\/wp-content\/plugins\/acme-plugin<\/code><\/pre>\n
Selleks peate installima ESLinti ja Airbnb konfiguratsioonifailid. \u00d5nneks on seda v\u00e4ga lihtne teha. Sisestage terminalist lihtsalt j\u00e4rgmine k\u00e4sk:<\/p>\n
$ npm i -S eslint eslint-config-airbnb-base eslint-plugin-import<\/code><\/pre>\n
Eeldan, et \u00fckski \u00fclaltoodud pakettidest pole juba installitud. Kui jah, n\u00e4iteks eslint, saate selle konkreetse argumendi \u00fclaltoodud realt eemaldada.<\/p>\n
Lisaks on oluline m\u00f5ista, et eslint-plugin-import projekt on oluline JavaScripti moodulite importimise ja eksportimise toe lisamiseks.<\/p>\n
2 ESLinti konfiguratsioon<\/h3>\n
Enne Visual Studio Code konfiguratsiooni seadistamist on vaja veel \u00fchte sammu. Nimelt on tegemist ESLint konfiguratsioonifaili loomisega. Sisestage \u00fclaltoodud kataloogis acme-plugin j\u00e4rgmine k\u00e4sk:<\/strong><\/p>\n
$ touch .eslintrc.js<\/code><\/pre>\n
See loob t\u00fchja faili (v\u00f5i t\u00fchja punktifaili, nagu m\u00f5ned v\u00f5ivad sellele viidata) ja see on koht, kus meie konfiguratsioon viitab Airbnb stiilijuhendile.<\/p>\n
Lisage faili lihtsalt j\u00e4rgmised konfiguratsioonikoodi read:<\/p>\n
module.exports = {\n\u00a0 \"extends\": \"airbnb-base\"\n};<\/code><\/pre>\n
N\u00fc\u00fcd, kui teil on installitud ESLint, teil on viide Airbnb Styleguide’ile ja teil on viide t\u00e4iendava s\u00fcntaksi toetamisele, on aeg seadistada Visual Studio kood.<\/p>\n
3 Visual Studio koodi seadistamine<\/h3>\n
Minu arvates on see k\u00f5ige lihtsam osa. Avage laienduste paneel teile k\u00f5ige sobivamal viisil (kl\u00f5psates ikoonil v\u00f5i kasutades otseteed) ja seej\u00e4rel otsige ESLint. V\u00f5ite n\u00e4ha mitut tulemust, kuid see, mida soovite, n\u00e4eb v\u00e4lja selline:<\/p>\n
\"JavaScripti<\/a><\/p>\n
Installige see ja laadige Visual Studio kood uuesti. See peaks olema m\u00e4\u00e4ratud teie vaikeseadetes, mida saate kinnitada, avades seaded ja otsides seda koodiosa:<\/p>\n
\/\/ Controls whether eslint is enabled for JavaScript files or not.\n\"eslint.enable\": true,<\/code><\/pre>\n
Kui seda pole, saate selle lisada kasutaja s\u00e4tetesse (ma ei ole vaikes\u00e4tetega m\u00f6llamise f\u00e4nn igaks juhuks, kui peate kunagi puhtalt alusp\u00f5hjalt l\u00e4htestama).<\/p>\n
Kui see on m\u00e4\u00e4ratletud, on k\u00f5ik korras ja teie JavaScript peaks projekti kallal t\u00f6\u00f6tades olema joonitud.<\/p>\n
Teised paketihaldurid?<\/h2>\n
Eespool olen toonud n\u00e4ite selle kohta, kuidas seda Node’i kaudu teha; kuid seda on v\u00f5imalik saavutada ka l\u00f5nga abil. See on miski, mida kavatsen tulevikus pukseerida, kuid kuna ma k\u00e4sitlesin Node’i eelmises postituses, tundus loogiline ja k\u00f5ige lihtsam j\u00e4lgida seda postitust selle sisuga.<\/p>\n
\"JavaScripti<\/a><\/p>\n
Kui mul on aeg kasutada m\u00f5nda teist paketihaldurit, konkreetselt L\u00f5nga, k\u00e4sitlen ka seda.<\/p>\n
:  tommcfarlin.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Jalutusk\u00e4ik JavaScripti lintimise seadistamiseks Visual Studio Code’is NPM-i ja vajaliku koodilaiendiga.<\/p>\n","protected":false},"author":1,"featured_media":164308,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[729,894,842],"tags":[1165],"class_list":["post-229851","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript-4","category-kood","category-opetused","tag-affiai-et"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts\/229851","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/comments?post=229851"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts\/229851\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/media\/164308"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/media?parent=229851"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/categories?post=229851"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/tags?post=229851"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}