Sdílet prostřednictvím


Přehled integrovaného vývojového prostředí sady Visual Studio pro JavaScript

V tomto 5-10minutovém úvodu do integrovaného vývojového prostředí (IDE) sady Visual Studio si projdeme některá okna, nabídky a další funkce uživatelského rozhraní.

Pokud jste sadu Visual Studio nenainstalovali, přejděte na stránku pro stažení sady Visual Studio a nainstalujte ji zdarma.

Úvodní okno

První věc, kterou vidíte po spuštění sady Visual Studio, je úvodní okno. Úvodní okno je navržené tak, aby vám pomohlo rychleji se dostat k kódu. Má možnosti zavřít nebo rezervovat kód, otevřít existující projekt nebo řešení, vytvořit nový projekt nebo jednoduše otevřít složku, která obsahuje některé soubory kódu. Pokud úvodní okno není otevřené, otevřete ho kliknutím na Tlačítko Start souboru>.

Snímek obrazovky s úvodním oknem v sadě Visual Studio 2022

Snímek obrazovky s úvodním oknem v sadě Visual Studio 2019

Pokud používáte Visual Studio poprvé, bude seznam posledních projektů prázdný.

Pokud pracujete se základy kódu, které nejsou založené na MSBuildu, otevřete kód v sadě Visual Studio pomocí možnosti Otevřít místní složku . Další informace najdete v tématu Vývoj kódu v sadě Visual Studio bez projektů nebo řešení. Jinak můžete vytvořit nový projekt nebo naklonovat projekt od poskytovatele zdroje, jako je GitHub nebo Azure DevOps.

Možnost Pokračovat bez kódu jednoduše otevře vývojové prostředí sady Visual Studio bez načtení konkrétního projektu nebo kódu. Tuto možnost můžete zvolit, pokud se chcete připojit k relaci Live Share nebo připojit se k procesu za účelem ladění. Můžete také stisknutím klávesy Esc zavřít úvodní okno a otevřít integrované vývojové prostředí.

Vytvoření projektu

Pokud chcete pokračovat ve zkoumání funkcí sady Visual Studio, pojďme vytvořit nový projekt.

  1. V úvodním okně vyberte Vytvořit nový projekt a potom do vyhledávacího pole zadejte javascript nebo typescript , abyste vyfiltrovali seznam typů projektů na ty, které ve svém názvu nebo typu jazyka obsahují "javascript" nebo "typescript".

    Visual Studio poskytuje různé druhy šablon projektů, které vám pomůžou rychle začít psát kód.

    Snímek obrazovky s hledáním šablon projektů v úvodním okně sady Visual Studio

    Snímek obrazovky s hledáním šablon projektů v úvodním okně sady Visual Studio

  1. Zvolte šablonu projektu aplikace Express v JavaScriptu a klikněte na Další.
  1. Zvolte prázdnou šablonu projektu webové aplikace Node.js a klikněte na Další.
  1. V dialogovém okně Konfigurovat nový projekt , které se zobrazí, přijměte výchozí název projektu a zvolte Vytvořit.

    Projekt je vytvořen. V pravém podokně vyberte app.js a otevřete soubor v okně Editor . Editor zobrazuje obsah souborů a je místo, kde většinu kódu provádíte v sadě Visual Studio.

    Snímek obrazovky s editorem v sadě Visual Studio

    Projekt se vytvoří a v okně Editor se otevře soubor s názvem server.js. Editor zobrazuje obsah souborů a je místo, kde většinu kódu provádíte v sadě Visual Studio.

    Snímek obrazovky s editorem v sadě Visual Studio

Průzkumník řešení

Průzkumník řešení, který je obvykle na pravé straně sady Visual Studio, zobrazuje grafickou reprezentaci hierarchie souborů a složek v projektu, řešení nebo složce kódu. Hierarchii můžete procházet a přejít k souboru v Průzkumníku řešení.

Snímek obrazovky Průzkumníka řešení v sadě Visual Studio.

Snímek obrazovky Průzkumníka řešení v sadě Visual Studio.

Nabídková lišta v horní části Visual Studio seskupuje příkazy do kategorií. Například nabídka Project obsahuje příkazy související s projektem, ve kterém pracujete. V nabídce Nástroje můžete přizpůsobit chování sady Visual Studio tím, že vyberete Možnosti, nebo přidat funkce do instalace výběrem možnosti Stáhnout nástroje a funkce.

