msb-public
/
Web-Dev-For-Beginners
mirror of https://github.com/microsoft/Web-Dev-For-Beginners.git
1
0
Code Issues Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'ee99c69bc7'
${ noResults }
Web-Dev-For-Beginners/translations/fi/8-code-editor/1-using-a-code-editor/README.md

7.5 KiB
Raw Blame History Escape

Koodieditorin käyttö: Hallitse VSCode.dev

Tervetuloa!
Tämä oppitunti vie sinut perusteista edistyneeseen käyttöön VSCode.dev—tehokas, verkkopohjainen koodieditori. Opit muokkaamaan koodia itsevarmasti, hallitsemaan projekteja, seuraamaan muutoksia, asentamaan laajennuksia ja tekemään yhteistyötä kuin ammattilainen—kaikki suoraan selaimesta, ilman asennuksia.

Oppimistavoitteet

Oppitunnin lopussa osaat:

  • Käyttää koodieditoria tehokkaasti missä tahansa projektissa, missä tahansa
  • Seurata työtäsi saumattomasti sisäänrakennetulla versionhallinnalla
  • Personoida ja tehostaa kehitystyötäsi editorin mukautuksilla ja laajennuksilla

Esivaatimukset

Aloittaaksesi, rekisteröidy ilmaiseksi GitHub-tilille, joka mahdollistaa koodivarastojen hallinnan ja maailmanlaajuisen yhteistyön. Jos sinulla ei vielä ole tiliä, luo yksi täällä.

Miksi käyttää verkkopohjaista koodieditoria?

Koodieditori, kuten VSCode.dev, on komentokeskuksesi koodin kirjoittamiseen, muokkaamiseen ja hallintaan. Intuitiivisen käyttöliittymän, lukemattomien ominaisuuksien ja välittömän selaimen kautta tapahtuvan pääsyn ansiosta voit:

  • Muokata projekteja millä tahansa laitteella
  • Välttää asennusten vaivaa
  • Tehdä yhteistyötä ja osallistua välittömästi

Kun olet perehtynyt VSCode.dev:iin, olet valmis tarttumaan koodaushaasteisiin mistä tahansa, milloin tahansa.

Aloittaminen VSCode.dev:in kanssa

Siirry VSCode.dev-sivustolle—ei asennuksia, ei latauksia. Kirjautuminen GitHubilla avaa täyden pääsyn, mukaan lukien asetusten, laajennusten ja varastojen synkronoinnin. Jos sinua pyydetään, yhdistä GitHub-tilisi.

Kun editori latautuu, työtilasi näyttää tältä:

