{"id":230413,"date":"2022-11-25T20:43:00","date_gmt":"2022-11-25T17:43:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=230413"},"modified":"2022-11-25T20:52:00","modified_gmt":"2022-11-25T17:52:00","slug":"kaeyttaejaeasetusten-kaeyttaeminen-visual-studio-codessa","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fi\/kaeyttaejaeasetusten-kaeyttaeminen-visual-studio-codessa\/","title":{"rendered":"K\u00e4ytt\u00e4j\u00e4asetusten k\u00e4ytt\u00e4minen Visual Studio Codessa"},"content":{"rendered":"\n<p>Jos et ole lukenut viime viikkojen postausta (ja olet sivuston j\u00e4sen), kehotan sinua tekem\u00e4\u00e4n niin nyt, sill\u00e4 t\u00e4m\u00e4 jatkaa t\u00e4sm\u00e4lleen siit\u00e4 mihin edellinen j\u00e4i.<\/p>\n<p>Lyhyesti sanottuna alamme puhua Visual Studio Coden m\u00e4\u00e4ritt\u00e4misest\u00e4 ammattimaista WordPress-kehityst\u00e4 varten. Tietenkin t\u00e4m\u00e4 her\u00e4tt\u00e4\u00e4 kysymyksen: Mit\u00e4 on ammattimainen WordPress-kehitys?<\/p>\n<p>Jos kysyt kymmenelt\u00e4 eri ihmiselt\u00e4, saat todenn\u00e4k\u00f6isesti 8-10 erilaista vastausta; M\u00e4\u00e4rittelisin sen kuitenkin ammattimaisten ohjelmistokehitysk\u00e4yt\u00e4nt\u00f6jen k\u00e4ytt\u00e4miseksi WordPressin yhteydess\u00e4.<\/p>\n<p>Luonnollisesti, eik\u00f6? Mutta mit\u00e4 t\u00e4m\u00e4 pit\u00e4\u00e4 sis\u00e4ll\u00e4\u00e4n?<\/p>\n<p>P\u00e4\u00e4lt\u00e4ni ajattelen:<\/p>\n<ul>\n<li>K\u00e4ytt\u00e4m\u00e4ll\u00e4 asianmukaisia \u200b\u200briippuvuuden hallintaty\u00f6kaluja, kuten Composer, NPM tai Yarn,<\/li>\n<li>Virheenkorjaus keskeytyskohtien avulla (var_dump ja echo),<\/li>\n<li>Tiet\u00e4en kuinka muotoilla koodi k\u00e4ytt\u00e4m\u00e4ll\u00e4 tietty\u00e4 standardia (PSR siin\u00e4 tapauksessa, ett\u00e4 aion k\u00e4ytt\u00e4\u00e4),<\/li>\n<li>Tiedoston organisaatiorakenne,<\/li>\n<li>K\u00e4ytt\u00e4m\u00e4ll\u00e4 asioita, kuten Sass, JavaScript linting ja niin edelleen kehityksen helpottamiseksi<\/li>\n<\/ul>\n<p>Mutta ennen kuin ryhdyn t\u00e4h\u00e4n kaikkeen, mielest\u00e4ni on t\u00e4rke\u00e4\u00e4 m\u00e4\u00e4ritt\u00e4\u00e4 IDE niin, ett\u00e4 se n\u00e4ytt\u00e4\u00e4 hyv\u00e4lt\u00e4, toimii hyvin haluamallamme tavalla ja ett\u00e4 ymm\u00e4rr\u00e4mme, miten se toimii, jotta voimme muokata sit\u00e4 edelleen tarve syntyy.<\/p>\n<p>Joten t\u00e4m\u00e4np\u00e4iv\u00e4isess\u00e4 viestiss\u00e4 tarkastelemme juuri sit\u00e4: Visual Studio Coden asetusten hallinnan ymm\u00e4rt\u00e4minen ja ehdotettu luettelo kokoonpanovaihtoehdoista, jotka auttavat tekem\u00e4\u00e4n kokemuksestasi mahdollisimman vakaan.<\/p>\n<h2>K\u00e4ytt\u00e4j\u00e4asetukset Visual Studio Codessa<\/h2>\n<p>Ennen kuin aloitat, suosittelen lataamaan <strong><a href=\"https:\/\/github.com\/tonsky\/FiraCode\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Fira Coden<\/a><\/strong> ja asentamaan fontin valitsemaasi k\u00e4ytt\u00f6j\u00e4rjestelm\u00e4\u00e4n. Vaikka on paljon muitakin kirjasimia (kuten <strong><a href=\"https:\/\/github.com\/adobe-fonts\/source-code-pro\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Source Code Pro<\/a><\/strong> ), jotka ovat my\u00f6s mukavia, olen huomannut Fira Coden olevan yksi henkil\u00f6kohtaisista suosikeistani erityisesti ligatuureineen (mutta lis\u00e4\u00e4 siit\u00e4 hetken).<\/p>\n<p>T\u00e4m\u00e4 on se, mit\u00e4 n\u00e4et kuvakaappauksissa t\u00e4m\u00e4n sarjan loppuosan ajan.<\/p>\n<h3>1 Asetusten ymm\u00e4rt\u00e4minen<\/h3>\n<p>Ensinn\u00e4kin huomaa, ett\u00e4 Visual Studio Codessa on oletustiedosto, jota se k\u00e4ytt\u00e4\u00e4 asetuksiin kaikissa projekteissaan. Huomaat t\u00e4m\u00e4n, jos siirryt <strong>Koodi &gt; Asetukset<\/strong> -valikkoon (tai mihin tahansa k\u00e4ytt\u00f6j\u00e4rjestelm\u00e4\u00e4si vastaavaan.<\/p>\n<p>Lyhyesti sanottuna kaikki on asetettu JSON-tiedostoon. T\u00e4ss\u00e4 se on hauskaa: Voit mukauttaa t\u00e4t\u00e4 tiedostoa ohittamalla sen tarjoaman k\u00e4ytt\u00e4j\u00e4asetukset-tiedoston avulla.<\/p>\n<p>Ja kiva asia on, ett\u00e4 vaikka se ohittaa Visual Studion tarjoukset, IDE palaa aina sen mukana toimitettuihin oletusasetuksiin.<\/p>\n<p>T\u00e4ss\u00e4 nimenomaisessa viestiss\u00e4 aion tarkastella yksinkertaisesti editoriasetusten m\u00e4\u00e4ritt\u00e4mist\u00e4. Tulevissa viesteiss\u00e4 aiomme kuitenkin tarkastella ty\u00f6skentely\u00e4 PHP:n, koodausstandardien ja muiden kanssa.<\/p>\n<h3>2 Asetusten m\u00e4\u00e4ritt\u00e4minen<\/h3>\n<p>T\u00e4t\u00e4 viesti\u00e4 varten oletan, ett\u00e4 sinulla on projekti auki. T\u00e4m\u00e4 voi olla uusi projekti tai olemassa oleva projekti. Riippumatta siit\u00e4, mit\u00e4 aion tarjota, on edelleen voimassa.<\/p>\n<p>Toiseksi aion tehd\u00e4 ehdotuksia useimmiten tekem\u00e4ni ty\u00f6n tyypin perusteella. Vaikka suosittelen n\u00e4it\u00e4 asetuksia muille ja vaikka saatammekin tehd\u00e4 pieni\u00e4 muokkauksia (esimerkiksi jotkin linterit eiv\u00e4t halua tilaa l\u00e4pi koko t\u00e4m\u00e4n sarjan IDE:ss\u00e4, n\u00e4m\u00e4 ovat yleisimm\u00e4t asiat, joita k\u00e4ytet\u00e4\u00e4n aloittamiseen).<\/p>\n<p>Kun avaat tiedoston ensimm\u00e4isen kerran, se on tyhj\u00e4. Muista, ett\u00e4 se on kirjoitettava oikealla JSON-kielell\u00e4, muuten se ei toimi (puhumattakaan nyt virheest\u00e4).<\/p>\n<p>T\u00e4ss\u00e4 on esimerkki siit\u00e4, mit\u00e4 minulla on <strong><a href=\"https:\/\/gist.github.com\/tommcfarlin\/830e020f624f881268c32ee041ee9f12#file-00-user-settings-json\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">editorin asetuksissa<\/a><\/strong> :<\/p>\n<pre><code>{\n    \/\/ Editor Settings.\n    \"editor.fontFamily\": \"Fira Code\",\n    \"editor.fontLigatures\": true,\n    \"editor.fontSize\": 13,\n    \"editor.renderWhitespace\": \"all\",\n    \"editor.tabSize\": 4,\n    \"editor.insertSpaces\": true,\n    \"editor.detectIndentation\": false,\n    \"editor.formatOnSave\": false,\n\n    \"files.trimTrailingWhitespace\": true,\n\n    \/\/ ...\n}<\/code><\/pre>\n<p>Jokaisen tulee olla itsest\u00e4\u00e4n selv\u00e4; Huomaa kuitenkin, ett\u00e4 minulla <strong>on<\/strong> editor.fontLigatures asetettu <strong>true<\/strong>, koska k\u00e4yt\u00e4n Fira Codea. T\u00e4m\u00e4 muuttaa tietyt asiat, kuten <strong>=<\/strong> ligatuuriksi.<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-164512-61e766569a4ff.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-164512-61e766569a4ff.png\" alt=\"K\u00e4ytt\u00e4j\u00e4asetusten k\u00e4ytt\u00e4minen Visual Studio Codessa\"><\/a><\/p>\n<p>T\u00e4m\u00e4 tekee koodin kirjoittamisesta paljon miellytt\u00e4v\u00e4mm\u00e4n.<\/p>\n<h3>3 Projektien jakaminen<\/h3>\n<p>Lopuksi yksi hy\u00f6dyllisist\u00e4 asioista on se, ett\u00e4 projektit ovat paikassa, joka voidaan jakaa useiden koneiden kesken. T\u00e4m\u00e4 voidaan tehd\u00e4 Google Driven, Dropboxin tai iCloud Driven kautta.<\/p>\n<p>Joka tapauksessa suosittelen seuraavaa:<\/p>\n<ol>\n<li>Jos haluat s\u00e4ilytt\u00e4\u00e4 projektisi, oleta, ett\u00e4 ne eiv\u00e4t tietenk\u00e4\u00e4n ole arkaluonteisia tiedostojenjakopalvelussa,<\/li>\n<li>Tallenna jokainen ty\u00f6tilatiedosto yhdess\u00e4 projektitiedostojen kanssa mainittuun palveluun.<\/li>\n<\/ol>\n<p>T\u00e4ll\u00e4 tavalla, jos p\u00e4\u00e4t\u00e4t k\u00e4ytt\u00e4\u00e4 useita koneita, sinulla pit\u00e4isi olla l\u00e4hdetiedostot, joita tarvitset ty\u00f6skennell\u00e4ksesi kunkin projektin parissa. Mutta en ota kantaa t\u00e4h\u00e4n. Olen keskustellut t\u00e4st\u00e4 <strong><a href=\"https:\/\/wordpress.mediadoma.com\/fi\/visual-studio-code-asetusten-jakaminen-dropboxissa\/\" title=\"edellisess\u00e4 viestiss\u00e4\">edellisess\u00e4 viestiss\u00e4<\/a><\/strong>, ja prosessi kuulostaa edelleen.<\/p>\n<p>Minusta tuntui yksinkertaisesti, ett\u00e4 sen osoittaminen olisi hyv\u00e4 liike vain silt\u00e4 varalta, ett\u00e4 et ole harkinnut sit\u00e4.<\/p>\n<h2>Tarkastellaan koodausstandardeja<\/h2>\n<p>T\u00e4m\u00e4 postaus ei tietenk\u00e4\u00e4n ole \u00e4\u00e4rimm\u00e4isen tekninen, mutta aiomme aloittaa koodausstandardien toteuttamisen seuraavassa postauksessa, ja se vaatii hieman ty\u00f6t\u00e4 Composerin kanssa sek\u00e4 ty\u00f6skentely\u00e4 k\u00e4ytt\u00e4j\u00e4asetusten kanssa.<\/p>\n<p>Ja varmistaaksemme, ett\u00e4 pystymme siihen, on j\u00e4rkev\u00e4\u00e4 luoda perusta asetusten toiminnan ymm\u00e4rt\u00e4miselle, jotta voimme jatkaa niiden muokkaamista tulevaisuudessa.<\/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>K\u00e4ytt\u00e4j\u00e4asetusten valmistelu Visual Studio Codessa edistyneemp\u00e4\u00e4 m\u00e4\u00e4rityst\u00e4 varten.<\/p>\n","protected":false},"author":1,"featured_media":164513,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[719,895,917,843,1066],"tags":[1166],"class_list":["post-230413","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-kehittaejae","category-koodi","category-muut","category-opetusohjelmia","category-tietokone","tag-affiai-fi"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/230413","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=230413"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/230413\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media\/164513"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media?parent=230413"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/categories?post=230413"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/tags?post=230413"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}