11 KiB

Raw Permalink Blame History

Používání editoru kódu

Tato lekce se zabývá základy používání VSCode.dev, webového editoru kódu, který vám umožní upravovat kód a přispívat do projektu bez nutnosti instalace čehokoli na váš počítač.

Cíle učení

V této lekci se naučíte:

Používat editor kódu v projektu
Sledovat změny pomocí verzovacího systému
Přizpůsobit editor pro vývoj

Předpoklady

Než začnete, budete si muset vytvořit účet na GitHub. Přejděte na GitHub a vytvořte si účet, pokud ho ještě nemáte.

Úvod

Editor kódu je nezbytný nástroj pro psaní programů a spolupráci na existujících projektech. Jakmile pochopíte základy editoru a naučíte se využívat jeho funkce, budete je moci aplikovat při psaní kódu.

Začínáme s VSCode.dev

VSCode.dev je editor kódu na webu. Nemusíte nic instalovat, stačí ho otevřít jako jakoukoli jinou webovou stránku. Chcete-li začít, otevřete následující odkaz: https://vscode.dev. Pokud nejste přihlášeni na GitHub, postupujte podle pokynů k přihlášení nebo vytvoření nového účtu a poté se přihlaste.

Po načtení by měl editor vypadat podobně jako na tomto obrázku:

Existují tři hlavní sekce, od levé strany směrem doprava:

Panel aktivit, který obsahuje několik ikon, jako lupa 🔎, ozubené kolečko ⚙️ a další.
Rozšířený panel aktivit, který ve výchozím nastavení zobrazuje Průzkumník, nazývaný postranní panel.
A nakonec oblast kódu napravo.

Klikněte na každou z ikon, abyste zobrazili různé nabídky. Po dokončení klikněte na Průzkumník, abyste se vrátili na výchozí obrazovku.

Když začnete vytvářet nebo upravovat kód, bude se to odehrávat v největší oblasti napravo. Tuto oblast budete také používat k vizualizaci existujícího kódu, což si vyzkoušíte v další části.

Otevření GitHub repozitáře

Prvním krokem je otevření GitHub repozitáře. Existuje několik způsobů, jak repozitář otevřít. V této sekci se podíváme na dva různé způsoby, jak začít pracovat na změnách.

1. Pomocí editoru

Použijte samotný editor k otevření vzdáleného repozitáře. Pokud přejdete na VSCode.dev, uvidíte tlačítko "Open Remote Repository":

Můžete také použít příkazovou paletu. Příkazová paleta je vstupní pole, do kterého můžete zadat libovolné slovo, které je součástí příkazu nebo akce, abyste našli správný příkaz k provedení. Použijte nabídku vlevo nahoře, poté vyberte View a následně Command Palette, nebo použijte klávesovou zkratku: Ctrl-Shift-P (na MacOS Command-Shift-P).

Jakmile se nabídka otevře, napište open remote repository a vyberte první možnost. Zobrazí se seznam repozitářů, kterých jste součástí nebo které jste nedávno otevřeli. Můžete také použít úplnou URL adresu GitHubu k výběru jednoho z nich. Použijte následující URL a vložte ji do pole:

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

✅ Pokud se vše podaří, uvidíte všechny soubory tohoto repozitáře načtené v textovém editoru.

2. Použití URL

Repozitář můžete také načíst přímo pomocí URL. Například úplná URL aktuálního repozitáře je https://github.com/microsoft/Web-Dev-For-Beginners, ale můžete nahradit doménu GitHubu VSCode.dev/github a načíst repozitář přímo. Výsledná URL by byla https://vscode.dev/github/microsoft/Web-Dev-For-Beginners.

Úprava souborů

Jakmile máte repozitář otevřený v prohlížeči/vscode.dev, dalším krokem je provádění aktualizací nebo změn projektu.

1. Vytvoření nového souboru

Soubor můžete vytvořit buď uvnitř existující složky, nebo v kořenovém adresáři/složce. Chcete-li vytvořit nový soubor, otevřete umístění/složku, kam chcete soubor uložit, a vyberte ikonu 'New file ...' na panelu aktivit (vlevo), pojmenujte ho a stiskněte Enter.

2. Úprava a uložení souboru v repozitáři

Používání vscode.dev je užitečné, kdykoli chcete rychle aktualizovat svůj projekt bez nutnosti načítání jakéhokoli softwaru lokálně.

Chcete-li aktualizovat svůj kód, klikněte na ikonu 'Explorer', která se také nachází na panelu aktivit, abyste zobrazili soubory a složky v repozitáři. Vyberte soubor, který chcete otevřít v oblasti kódu, proveďte změny a uložte.