![Oletus VSCode.dev](../images/default-vscode-dev sisältää kolme pääosaa vasemmalta oikealle:

  • Toimintopalkki: Kuvakkeet, kuten 🔎 (Haku), ⚙️ (Asetukset), tiedostot, versionhallinta jne.
  • Sivupalkki: Muuttaa kontekstia valitun toimintopalkin kuvakkeen mukaan (oletuksena Explorer näyttää tiedostot).
  • Editorin/koodin alue: Suurin osa oikealla—paikka, jossa muokkaat ja tarkastelet koodia.

Klikkaa kuvakkeita tutkiaksesi ominaisuuksia, mutta palaa Explorer-osioon pysyäksesi kartalla.

GitHub-varaston avaaminen

Menetelmä 1: Editorista

  1. Siirry VSCode.dev-sivustolle. Klikkaa "Open Remote Repository."

    ![Avaa etävarasto](../../../../8-code-editor/images/open-remote-repository käytä Command Palette-valikkoa (Ctrl-Shift-P tai Cmd-Shift-P Macilla).

    ![Palettivalikko](../images/palette-menu.pngavaa etävarasto.”

    • Valitse vaihtoehto.
    • Liitä GitHub-varastosi URL-osoite (esim. https://github.com/microsoft/Web-Dev-For-Beginners) ja paina Enter.

Jos onnistuu, näet koko projektin ladattuna ja valmiina muokattavaksi!

Menetelmä 2: Välittömästi URL-osoitteen kautta

Muuta mikä tahansa GitHub-varaston URL-osoite avautumaan suoraan VSCode.dev:ssä korvaamalla github.com vscode.dev/github:illa.
Esim.:

  • GitHub: https://github.com/microsoft/Web-Dev-For-Beginners
  • VSCode.dev: https://vscode.dev/github/microsoft/Web-Dev-For-Beginners

Tämä ominaisuus nopeuttaa pääsyä mihin tahansa projektiin.

Tiedostojen muokkaaminen projektissasi

Kun varastosi on avattu, voit:

1. Luoda uuden tiedoston

  • Explorer-sivupalkissa, siirry haluamaasi kansioon tai käytä juurihakemistoa.
  • Klikkaa ‘New file ...’ -kuvaketta.
  • Nimeä tiedostosi, paina Enter, ja tiedostosi ilmestyy välittömästi.

![Luo uusi tiedosto](../images/create-new-file 2. Muokkaa ja tallenna tiedostoja

  • Klikkaa tiedostoa Explorer-osiossa avataksesi sen koodialueella.
  • Tee tarvittavat muutokset.
  • VSCode.dev tallentaa muutokset automaattisesti, mutta voit painaa Ctrl+S tallentaaksesi manuaalisesti.

![Muokkaa tiedostoa](../images/edit-a-file.png. Seuraa & sitoudu muutoksiin versionhallinnalla

VSCode.dev sisältää integroidun Git-versionhallinnan!

  • Klikkaa 'Source Control' -kuvaketta nähdäksesi kaikki tehdyt muutokset.
  • Tiedostot Changes-kansiossa näyttävät lisäykset (vihreä) ja poistot (punainen).
    ![Näytä muutokset](../images/working-tree.png muutokset klikkaamalla + tiedostojen vieressä valmistellaksesi sitoumusta.
  • Hylkää ei-toivotut muutokset klikkaamalla kumoa-kuvaketta.
  • Kirjoita selkeä sitoumusviesti ja klikkaa valintamerkkiä sitoutuaksesi ja lähettääksesi.

Palataksesi varastoosi GitHubissa, valitse hampurilaisvalikko vasemmasta yläkulmasta.

![Valmistele & sitoudu muutoksiin](../images/edit-vscode.dev Laajennusten käyttö

Laajennukset mahdollistavat kielten, teemojen, virheenkorjaajien ja tuottavuustyökalujen lisäämisen VSCode.dev:iin—tehden koodauselämästäsi helpompaa ja hauskempaa.

Laajennusten selaaminen ja hallinta

  • Klikkaa Laajennukset-kuvaketta toimintopalkissa.

  • Etsi laajennusta 'Search Extensions in Marketplace' -laatikossa.

    ![Laajennuksen tiedot](../images/extension-details:

    • Asennetut: Kaikki lisäämäsi laajennukset
    • Suositut: Alan suosikit
    • Suositellut: Työskentelytapasi mukaan räätälöidyt

    ![Näytä laajennukset](

1. Asenna laajennuksia

  • Syötä laajennuksen nimi hakukenttään, klikkaa sitä ja tarkista tiedot editorissa.

  • Paina sinistä Asenna-painiketta sivupalkissa tai pääkoodialueella.

    ![Asenna laajennuksia](../images/install-extension 2. Mukauta laajennuksia

  • Etsi asennettu laajennuksesi.

  • Klikkaa Hammasratas-kuvaketta → valitse Extension Settings hienosäätääksesi asetuksia mielesi mukaan.

    ![Muokkaa laajennusasetuksia](../images/extension-settings 3. Hallitse laajennuksia Voit:

  • Poistaa käytöstä: Sammuttaa laajennuksen väliaikaisesti säilyttäen sen asennettuna

  • Poistaa: Poistaa sen pysyvästi, jos et enää tarvitse sitä

    Etsi laajennus, paina Hammasratas-kuvaketta ja valitse ‘Disable’ tai ‘Uninstall,’ tai käytä sinisiä painikkeita koodialueella.

Tehtävä

Testaa taitosi: Luo ansioluettelosivusto käyttäen vscode.dev:ia

Lisätutkimus ja itseopiskelu

Nyt olet valmis koodaamaan, luomaan ja tekemään yhteistyötä—mistä tahansa, millä tahansa laitteella, käyttäen VSCode.dev:ia!

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äinen asiakirja 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ä.