11 KiB
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 si vytvorte nový účet a prihláste sa.
Po načítaní by mal editor vyzerať podobne ako na tomto obrázku:
Existujú tri hlavné sekcie, odľava doprava:
- Panel aktivít, ktorý obsahuje ikony, ako lupa 🔎, ozubené koleso ⚙️ a niekoľko ďalších.
- Rozšírený panel aktivít, ktorý predvolene zobrazuje Prieskumníka, nazývaného bočný panel.
- 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 na začiatok.
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ým krokom je otvorenie GitHub repozitára. Existuje niekoľko spôsobov, ako otvoriť repozitár. V tejto sekcii si ukážeme 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":
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).
Po otvorení menu napíšte open remote repository a 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 GitHub repozitára. 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ď máte repozitár otvorený v prehliadači/vscode.dev, ďalším krokom je 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.
2. Úprava a uloženie súboru v repozitári
Používanie vscode.dev je užitočné, keď 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.
Keď dokončíte aktualizáciu projektu, vyberte ikonu source control, ktorá obsahuje všetky nové zmeny, ktoré ste vykonali v repozitári.
Na zobrazenie zmien, ktoré ste vykonali v 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á farba označuje vynechanie projektu, zatiaľ čo zelená znamená pridanie.
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á, že zmeny sú pripravené na odoslanie do GitHub.
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 zmeny, 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.
Používanie rozšírení
Inštalácia rozšírení vo VSCode vám umožňuje pridávať nové funkcie a prispôsobené možnosti vývojového prostredia vo vašom editore na zlepšenie pracovného toku. Tieto rozšírenia tiež pomáhajú pridávať podporu pre viaceré 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'. Zobrazí sa zoznam rozšírení, z ktorých každé obsahuje názov rozšírenia, meno vydavateľa, jednovetový popis, počet stiahnutí a hodnotenie hviezdičkami.
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.
1. Inštalácia rozšírení
Na inštaláciu rozšírenia zadajte jeho názov 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štalácie na rozšírenom paneli aktivít, aby ste ho nainštalovali, alebo použiť tlačidlo inštalácie, ktoré sa zobrazí v oblasti kódu, keď vyberiete rozšírenie na načítanie ďalších informácií.
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.
3. Správa rozšírení
Po inštalácii a používaní rozšírenia vám vscode.dev ponúka 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 na automatický preklad Co-op Translator. Aj keď sa snažíme o presnosť, upozorňujeme, že automatické 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 dôležité informácie sa odporúča profesionálny ľudský preklad. Nezodpovedáme za akékoľvek nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.