Jakmile dokončíte aktualizaci projektu, vyberte ikonu source control, která obsahuje všechny nové změny, které jste provedli v repozitáři.

Chcete-li zobrazit změny, které jste provedli, vyberte soubor(y) ve složce Changes na rozšířeném panelu aktivit. Tím se otevře 'Working Tree', kde vizuálně uvidíte změny, které jste provedli v souboru. Červená barva označuje odstranění z projektu, zatímco zelená značí přidání.

Pokud jste spokojeni se změnami, které jste provedli, najeďte na složku Changes a klikněte na tlačítko +, abyste změny připravili ke commitu. Připravení znamená přípravu změn k jejich odeslání na GitHub.

Pokud však nejste spokojeni s některými změnami a chcete je zrušit, najeďte na složku Changes a vyberte ikonu undo.

Poté napište commit message (popis změny, kterou jste provedli v projektu), klikněte na ikonu check, abyste změny commitovali a odeslali.

Jakmile dokončíte práci na projektu, vyberte ikonu hamburger menu vlevo nahoře, abyste se vrátili do repozitáře na github.com.

Používání rozšíření

Instalace rozšíření ve VSCode vám umožní přidat nové funkce a možnosti přizpůsobení vývojového prostředí v editoru, což zlepší váš pracovní postup. Tato rozšíření také pomáhají přidat podporu pro různé programovací jazyky a často jsou buď obecná, nebo zaměřená na konkrétní jazyk.

Chcete-li procházet seznam všech dostupných rozšíření, klikněte na ikonu Extensions na panelu aktivit a začněte psát název rozšíření do textového pole označeného 'Search Extensions in Marketplace'. Zobrazí se seznam rozšíření, z nichž každé obsahuje název rozšíření, jméno vydavatele, jednovětný popis, počet stažení a hodnocení hvězdičkami.

Můžete také zobrazit všechna dříve nainstalovaná rozšíření rozbalením složky Installed, populární rozšíření používaná většinou vývojářů ve složce Popular a doporučená rozšíření pro vás buď od uživatelů ve stejném workspace, nebo na základě vašich nedávno otevřených souborů ve složce Recommended.

1. Instalace rozšíření

Chcete-li nainstalovat rozšíření, napište jeho název do vyhledávacího pole a klikněte na něj, abyste zobrazili další informace o rozšíření v oblasti kódu, jakmile se objeví na rozšířeném panelu aktivit.

Můžete buď kliknout na modré tlačítko instalace na rozšířeném panelu aktivit, nebo použít tlačítko instalace, které se objeví v oblasti kódu, jakmile vyberete rozšíření k načtení dalších informací.

2. Přizpůsobení rozšíření

Po instalaci rozšíření možná budete chtít upravit jeho chování a přizpůsobit ho podle svých preferencí. Chcete-li to provést, vyberte ikonu Extensions, a tentokrát se vaše rozšíření objeví ve složce Installed, klikněte na ikonu ozubeného kolečka a přejděte na Extensions Setting.

3. Správa rozšíření

Po instalaci a používání rozšíření nabízí vscode.dev možnosti správy rozšíření podle různých potřeb. Například můžete:

Deaktivovat: (Dočasně deaktivujete rozšíření, když ho již nepotřebujete, ale nechcete ho úplně odinstalovat)

Vyberte nainstalované rozšíření na rozšířeném panelu aktivit > klikněte na ikonu ozubeného kolečka > vyberte 'Disable' nebo 'Disable (Workspace)' NEBO otevřete rozšíření v oblasti kódu a klikněte na modré tlačítko Disable.
Odinstalovat: Vyberte nainstalované rozšíření na rozšířeném panelu aktivit > klikněte na ikonu ozubeného kolečka > vyberte 'Uninstall' NEBO otevřete rozšíření v oblasti kódu a klikněte na modré tlačítko Uninstall.

Zadání

Vytvořte webovou stránku životopisu pomocí vscode.dev

Přehled a samostudium

Přečtěte si více o VSCode.dev a některých jeho dalších funkcích.

Upozornění:
Tento dokument byl přeložen pomocí služby pro automatický překlad Co-op Translator. I když se snažíme o co největší přesnost, mějte prosím na paměti, že automatické překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za závazný zdroj. Pro důležité informace doporučujeme profesionální lidský překlad. Neodpovídáme za žádná nedorozumění nebo nesprávné výklady vyplývající z použití tohoto překladu.

11 KiB Raw Permalink Blame History