Szybki start: eksplorowanie Visual Studio IDE dla języka JavaScript

W tym przewodniku Szybki start poznasz program Visual Studio, zintegrowane środowisko programistyczne (IDE). Ten artykuł zawiera 5–10-minutowe wprowadzenie ułatwiające zapoznanie się z oknami, menu i innymi funkcjami dostępnymi na potrzeby programowania w języku JavaScript.

Jeśli nie masz programu Visual Studio, możesz zainstalować bezpłatną wersję próbną ze strony pobierania programu Visual Studio.

Korzystanie z okna uruchamiania

Pierwszą rzeczą, jaką widzisz po uruchomieniu Visual Studio, jest okno Start. Okno startowe zostało zaprojektowane tak, aby pomóc Ci szybciej „zacząć kodować”. Istnieją opcje klonowania lub wyewidencjonowania kodu, otwierania istniejącego projektu lub rozwiązania, tworzenia nowego projektu lub otwierania folderu z plikami kodu.

Jeśli już pracujesz w Visual Studio, możesz otworzyć okno uruchamiania, wybierając pozycję Plik>Start Window.

 Zrzut ekranu przedstawiający okno uruchamiania, gdy Visual Studio zostanie otwarty.

 Zrzut ekranu przedstawiający okno uruchamiania po otwarciu Visual Studio 2022.

Jeśli dopiero zaczynasz pracę z Visual Studio, lista ostatnich projektów może być pusta.

Jeśli pracujesz z bazami kodu innych niż MSBuild, użyj Otwórz folder aby otworzyć kod w Visual Studio. Aby uzyskać więcej informacji, zobacz Programowanie kodu w programie Visual Studio bez projektów lub rozwiązań. W przeciwnym razie możesz utworzyć nowy projekt lub sklonować projekt od dostawcy źródłowego, takiego jak GitHub lub Azure DevOps.

Jeśli pracujesz z bazami kodu spoza programu MSBuild, użyj opcji Otwórz folder lokalny , aby otworzyć kod w programie Visual Studio. Aby uzyskać więcej informacji, zobacz Programowanie kodu w programie Visual Studio bez projektów lub rozwiązań. W przeciwnym razie możesz utworzyć nowy projekt lub sklonować projekt od dostawcy źródłowego, takiego jak GitHub lub Azure DevOps.

Po uruchomieniu Visual Studio okno uruchamiania zawiera opcję Continue bez kodu. Ta akcja umożliwia otwarcie środowiska deweloperskiego Visual Studio bez żadnego konkretnego projektu lub kodu załadowanego. Możesz użyć tej opcji, aby dołączyć do sesji live share lub dołączyć do procesu debugowania. Możesz również wybrać klawisz Esc , aby zamknąć okno uruchamiania i otworzyć środowisko IDE.

Tworzenie projektu

Aby kontynuować eksplorowanie funkcji Visual Studio, utwórz nowy projekt. Program Visual Studio udostępnia różne rodzaje szablonów projektów, które ułatwiają szybkie rozpoczęcie kodowania.

  1. W oknie startowym wybierz pozycję Utwórz nowy projekt. Okno zostanie odświeżone, aby wyświetlić opcje tworzenia nowego projektu.

  2. W polu Wyszukaj szablony wprowadź javascript lub typescript.

    Wprowadzony tekst filtruje listę typów projektów, aby wyświetlić szablony zawierające ciąg „JavaScript” lub „TypeScript” w nazwie lub w typie języka.

    Screenshot pokazujący, jak używać filtru

    Screenshot pokazujący, jak używać filtru

  3. Wybierz szablon projektu JavaScript Express Application i wybierz pozycję Dalej.

  4. W oknie Konfigurowanie nowego projektu zaakceptuj domyślną nazwę projektu i wybierz pozycję Utwórz.

Visual Studio tworzy projekt i otwiera go w środowisku IDE. Pliki i foldery projektu są widoczne w Eksplorator rozwiązań.

Przeglądanie projektu w Eksplorator rozwiązań

Okienko Eksplorator rozwiązań zwykle otwiera się po prawej stronie Visual Studio IDE. W tym oknie przedstawiono graficzną reprezentację hierarchii plików i folderów w projekcie, rozwiązaniu lub folderze kodu.

 Zrzut ekranu przedstawiający nowy projekt otwarty w Eksplorator rozwiązań w Visual Studio.

Zrzut ekranu przedstawiający nowy projekt otwarty w Eksploratorze rozwiązań w programie Visual Studio 2022.

Możesz przeglądać hierarchię, wyszukiwać określony plik lub folder i wybrać plik, aby go otworzyć.

Otwieranie plików w edytorze kodu

W Eksplorator rozwiązań wybierz plik app.js, aby otworzyć plik w oknie Editor. W edytorze jest wyświetlana zawartość plików i jest to miejsce, w którym większość pracy programistycznej odbywa się w programie Visual Studio.

Ochwyt ekranu przedstawiający plik aplikacji otwarty w edytorze w Visual Studio.

 Zrzut ekranu przedstawiający plik aplikacji otwarty w edytorze w Visual Studio 2022.

