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.
Web-Dev-For-Beginners/translations/sk/8-code-editor/1-using-a-code-editor
leestott 6267747af2
🌐 Update translations via Co-op Translator
3 weeks ago
..
README.md 🌐 Update translations via Co-op Translator 3 weeks ago
assignment.md 🌐 Update translations via Co-op Translator 3 weeks ago

README.md

Používanie editora kódu

Táto lekcia pokrýva základy používania VSCode.dev, webového editora kódu, aby ste mohli upravovať svoj kód a prispievať do projektu bez nutnosti inštalácie čohokoľvek na vašom počítači.

Ciele učenia

V tejto lekcii sa naučíte:

  • Používať editor kódu v projekte
  • Sledovať zmeny pomocou verzionovacieho systému
  • Prispôsobiť editor pre vývoj

Predpoklady

Predtým, než začnete, budete si musieť vytvoriť účet na GitHub. Prejdite na GitHub a vytvorte si účet, ak ho ešte nemáte.

Úvod

Editor kódu je nevyhnutný nástroj na písanie programov a spoluprácu na existujúcich projektoch. Keď pochopíte základy editora a naučíte sa využívať jeho funkcie, budete ich vedieť aplikovať pri písaní kódu.

Začíname s VSCode.dev

VSCode.dev je editor kódu na webe. Na jeho používanie nemusíte nič inštalovať, stačí ho otvoriť ako akúkoľvek inú webovú stránku. Na začiatok otvorte nasledujúci odkaz: https://vscode.dev. Ak nie ste prihlásení do GitHub, postupujte podľa pokynov na prihlásenie alebo vytvorenie nového účtu a potom sa prihláste.

Po načítaní by mal editor vyzerať podobne ako na tomto obrázku:

Default VSCode.dev

Existujú tri hlavné sekcie, odľava doprava:

  1. Panel aktivít, ktorý obsahuje niekoľko ikon, ako lupa 🔎, ozubené koleso ⚙️ a ďalšie.
  2. Rozšírený panel aktivít, ktorý predvolene zobrazuje Prieskumníka, nazývaný bočný panel.
  3. Nakoniec oblasť kódu napravo.

Kliknite na každú z ikon, aby ste zobrazili rôzne menu. Po dokončení kliknite na Prieskumníka, aby ste sa vrátili tam, kde ste začali.

Keď začnete vytvárať kód alebo upravovať existujúci kód, bude sa to diať v najväčšej oblasti napravo. Túto oblasť budete používať aj na vizualizáciu existujúceho kódu, čo si vyskúšate ďalej.

Otvorenie GitHub repozitára

Prvá vec, ktorú budete potrebovať, je otvoriť GitHub repozitár. Existuje niekoľko spôsobov, ako otvoriť repozitár. V tejto sekcii uvidíte dva rôzne spôsoby, ako môžete otvoriť repozitár a začať pracovať na zmenách.

1. Pomocou editora

Použite samotný editor na otvorenie vzdialeného repozitára. Ak prejdete na VSCode.dev, uvidíte tlačidlo "Open Remote Repository":

Open remote repository

Môžete tiež použiť príkazovú paletu. Príkazová paleta je vstupné pole, kde môžete napísať akékoľvek slovo, ktoré je súčasťou príkazu alebo akcie, aby ste našli správny príkaz na vykonanie. Použite menu v ľavom hornom rohu, potom vyberte View a následne Command Palette, alebo použite nasledujúcu klávesovú skratku: Ctrl-Shift-P (na MacOS Command-Shift-P).

Palette Menu

Keď sa menu otvorí, napíšte open remote repository a potom vyberte prvú možnosť. Zobrazia sa viaceré repozitáre, ktorých ste súčasťou alebo ktoré ste nedávno otvorili. Môžete tiež použiť úplnú URL adresu GitHubu na výber jedného. Použite nasledujúcu URL adresu a vložte ju do poľa:

https://github.com/microsoft/Web-Dev-For-Beginners

Ak ste úspešní, všetky súbory tohto repozitára sa načítajú v textovom editore.

2. Použitím URL adresy

Môžete tiež použiť URL adresu na načítanie repozitára. Napríklad úplná URL adresa aktuálneho repozitára je https://github.com/microsoft/Web-Dev-For-Beginners, ale môžete nahradiť doménu GitHub za VSCode.dev/github a načítať repozitár priamo. Výsledná URL adresa by bola https://vscode.dev/github/microsoft/Web-Dev-For-Beginners.

Úprava súborov

Keď ste otvorili repozitár v prehliadači/vscode.dev, ďalším krokom bude vykonanie aktualizácií alebo zmien v projekte.

1. Vytvorenie nového súboru

Môžete buď vytvoriť súbor v existujúcom priečinku, alebo ho vytvoriť v koreňovom adresári/priečinku. Na vytvorenie nového súboru otvorte umiestnenie/adresár, do ktorého chcete súbor uložiť, a vyberte ikonu 'New file ...' na paneli aktivít (vľavo), zadajte názov a stlačte Enter.

Create a new file

2. Úprava a uloženie súboru v repozitári

Používanie vscode.dev je užitočné, kedykoľvek chcete rýchlo aktualizovať svoj projekt bez nutnosti načítania akéhokoľvek softvéru lokálne.

