Naučte se používat editor kódu pro JavaScript.

V tomto krátkém úvodu do editoru kódu v sadě Visual Studio se podíváme na některé způsoby, jak Visual Studio usnadňuje psaní, navigaci a pochopení kódu.

Tip

Pokud jste visual Studio ještě nenainstalovali, přejděte na stránku pro stažení sady Visual Studio a nainstalujte ji zdarma. Další informace o získání jazykové služby pro TypeScript naleznete v tématu Podpora TypeScriptu.

Tento článek předpokládá, že už máte zkušenosti s vývojem v JavaScriptu. Pokud ne, doporučujeme nejprve se podívat na kurz, jako je vytvoření node.js a expresní aplikace .

Přidání nového souboru projektu

Pomocí integrovaného vývojového prostředí (IDE) můžete do projektu přidat nové soubory.

1. Když máte projekt otevřený v sadě Visual Studio, klikněte pravým tlačítkem na složku nebo uzel projektu v Průzkumník řešení (pravé podokno) a zvolte Přidat>novou položku.

   Pokud nevidíte všechny šablony položek, zvolte Zobrazit všechny šablony a pak zvolte šablonu položky.

2. V dialogovém okně Nový soubor v kategorii Obecné zvolte typ souboru, který chcete přidat, například JavaScript File, a pak zvolte Otevřít.

   Nový soubor se přidá do projektu a otevře se v editoru.

Použití IntelliSense k dokončení slov

IntelliSense je neocenitelným prostředkem při psaní kódu. Může zobrazit informace o dostupných členech typu nebo podrobnostech parametrů pro různá přetížení metody. Když zadáte Router()následující kód, uvidíte typy argumentů, které můžete předat. To se označuje jako nápověda k podpisu.

IntelliSense můžete také použít k dokončení slova po zadání dostatečného počtu znaků k jeho nejednoznačnosti. Pokud umístíte kurzor za data řetězec do následujícího kódu a zadáte getho, IntelliSense vám ukáže funkce definované dříve v kódu nebo definované v knihovně třetí strany, kterou jste přidali do projektu.

IntelliSense také může zobrazit informace o typech, když najedete myší na programovací prvky.

K poskytování informací IntelliSense může jazyková služba používat soubory TypeScript d.ts a komentáře JSDoc. U nejběžnějších knihoven JavaScriptu se soubory d.ts získávají automaticky. Další podrobnosti o tom, jak se získávají informace IntelliSense, najdete v tématu JavaScript IntelliSense.

Kontrola syntaxe

Jazyková služba používá ESLint k zajištění kontroly syntaxe a lintování. Pokud potřebujete nastavit možnosti pro kontrolu syntaxe v editoru, vyberte Tools>Options>JavaScript/TypeScript>Linting. Linting options ukazuje vás na globální konfigurační soubor ESLint.

V následujícím kódu se ve výrazu zobrazí zelené zvýraznění syntaxe (zelené vlnovky). Najeďte myší na zvýraznění syntaxe.

Poslední řádek této zprávy vám řekne, že služba jazyka očekávala čárku (,). Zelená vlnovka označuje upozornění. Červené vlnovky označují chybu.

V dolním podokně můžete kliknutím na kartu Seznam chyb zobrazit upozornění a popis spolu s názvem souboru a číslem řádku.

Tento kód můžete opravit přidáním čárky (,) před "data".

Další informace o lintingu najdete v tématu Linting.

Zakomentování kódu

Panel nástrojů, což je řádek tlačítek pod řádkem nabídek v sadě Visual Studio, vám může pomoct zvýšit produktivitu při psaní kódu. Můžete například přepnout režim dokončování IntelliSense (IntelliSense je pomoc s kódováním, která zobrazuje seznam odpovídajících metod mimo jiné), zvýšit nebo zmenšit odsazení řádku nebo okomentovat kód, který nechcete kompilovat. V této části zakomentujeme nějaký kód.

Vyberte jeden nebo více řádků kódu v editoru a pak zvolte tlačítko Okomentovat vybrané řádky na panelu nástrojů. Pokud chcete používat klávesnici, stiskněte Ctrl+K, Ctrl+C.

Znaky // komentáře JavaScriptu se přidají na začátek každého vybraného řádku, který zakomentuje kód.

Sbalení bloků kódu

Pokud potřebujete přehled o některých oblastech kódu, můžete ho sbalit. Zvolte malé šedé pole se znaménkem mínus uvnitř na okraji prvního řádku funkce. Nebo pokud jste uživatel klávesnice, umístěte kurzor kamkoli do kódu konstruktoru a stiskněte Ctrl+M, Ctrl+M.

Blok kódu se sbalí jenom na první řádek následovaný třemi tečkami (...). Pokud chcete blok kódu znovu rozbalit, klikněte na stejné šedé pole, které teď obsahuje znaménko plus, nebo stiskněte znovu Ctrl+M, Ctrl+M. Tato funkce se nazývá Osnova a je užitečná hlavně v případě, že sbalujete dlouhé funkce nebo celé třídy.

Zobrazení definic

Editor sady Visual Studio usnadňuje kontrolu definice typu, funkce atd. Jedním ze způsobů je přejít k souboru, který obsahuje definici, například tak, že zvolíte Přejít k definici kdekoli, kde se na programovací prvek odkazuje. Ještě rychlejší způsob, jak přesunout fokus mimo soubor, ve kterém pracujete, je použít funkci Náhled definice. Podívejme se na definici render metody v následujícím příkladu.

Klikněte pravým tlačítkem myši render a v nabídce obsahu zvolte Náhled definice . Nebo stiskněte klávesu Alt+F12.

Zobrazí se automaticky otevírané okno s definicí render metody. Můžete se posouvat v automaticky otevíraných oknech nebo si dokonce prohlédnout definici jiného typu z náhledu kódu.

Zavřete okno náhledu definice tak, že v pravém horním rohu automaticky otevíraného okna vyberete malé pole se symbolem "x".

Používání fragmentů kódu

Visual Studio poskytuje užitečné fragmenty kódu, které můžete použít k rychlému a snadnému generování běžně používaných bloků kódu. Fragmenty kódu jsou k dispozici pro různé programovací jazyky, včetně JavaScriptu. Pojďme do souboru kódu přidat smyčku for .

Umístěte kurzor na místo, kam chcete fragment kódu vložit, klikněte pravým tlačítkem myši a zvolte Fragment>kódu vložit.

V editoru se zobrazí pole Vložit fragment kódu . Zvolte Obecné a potom poklikejte na položku v seznamu.

Tím se do kódu přidá for fragment smyčky:

for (var i = 0; i < length; i++) {

}

Dostupné fragmenty kódu pro váš jazyk si můžete prohlédnout tak, že zvolíte Upravit>fragment kódu Pro vložení IntelliSense>a pak zvolíte složku vašeho jazyka.

Související obsah

• Fragmenty kódu
• Navigace v kódu
• Sbalení
• Přejít k definici a Náhled definice
• Refaktoring
• Používání technologie IntelliSense