{"id":230500,"date":"2022-11-27T14:06:00","date_gmt":"2022-11-27T11:06:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=230500"},"modified":"2022-11-09T22:40:36","modified_gmt":"2022-11-09T19:40:36","slug":"koodin-laatu-kielikohtaisesti-visual-studio-codessa","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fi\/koodin-laatu-kielikohtaisesti-visual-studio-codessa\/","title":{"rendered":"Koodin laatu kielikohtaisesti Visual Studio Codessa"},"content":{"rendered":"\n<p>Aiemmissa viesteiss\u00e4 olen puhunut hieman <strong><a href=\"https:\/\/tommcfarlin.com\/tag\/visual-studio-code\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Visual Studio Codesta<\/a><\/strong>, ja vaikka olen kokeillut useita muita editoreja, palaan jatkuvasti t\u00e4h\u00e4n nimenomaiseen IDE:hen.<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-164181-61e75f970c723.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-164181-61e75f970c723.png\" alt=\"Koodin laatu kielikohtaisesti Visual Studio Codessa\" ><\/a><\/p>\n<p>Ajan my\u00f6t\u00e4 se on kypsynyt melkoisesti, jatkaa sit\u00e4 ja mahdollistaa runsaasti mukauttamista erityisesti meille, jotka ty\u00f6skentelev\u00e4t <strong><a href=\"https:\/\/php.net\/manual\/en\/intro-whatis.php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">PHP<\/a><\/strong> :n, <strong><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Sassin<\/a><\/strong>, <strong><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">JavaScriptin<\/a><\/strong> ja yleisemmin <strong><a href=\"https:\/\/wordpress.org\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">WordPressin<\/a><\/strong> parissa .<\/p>\n<p>Jos kuitenkin k\u00e4yt\u00e4t linterej\u00e4, huomaat, ett\u00e4 yksi niist\u00e4 asioista, joista kukin puhuu, on v\u00e4lily\u00f6ntien m\u00e4\u00e4r\u00e4, jonka tulisi olla ennen tietty\u00e4 koodirivi\u00e4.<\/p>\n<p>Joten jos k\u00e4yt\u00e4t <strong><a href=\"https:\/\/code.visualstudio.com\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Visual Studio Codea<\/a><\/strong>, n\u00e4m\u00e4 ovat ne laajennukset ja asetukset, joita suosittelen varmistamaan, ett\u00e4 koodisi vastaa kaikkia k\u00e4ytt\u00e4mi\u00e4si koodinlaatuty\u00f6kaluja.<\/p>\n<h2>Koodin laatu kielikohtaisesti<\/h2>\n<p>Ensinn\u00e4kin laajennukset, jotka suosittelen jokaisen asentamaan \u2013 ainakin jos k\u00e4yt\u00e4t yll\u00e4 olevia kieli\u00e4 \u2013 sis\u00e4lt\u00e4v\u00e4t seuraavat:<\/p>\n<ul>\n<li><a href=\"https:\/\/github.com\/Microsoft\/vscode-eslint\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">ESLint<\/a>. Integroi ESLint VS-koodiin. (Jos olet uusi ESLint-k\u00e4ytt\u00e4j\u00e4, tarkista <strong><a href=\"http:\/\/eslint.org\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">dokumentaatio<\/a><\/strong> .)<\/li>\n<li><a href=\"https:\/\/github.com\/ikappas\/vscode-phpcs\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">PHPCS<\/a>, joka integroi PHP-koodausstandardit (asetettu asetuksissa) IDE:hen.<\/li>\n<li><a href=\"https:\/\/github.com\/jason-pomerleau\/vscode-wordpress-toolbox\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">WordPress Toolbox<\/a> tarjoaa katkelmia jokaisesta WordPress-funktiosta, luokasta ja vakiosta, argumenttityyppivinkkeineen ja lyhyin\u00e4 kuvauksina WordPressin versioon 4.9.4 asti (t\u00e4m\u00e4n viestin ajankohtana).<\/li>\n<\/ul>\n<p>Kun ne on asennettu, voit k\u00e4ynnist\u00e4\u00e4 IDE:n uudelleen tai lis\u00e4t\u00e4 seuraavan koodin asetustiedostoon ennen kuin teet niin. Voit tehd\u00e4 t\u00e4m\u00e4n maailmanlaajuisesti tai projektikohtaisesti. Kumpikin on hyv\u00e4. Olen kommentoinut <strong><a href=\"https:\/\/gist.github.com\/tommcfarlin\/db004aa90822920fe50b7751c5cf3488\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">koodia<\/a><\/strong>, jotta sen seuraaminen olisi mahdollisimman helppoa.<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-164181-61e75f9b3803e.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-164181-61e75f9b3803e.png\" alt=\"Koodin laatu kielikohtaisesti Visual Studio Codessa\" ><\/a><\/p>\n<p>Lis\u00e4\u00e4n sen alle my\u00f6s muutaman huomautuksen.<\/p>\n<pre><code>{\n    \/\/ Tab Spacing per language.\n    \"[php]\": {\n      \"editor.tabSize\": 4,\n      \"editor.autoIndent\": true\n    },\n\n    \"[scss]\": {\n      \"editor.tabSize\": 2,\n      \"editor.autoIndent\": true\n    },\n\n    \"[javascript]\": {\n      \"editor.tabSize\": 2,\n      \"editor.autoIndent\": true\n    },\n\n    \/\/ General Editor Settings\n    \"files.trimTrailingWhitespace\": true,\n    \"php.suggest.basic\": true,\n    \"php.validate.executablePath\": \"\/usr\/local\/bin\/php\",\n    \"php.validate.run\": \"onType\",\n    \"phpcs.enable\": true,\n    \"phpcs.executablePath\": \"\/usr\/local\/bin\/phpcs\",\n    \"phpcs.standard\": \"PSR2\"\n}<\/code><\/pre>\n<p>N\u00e4in se toimii:<\/p>\n<ul>\n<li>Voit m\u00e4\u00e4ritt\u00e4\u00e4 kullekin kielityypille tietyt asetukset, kuten <strong>tabSize<\/strong> ja <strong>automaattisen indentin<\/strong> luomisen luomalla m\u00e4\u00e4ritelm\u00e4n JSON-tiedostoon.<\/li>\n<li>T\u00e4t\u00e4 varten edelt\u00e4\u00e4 m\u00e4\u00e4ritelm\u00e4\u00e4 kielen tiedostop\u00e4\u00e4te tai joissakin tapauksissa (kuten JavaScript) kielen nimi.<\/li>\n<\/ul>\n<p>Tiedoston alareunassa oleva koodi, <strong>Yleiset editorin asetukset<\/strong> ovat lis\u00e4toimintoja, jotka saatat haluta sis\u00e4llytt\u00e4\u00e4. Haluan esimerkiksi leikata kaiken lopputilan, ehdottaa PHP-perusm\u00e4\u00e4ritelmi\u00e4 ja joukko koodausstandardeja, kun ty\u00f6skentelen projektin parissa.<\/p>\n<p>N\u00e4m\u00e4 ovat asioita, jotka eiv\u00e4t yleens\u00e4 kuulu t\u00e4m\u00e4n projektin piiriin (mutta olen keskustellut <strong><a href=\"https:\/\/tommcfarlin.com\/tag\/visual-studio-code\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">muissa viesteiss\u00e4<\/a><\/strong> ). Mutta silti riitt\u00e4\u00e4, jotta p\u00e4\u00e4set alkuun korkeamman tason koodinlaadulla kielikohtaisesti kuin mit\u00e4 on tarjolla.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/tommcfarlin.com\" class=\"external external_icon\">tommcfarlin.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Kuinka p\u00e4\u00e4st\u00e4 alkuun paremmalla koodinlaadulla kielikohtaisesti kuin mit\u00e4 valmiina tarjotaan.<\/p>\n","protected":false},"author":1,"featured_media":164182,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[719,793],"tags":[1166],"class_list":["post-230500","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-kehittaejae","category-visual-studio-code-5","tag-affiai-fi"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/230500","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=230500"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/230500\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media\/164182"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media?parent=230500"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/categories?post=230500"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/tags?post=230500"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}