11 KiB
Koodieditorin käyttö
Tässä oppitunnissa käsitellään VSCode.dev-verkkopohjaisen koodieditorin perusteita, jotta voit tehdä muutoksia koodiisi ja osallistua projektiin asentamatta mitään tietokoneellesi.
Oppimistavoitteet
Tässä oppitunnissa opit:
- Käyttämään koodieditoria koodiprojektissa
- Seuraamaan muutoksia versionhallinnan avulla
- Mukauttamaan editoria kehitystyötä varten
Esivaatimukset
Ennen kuin aloitat, sinun tulee luoda tili GitHubissa. Siirry GitHubiin ja luo tili, jos sinulla ei vielä ole sellaista.
Johdanto
Koodieditori on olennainen työkalu ohjelmien kirjoittamiseen ja yhteistyöhön olemassa olevien koodiprojektien parissa. Kun ymmärrät editorin perusteet ja osaat hyödyntää sen ominaisuuksia, voit soveltaa niitä koodin kirjoittamisessa.
Aloittaminen VSCode.devillä
VSCode.dev on verkkopohjainen koodieditori. Sen käyttö ei vaadi mitään asennuksia, aivan kuten minkä tahansa verkkosivun avaaminen. Aloittaaksesi editorin käytön, avaa seuraava linkki: https://vscode.dev. Jos et ole kirjautunut sisään GitHubiin, seuraa ohjeita kirjautuaksesi sisään tai luodaksesi uuden tilin ja kirjaudu sitten sisään.
Kun editori latautuu, sen pitäisi näyttää suunnilleen tältä:
Siinä on kolme pääosaa, vasemmalta oikealle:
- Toimintopalkki, joka sisältää joitakin kuvakkeita, kuten suurennuslasin 🔎, rattaan ⚙️ ja muutamia muita.
- Laajennettu toimintopalkki, joka oletuksena näyttää Explorerin, kutsutaan myös sivupalkiksi.
- Koodialue oikealla.
Klikkaa kutakin kuvaketta nähdäksesi eri valikot. Kun olet valmis, klikkaa Exploreria, jotta palaat alkuun.
Kun alat luoda koodia tai muokata olemassa olevaa koodia, se tapahtuu suurimmassa alueessa oikealla. Käytät tätä aluetta myös olemassa olevan koodin tarkasteluun, mitä teet seuraavaksi.
GitHub-repositorion avaaminen
Ensimmäinen asia, mitä tarvitset, on GitHub-repositorion avaaminen. Repositorion avaamiseen on useita tapoja. Tässä osiossa näet kaksi erilaista tapaa avata repositorio, jotta voit aloittaa muutosten tekemisen.
1. Editorin avulla
Käytä editoria avataksesi etärepositorio. Kun siirryt VSCode.dev-sivustolle, näet "Open Remote Repository" -painikkeen:
Voit myös käyttää komentopalettia. Komentopaletti on syöttökenttä, johon voit kirjoittaa minkä tahansa komennon tai toiminnon löytääksesi oikean komennon suoritettavaksi. Käytä ylävasemman valikkoa, valitse View ja sitten Command Palette, tai käytä seuraavaa pikanäppäintä: Ctrl-Shift-P (MacOS:lla Command-Shift-P).
Kun valikko avautuu, kirjoita open remote repository ja valitse ensimmäinen vaihtoehto. Näet useita repositorioita, joihin kuulut tai joita olet avannut äskettäin. Voit myös käyttää täydellistä GitHub-URL-osoitetta valitaksesi yhden. Käytä seuraavaa URL-osoitetta ja liitä se kenttään:
https://github.com/microsoft/Web-Dev-For-Beginners
✅ Jos onnistut, näet kaikki tämän repositorion tiedostot ladattuina tekstieditoriin.
2. URL-osoitteen avulla
Voit myös käyttää suoraan URL-osoitetta ladataksesi repositorion. Esimerkiksi nykyisen repositorion täydellinen URL-osoite on https://github.com/microsoft/Web-Dev-For-Beginners, mutta voit korvata GitHub-verkkotunnuksen VSCode.dev/github-osoitteella ja ladata repositorion suoraan. Tuloksena oleva URL-osoite olisi https://vscode.dev/github/microsoft/Web-Dev-For-Beginners.
Tiedostojen muokkaaminen
Kun olet avannut repositorion selaimessa/vscode.devissä, seuraava vaihe on tehdä päivityksiä tai muutoksia projektiin.
1. Luo uusi tiedosto
Voit luoda tiedoston joko olemassa olevan kansion sisälle tai juurihakemistoon/kansioon. Luodaksesi uuden tiedoston, avaa sijainti/hakemisto, johon haluat tiedoston tallennettavan, ja valitse 'New file ...' -kuvake toimintopalkista (vasemmalla), anna tiedostolle nimi ja paina Enter.
2. Muokkaa ja tallenna tiedosto repositoriossa
VSCode.dev on hyödyllinen, kun haluat tehdä nopeita päivityksiä projektiisi lataamatta mitään ohjelmistoa paikallisesti. Päivittääksesi koodiasi, klikkaa 'Explorer'-kuvaketta, joka sijaitsee myös toimintopalkissa, nähdäksesi tiedostot ja kansiot repositoriossa. Valitse tiedosto avataksesi sen koodialueella, tee muutokset ja tallenna.
Kun olet valmis päivittämään projektisi, valitse source control -kuvake, joka sisältää kaikki tekemäsi muutokset repositoriossa.
Nähdäksesi tekemäsi muutokset projektiin, valitse tiedosto(t) Changes-kansiosta laajennetussa toimintopalkissa. Tämä avaa 'Working Tree', jossa voit visuaalisesti nähdä tekemäsi muutokset tiedostoon. Punainen osoittaa projektista poistettuja osia, kun taas vihreä merkitsee lisäyksiä.
Jos olet tyytyväinen tekemiisi muutoksiin, vie hiiri Changes-kansion päälle ja klikkaa +-painiketta lisätäksesi muutokset. Muutosten lisääminen tarkoittaa niiden valmistelua GitHubiin sitouttamista varten.
Jos et kuitenkaan ole tyytyväinen joihinkin muutoksiin ja haluat hylätä ne, vie hiiri Changes-kansion päälle ja valitse undo-kuvake.
Kirjoita sitten commit message (Kuvaus tekemästäsi muutoksesta projektiin), klikkaa check icon sitouttaaksesi ja lähettääksesi muutokset.
Kun olet valmis työskentelemään projektisi parissa, valitse vasemman yläkulman hamburger menu icon palataksesi repositorioon github.comissa.
Laajennusten käyttö
Laajennusten asentaminen VSCodeen mahdollistaa uusien ominaisuuksien lisäämisen ja mukautetut kehitysympäristöasetukset editoriisi, mikä parantaa kehitystyönkulkuasi. Nämä laajennukset auttavat myös lisäämään tukea useille ohjelmointikielille ja ovat usein joko yleisiä laajennuksia tai kielikohtaisia laajennuksia.
Selaa kaikkia saatavilla olevia laajennuksia klikkaamalla Extensions icon toimintopalkissa ja aloita kirjoittamalla laajennuksen nimi tekstikenttään, joka on merkitty 'Search Extensions in Marketplace'.
Näet listan laajennuksista, joista jokainen sisältää laajennuksen nimen, julkaisijan nimen, yhden lauseen kuvauksen, latausten määrän ja tähtiluokituksen.
Voit myös tarkastella kaikkia aiemmin asennettuja laajennuksia laajentamalla Installed folder, suosittuja laajennuksia, joita useimmat kehittäjät käyttävät, Popular folder ja sinulle suositeltuja laajennuksia joko saman työtilan käyttäjien tai äskettäin avattujen tiedostojen perusteella recommended folder.
1. Asenna laajennuksia
Asentaaksesi laajennuksen, kirjoita laajennuksen nimi hakukenttään ja klikkaa sitä nähdäksesi lisätietoja laajennuksesta koodialueella, kun se ilmestyy laajennettuun toimintopalkkiin.
Voit joko klikata sinistä asennuspainiketta laajennetussa toimintopalkissa tai käyttää asennuspainiketta, joka ilmestyy koodialueelle, kun valitset laajennuksen ladataksesi lisätietoja.
2. Mukauta laajennuksia
Laajennuksen asentamisen jälkeen saatat haluta muokata sen toimintaa ja mukauttaa sitä mieltymystesi mukaan. Voit tehdä tämän valitsemalla Laajennukset-kuvakkeen, ja tällä kertaa laajennuksesi näkyy Installed folder-kansiossa, klikkaa Gear icon ja siirry Extensions Setting.
3. Hallitse laajennuksia
Laajennuksen asentamisen ja käytön jälkeen vscode.dev tarjoaa vaihtoehtoja laajennuksen hallintaan eri tarpeiden mukaan. Esimerkiksi voit:
-
Poistaa käytöstä: (Voit tilapäisesti poistaa laajennuksen käytöstä, kun et enää tarvitse sitä, mutta et halua poistaa sitä kokonaan)
Valitse asennettu laajennus laajennetussa toimintopalkissa > klikkaa Gear-kuvaketta > valitse 'Disable' tai 'Disable (Workspace)' TAI Avaa laajennus koodialueella ja klikkaa sinistä Disable-painiketta.
-
Poista: Valitse asennettu laajennus laajennetussa toimintopalkissa > klikkaa Gear-kuvaketta > valitse 'Uninstall' TAI Avaa laajennus koodialueella ja klikkaa sinistä Uninstall-painiketta.
Tehtävä
Luo ansioluettelosivusto käyttämällä vscode.dev
Kertaus & Itseopiskelu
Lue lisää VSCode.devistä ja sen muista ominaisuuksista.
Vastuuvapauslauseke:
Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua Co-op Translator. Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäistä asiakirjaa sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.