Eksplorowanie menu głównych

Pasek menu u góry Visual Studio IDE zapewnia szybki dostęp do grup poleceń rozmieszczonych według kategorii. Na przykład menu Project (Projekt ) zawiera polecenia związane z projektem, w którym pracujesz. W menu Narzędzia możesz dostosować zachowanie programu Visual Studio, wybierając pozycję Opcje lub dodając funkcje do instalacji, wybierając pozycję Pobierz narzędzia i funkcje.

 Zrzut ekranu przedstawiający pasek menu w Visual Studio.

 Zrzut ekranu przedstawiający pasek menu w Visual Studio 2022.

Wybierz pozycję Widok , aby wyświetlić listę poleceń związanych z widokiem, a następnie wybierz pozycję Lista błędów , aby otworzyć okno Lista błędów .

Przejrzyj błędy i ostrzeżenia na liście błędów

Lista błędów zawiera błędy, ostrzeżenia i komunikaty dotyczące bieżącego stanu kodu. Jeśli w pliku występują błędy (takie jak brak nawiasu klamrowego lub średnik) lub w dowolnym miejscu projektu, są one wymienione tutaj.

 Zrzut ekranu listy błędów w Visual Studio.

 Zrzut ekranu listy błędów w Visual Studio 2022.

Sprawdź komunikaty kompilacji w oknie danych wyjściowych

W oknie Dane wyjściowe są wyświetlane komunikaty wyjściowe z kompilowania projektu i od dostawcy kontroli źródła.

Skompiluj nowy projekt, aby móc eksplorować komunikaty kompilacji w oknie Dane wyjściowe . Na pasku menu wybierz pozycję Kompiluj>Kompiluj rozwiązanie.

Okno Dane wyjściowe automatycznie uzyskuje fokus i wyświetla komunikat o pomyślnej kompilacji.

Zrzut ekranu okna „Dane wyjściowe” w Visual Studio pokazujący minimalne dane wyjściowe kompilacji.

 Zrzut ekranu przedstawiający okno Dane wyjściowe w Visual Studio 2022 r. z minimalnymi danymi wyjściowymi kompilacji.

Wyszukiwanie poleceń i funkcji

Pole Wyszukiwania to szybki i łatwy sposób na wykonywanie większości czynności w Visual Studio. Możesz wprowadzić tekst związany z tym, co chcesz zrobić, a wyniki wyszukiwania zawierają listę opcji związanych z tekstem wejściowym.

Załóżmy, że chcesz zwiększyć szczegółowość danych wyjściowych kompilacji, aby zobaczyć więcej szczegółów na temat tego, co robi kompilacja. Możesz skorzystać z tych instrukcji:

  1. Jeśli nie widzisz pola Wyszukaj, użyj skrótu klawiaturowego Ctrl+Q . W polu wyszukiwania wpisz verbosity.
  1. Na liście wyników kliknij dwukrotnie pozycję MSBuild project build output verbosity (projectsAndSolutions.buildAndRun.outputVerbosity).

    Zrzut ekranu przedstawiający sposób używania pola Wyszukiwania w programie Visual Studio.

    Zostanie otwarte okienko Opcje w sekcji Wszystkie ustawienia>Projekty i rozwiązania>Kompilacja i uruchamianie .

  2. Użyj menu rozwijanego i ustaw opcję Szczegółowość danych wyjściowych kompilacji projektu MSBuild na Normalny.

  1. Na liście wyników kliknij dwukrotnie pozycję Zmień poziom szczegółowości danych wyjściowych MSBuild (Projekty i rozwiązania > Kompilowanie i uruchamianie).

    Zrzut ekranu przedstawiający sposób używania pola Wyszukiwania w programie Visual Studio.

    Zostanie otwarte okno dialogowe Opcje w sekcji Projekty i rozwiązania>Kompilacja i uruchamianie .

  2. Użyj listy rozwijanej i ustaw opcję Poziom szczegółowości danych wyjściowych kompilacji projektu MSBuild na Normal, a następnie wybierz OK.

  1. Ponownie skompiluj projekt, klikając prawym przyciskiem myszy projekt w Eksplorator rozwiązań i wybierając pozycję Rebuild w menu kontekstowym.

    Tym razem w oknie Dane wyjściowe są wyświetlane bardziej szczegółowe komunikaty dziennika z procesu kompilacji.

    Zrzut ekranu szczegółowych danych wyjściowych kompilacji w programie Visual Studio.

    Zrzut ekranu przedstawiający szczegółowe dane wyjściowe kompilacji w programie Visual Studio 2022.

Wyślij opinię

Jeśli podczas korzystania z Visual Studio wystąpią jakiekolwiek problemy lub jeśli masz sugestie dotyczące ulepszania produktu, możesz użyć Send Feedback menu w górnej części okna Visual Studio.

Screenshot pokazujący, jak uzyskać dostęp do menu Wyślij opinię w Visual Studio.

Screenshot pokazujący, jak uzyskać dostęp do menu Wyślij opinię w Visual Studio 2022.