{"id":230449,"date":"2022-11-26T14:37:00","date_gmt":"2022-11-26T11:37:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=230449"},"modified":"2022-11-26T14:37:20","modified_gmt":"2022-11-26T11:37:20","slug":"javascript-lintingin-maeaerittaeminen-visual-studio-codessa","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fi\/javascript-lintingin-maeaerittaeminen-visual-studio-codessa\/","title":{"rendered":"JavaScript-lintingin m\u00e4\u00e4ritt\u00e4minen Visual Studio Codessa"},"content":{"rendered":"\n

Olen selv\u00e4stikin suuri fani k\u00e4ytt\u00e4\u00e4 koodausstandardeja, kun kirjoitat palvelinpuolen koodia (riippumatta siit\u00e4, onko se WordPress, PSR2 tai mik\u00e4 tahansa muu \u2013 niin kauan kuin k\u00e4yt\u00e4t jotain, se on mielest\u00e4ni hyv\u00e4 asia).<\/p>\n

Mutta kun on kyse asiakaspuolen koodin, eli JavaScriptin kirjoittamisesta t\u00e4lle viestille, emme n\u00e4e siit\u00e4 niin paljon keskusteltua, vaikka pid\u00e4n sit\u00e4 yht\u00e4 t\u00e4rke\u00e4n\u00e4. Sama p\u00e4tee CSS:\u00e4\u00e4n, Sassiin<\/a><\/strong> tai LESSiin<\/a><\/strong>, mutta se on sis\u00e4lt\u00f6\u00e4 toiselle viestille.<\/p>\n

Viimeaikaisissa projekteissa olemme k\u00e4ytt\u00e4neet projekteissamme Airbnb JavaScript Style -opasta. Olen fani ja mielest\u00e4ni se auttaa kirjoittamaan puhdasta, luettavaa JavaScripti\u00e4 (n\u00e4ytt\u00e4\u00e4 silt\u00e4, \u200b\u200bett\u00e4 sen olisi kirjoittanut sama henkil\u00f6 \u2013 koodausstandardien perimm\u00e4inen tavoite, eik\u00f6 niin?).<\/p>\n

\"JavaScript-lintingin<\/a><\/p>\n

T\u00e4ss\u00e4 viestiss\u00e4 k\u00e4yn l\u00e4pi sen asennuksen Visual Studio Codessa.<\/a><\/strong><\/p>\n

JavaScript-linting Visual Studio Codessa<\/h2>\n

T\u00e4m\u00e4 viesti olettaa, ett\u00e4 olet perehtynyt Node Package Managerin<\/a><\/strong> m\u00e4\u00e4ritt\u00e4miseen paikallisella koneellasi.<\/p>\n

\"JavaScript-lintingin<\/a><\/p>\n

Jos et ole, minulla on t\u00e4ss\u00e4 viestiss\u00e4<\/a><\/strong> opas sen tekemiseen. Pikakuvake? Se on kirjaimellisesti niin yksinkertaista kuin t\u00e4m\u00e4<\/a><\/strong> (kun Homebrew on asennettu):<\/p>\n

Kun olet m\u00e4\u00e4ritt\u00e4nyt sen (joko k\u00e4ytt\u00e4m\u00e4ll\u00e4 mainittua viesti\u00e4 tai jos se on jo m\u00e4\u00e4ritetty), olet valmis siirtym\u00e4\u00e4n eteenp\u00e4in asentamaan tarvittavat ty\u00f6kalut JavaScript-lintujen m\u00e4\u00e4ritt\u00e4miseksi Visual Studio Codessa.<\/p>\n

1 ESLintin asentaminen<\/h3>\n

Oletetaan esimerkiksi, ett\u00e4 k\u00e4yt\u00e4t projektia hakemistosta nimelt\u00e4 acme Dropboxin Projects-hakemistossasi. Jos n\u00e4in on, siirry kyseisen projektin lis\u00e4osien hakemistoon. Se n\u00e4ytt\u00e4\u00e4 todenn\u00e4k\u00f6isesti t\u00e4lt\u00e4:<\/p>\n

$ cd ~\/Dropbox\/Projects\/acme\/wp-content\/plugins\/acme-plugin<\/code><\/pre>\n
T\u00e4t\u00e4 varten sinun on asennettava ESLint ja Airbnb-m\u00e4\u00e4ritystiedostot. Onneksi sen tekeminen on todella helppoa. Sy\u00f6t\u00e4 terminaalista seuraava komento:<\/p>\n
$ npm i -S eslint eslint-config-airbnb-base eslint-plugin-import<\/code><\/pre>\n
Oletan, ett\u00e4 mit\u00e4\u00e4n yll\u00e4 olevista paketeista ei ole jo asennettu. Jos n\u00e4in on, kuten eslint, voit poistaa kyseisen argumentin yll\u00e4 olevalta rivilt\u00e4.<\/p>\n
Lis\u00e4ksi on t\u00e4rke\u00e4\u00e4 ymm\u00e4rt\u00e4\u00e4, ett\u00e4 eslint-plugin-import-projekti on t\u00e4rke\u00e4 lis\u00e4tt\u00e4ess\u00e4 tukea JavaScript-moduulien tuontiin ja vientiin.<\/p>\n
2 ESLint-kokoonpano<\/h3>\n
Tarvitset viel\u00e4 yhden vaiheen ennen kuin m\u00e4\u00e4rit\u00e4t Visual Studio Coden. Kyse on nimitt\u00e4in ESLint-m\u00e4\u00e4ritystiedoston luomisesta. Sy\u00f6t\u00e4 seuraava komento yll\u00e4 olevan kuvan mukaisesti acme-plugin- hakemistosta:<\/strong><\/p>\n
$ touch .eslintrc.js<\/code><\/pre>\n
T\u00e4m\u00e4 luo tyhj\u00e4n tiedoston (tai tyhj\u00e4n pistetiedoston, kuten jotkut saattavat viitata siihen), ja t\u00e4ss\u00e4 asetuksemme viittaa Airbnb-tyylioppaaseen.<\/p>\n
Lis\u00e4\u00e4 tiedostoon seuraavat m\u00e4\u00e4rityskoodirivit:<\/p>\n
module.exports = {\n\u00a0 \"extends\": \"airbnb-base\"\n};<\/code><\/pre>\n
Nyt kun ESLint on asennettu, sinulla on viittaus Airbnb Styleguideen ja sinulla on viittaus lis\u00e4syntaksin tukemiseen, on aika m\u00e4\u00e4ritt\u00e4\u00e4 Visual Studio Code.<\/p>\n
3 Visual Studio Coden m\u00e4\u00e4ritt\u00e4minen<\/h3>\n
Mielest\u00e4ni t\u00e4m\u00e4 on helpoin osa. Avaa laajennuspaneeli sinulle parhaiten sopivalla tavalla (napsauttamalla kuvaketta tai k\u00e4ytt\u00e4m\u00e4ll\u00e4 pikakuvaketta) ja suorita sitten haku ESLint. Saatat n\u00e4hd\u00e4 useita tuloksia, mutta haluamasi on se, joka n\u00e4ytt\u00e4\u00e4 t\u00e4lt\u00e4:<\/p>\n
\"JavaScript-lintingin<\/a><\/p>\n
Asenna se ja lataa sitten Visual Studio -koodi uudelleen. Se tulee asettaa oletusasetuksissa, jotka voit vahvistaa avaamalla asetukset ja etsim\u00e4ll\u00e4 t\u00e4m\u00e4n koodin:<\/p>\n
\/\/ Controls whether eslint is enabled for JavaScript files or not.\n\"eslint.enable\": true,<\/code><\/pre>\n
Jos sit\u00e4 ei ole, voit lis\u00e4t\u00e4 sen k\u00e4ytt\u00e4j\u00e4asetuksiin (en ole oletusasetusten mukittelun fani silt\u00e4 varalta, ett\u00e4 joudut koskaan nollaamaan puhtaalta pohjalta).<\/p>\n
Kun t\u00e4m\u00e4 on m\u00e4\u00e4ritetty, olet valmis, ja JavaScriptin pit\u00e4isi olla lintutettu ty\u00f6skennelless\u00e4si projektin parissa.<\/p>\n
Muut paketinhoitajat?<\/h2>\n
Yll\u00e4 olen antanut esimerkin kuinka t\u00e4m\u00e4 tehd\u00e4\u00e4n Noden kautta; kuitenkin se on mahdollista saavuttaa my\u00f6s langalla. T\u00e4m\u00e4 on asia, jota aion vet\u00e4\u00e4 jatkossa, mutta koska olen k\u00e4sitellyt Nodea edellisess\u00e4 viestiss\u00e4, vaikutti loogiselta ja helpoimmalta seurata t\u00e4t\u00e4 viesti\u00e4 t\u00e4m\u00e4n sis\u00e4ll\u00f6n avulla.<\/p>\n
\"JavaScript-lintingin<\/a><\/p>\n
Kun minun on aika k\u00e4yd\u00e4 l\u00e4pi eri paketinhallintaohjelmalla, erityisesti Yarnilla, k\u00e4sittelen my\u00f6s sen.<\/p>\n
:  tommcfarlin.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Ohjeet JavaScript-lintujen m\u00e4\u00e4ritt\u00e4miseen Visual Studio Codessa NPM:ll\u00e4 ja tarvittavalla koodilaajennuksella.<\/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":[730,895,843],"tags":[1166],"class_list":["post-230449","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript-5","category-koodi","category-opetusohjelmia","tag-affiai-fi"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/230449","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/comments?post=230449"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/230449\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media\/164308"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media?parent=230449"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/categories?post=230449"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/tags?post=230449"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}