Snímek obrazovky panelu nabídek v sadě Visual Studio

Snímek obrazovky panelu nabídek v sadě Visual Studio

Otevřeme okno Seznam chyb tak, že zvolíme nabídku Zobrazit a potom Seznam chyb.

Seznam chyb

V seznamu chyb se zobrazí chyby, upozornění a zprávy týkající se aktuálního stavu kódu. Pokud v souboru nebo kdekoli v projektu dojde k nějakým chybám (například chybějící složená závorka nebo středník), zobrazí se tady.

Snímek obrazovky se seznamem chyb v sadě Visual Studio

Snímek obrazovky se seznamem chyb v sadě Visual Studio

Výstupní okno

V okně Výstup se zobrazují výstupní zprávy z sestavení projektu a z poskytovatele správy zdrojového kódu.

Sestavme projekt, abychom uviděli nějaký výstup sestavení. V nabídce Sestavení zvolte Sestavit řešení. Okno Výstup automaticky získá fokus a zobrazí zprávu o úspěšném sestavení.

Snímek obrazovky okna Výstup ve Visual Studio.

Snímek obrazovky okna Výstup ve Visual Studio.

Vyhledávací pole je rychlý a snadný způsob, jak v sadě Visual Studio udělat prakticky cokoli. Můžete zadat nějaký text související s tím, co chcete udělat, a zobrazí se seznam možností, které se týkají textu. Představte si například, že chcete zvýšit úroveň podrobností výstupu sestavení, abyste zobrazili další podrobnosti o tom, co přesně sestavení dělá. Tady je postup, jak to udělat:

  1. Pokud vyhledávací pole nevidíte, otevřete ho stisknutím klávesy Ctrl+Q a do pole zadejte podrobnosti .
  1. Ze zobrazených výsledků dvojklikněte na položku výstupu sestavení projektu MSBuild (projectsAndSolutions.buildAndRun.outputVerbosity).

    Snímek obrazovky znázorňující použití vyhledávacího pole v sadě Visual Studio

    Otevře se podokno Možnosti v části Všechna nastavení>Projekty a řešení>Sestavení a spuštění.

  2. Použijte rozevírací seznam a nastavte výstupní úroveň podrobností sestavení projektu MSBuild na Normální.

  1. Ze zobrazených výsledků poklikejte na položku Změnit úroveň podrobností nástroje MSBuild (projekty a řešení > sestavení a spuštění).

    Snímek obrazovky s vyhledávacím polem v sadě Visual Studio

    Otevře se dialogové okno Možnosti v části Projekty a řešení>sestavení a spuštění .

  1. Ze zobrazených výsledků dvakrát klikněte na Změnit úroveň podrobností nástroje MSBuild (Projekty a řešení > Sestavení a spuštění).

    Snímek obrazovky s vyhledávacím polem v sadě Visual Studio

    Otevře se dialogové okno Možnosti na stránce Možnostisestavení a spuštění>.

  1. Použijte rozevírací seznam a nastavte možnost výstupu sestavení projektu MSBuild na Normální a pak vyberte OK.
  1. Znovu sestavte projekt tak, že v Průzkumníku řešení kliknete pravým tlačítkem myši na projekt a v místní nabídce zvolíte Znovu sestavit .

    Tentokrát se v okně Výstup zobrazí podrobnější protokolování z procesu sestavení.

    Snímek obrazovky s podrobným výstupem sestavení ve Visual Studio

    Snímek obrazovky s podrobným výstupem sestavení ve Visual Studio

Menu Odeslat názor

Pokud při používání sady Visual Studio narazíte na problémy nebo pokud máte návrhy na vylepšení produktu, můžete v horní části okna sady Visual Studio použít nabídku Odeslat názor .

Snímek obrazovky s nabídkou Odeslat názor v sadě Visual Studio

Snímek obrazovky s nabídkou Odeslat názor v sadě Visual Studio

Další kroky

Podívali jsme se na několik funkcí sady Visual Studio, abychom se seznámili s uživatelským rozhraním. Prozkoumat dále:

Viz také