Na aktualizáciu kódu kliknite na ikonu 'Prieskumník', ktorá sa tiež nachádza na paneli aktivít, aby ste zobrazili súbory a priečinky v repozitári. Vyberte súbor, aby ste ho otvorili v oblasti kódu, vykonajte zmeny a uložte.

Edit a file

Keď dokončíte aktualizáciu projektu, vyberte ikonu source control, ktorá obsahuje všetky nové zmeny, ktoré ste vykonali vo svojom repozitári.

Na zobrazenie zmien, ktoré ste vykonali vo svojom projekte, vyberte súbor(y) v priečinku Changes na rozšírenom paneli aktivít. Tým sa otvorí 'Working Tree', kde vizuálne uvidíte zmeny, ktoré ste vykonali v súbore. Červená označuje vynechanie projektu, zatiaľ čo zelená znamená pridanie.

View changes

Ak ste spokojní so zmenami, ktoré ste vykonali, prejdite na priečinok Changes a kliknite na tlačidlo +, aby ste zmeny pripravili na commit. Príprava znamená pripravenie zmien na ich odoslanie do GitHubu.

Ak však nie ste spokojní s niektorými zmenami a chcete ich zrušiť, prejdite na priečinok Changes a vyberte ikonu undo.

Potom zadajte commit message (popis zmien, ktoré ste vykonali v projekte), kliknite na ikonu check, aby ste commitovali a odoslali zmeny.

Keď skončíte s prácou na projekte, vyberte ikonu hamburger menu v ľavom hornom rohu, aby ste sa vrátili do repozitára na github.com.

Stage & commit changes

Používanie rozšírení

Inštalácia rozšírení vo VSCode vám umožňuje pridávať nové funkcie a možnosti prispôsobenia vývojového prostredia vo vašom editore, aby ste zlepšili svoj pracovný tok. Tieto rozšírenia tiež pomáhajú pridávať podporu pre rôzne programovacie jazyky a často sú buď všeobecné rozšírenia alebo jazykovo orientované rozšírenia.

Na prehliadanie zoznamu všetkých dostupných rozšírení kliknite na ikonu Extensions na paneli aktivít a začnite písať názov rozšírenia do textového poľa označeného 'Search Extensions in Marketplace'. Uvidíte zoznam rozšírení, z ktorých každé obsahuje názov rozšírenia, meno vydavateľa, jedno vetové popis, počet stiahnutí a hviezdičkové hodnotenie.

Extension details

Môžete tiež zobraziť všetky predtým nainštalované rozšírenia rozbalením priečinka Installed, populárne rozšírenia používané väčšinou vývojárov v priečinku Popular a odporúčané rozšírenia pre vás buď od používateľov v rovnakom pracovnom priestore alebo na základe vašich nedávno otvorených súborov v priečinku Recommended.

View extensions

1. Inštalácia rozšírení

Na inštaláciu rozšírenia zadajte názov rozšírenia do vyhľadávacieho poľa a kliknite naň, aby ste zobrazili ďalšie informácie o rozšírení v oblasti kódu, keď sa objaví na rozšírenom paneli aktivít.

Môžete buď kliknúť na modré tlačidlo inštalovať na rozšírenom paneli aktivít, aby ste ho nainštalovali, alebo použiť tlačidlo inštalovať, ktoré sa objaví v oblasti kódu, keď vyberiete rozšírenie na načítanie ďalších informácií.

Install extensions

2. Prispôsobenie rozšírení

Po inštalácii rozšírenia možno budete musieť upraviť jeho správanie a prispôsobiť ho podľa svojich preferencií. Na to vyberte ikonu Extensions, a tentoraz sa vaše rozšírenie objaví v priečinku Installed, kliknite na ikonu ozubeného kolesa a prejdite na Extensions Setting.

Modify extension settings

3. Správa rozšírení

Po inštalácii a používaní rozšírenia ponúka vscode.dev možnosti správy rozšírenia podľa rôznych potrieb. Napríklad môžete:

  • Deaktivovať: (Dočasne deaktivujete rozšírenie, keď ho už nepotrebujete, ale nechcete ho úplne odinštalovať)

    Vyberte nainštalované rozšírenie na rozšírenom paneli aktivít > kliknite na ikonu ozubeného kolesa > vyberte 'Disable' alebo 'Disable (Workspace)' ALEBO Otvorte rozšírenie v oblasti kódu a kliknite na modré tlačidlo Disable.

  • Odinštalovať: Vyberte nainštalované rozšírenie na rozšírenom paneli aktivít > kliknite na ikonu ozubeného kolesa > vyberte 'Uninstall' ALEBO Otvorte rozšírenie v oblasti kódu a kliknite na modré tlačidlo Uninstall.


Zadanie

Vytvorte webovú stránku životopisu pomocou vscode.dev

Prehľad a samostatné štúdium

Prečítajte si viac o VSCode.dev a niektorých jeho ďalších funkciách.


Upozornenie:
Tento dokument bol preložený pomocou služby AI prekladu Co-op Translator. Aj keď sa snažíme o presnosť, prosím, berte na vedomie, že automatizované preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho pôvodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nie sme zodpovední za akékoľvek nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.