Udostępnij za pośrednictwem

Dowiedz się, jak używać edytora kodu dla języka JavaScript

  • Artykuł

W tym krótkim wprowadzeniu do edytora kodu w programie Visual Studio przyjrzymy się niektórym sposobom, w jaki program Visual Studio ułatwia pisanie, nawigację i zrozumienie kodu.

Napiwek

Jeśli program Visual Studio nie został jeszcze zainstalowany, przejdź do strony Visual Studio do pobrania, aby ją zainstalować bezpłatnie. Aby uzyskać więcej informacji na temat korzystania z usługi językowej dla TypeScript, zobacz Obsługa TypeScript.

W tym artykule założono, że znasz już programowanie w języku JavaScript. Jeśli tak nie jest, zalecamy zapoznanie się z samouczkiem, takim jak Utwórz Node.js i aplikację Express najpierw.

Dodawanie nowego pliku projektu

Możesz użyć środowiska IDE, aby dodać nowe pliki do projektu.

  1. Po otwarciu projektu w programie Visual Studio kliknij prawym przyciskiem myszy folder lub węzeł projektu w Eksploratorze rozwiązań (okienko po prawej stronie), a następnie wybierz pozycję Dodaj>nowy element.

    Jeśli nie widzisz wszystkich szablonów elementów, wybierz pozycję Pokaż wszystkie szablony, a następnie wybierz szablon elementu.

  2. W oknie dialogowym Nowy plik, w kategorii Ogólne, wybierz typ pliku, który chcesz dodać, na przykład Plik JavaScript, a następnie wybierz pozycję Otwórz.

    Nowy plik zostanie dodany do projektu i zostanie otwarty w edytorze.

Używanie funkcji IntelliSense do uzupełniania wyrazów

Funkcja IntelliSense to nieoceniony zasób podczas kodowania. Może wyświetlać informacje o dostępnych elementach członkowskich typu lub szczegóły parametrów dla różnych przeciążeń metody. W poniższym kodzie podczas wpisywania Router()zobaczysz typy argumentów, które można przekazać. Jest to nazywane pomocą w zakresie sygnatur.

Zrzut ekranu przedstawiający okno programu Visual Studio Code z wprowadzonym kodem JavaScript. Informacje funkcji IntelliSense są wyświetlane dla funkcji Router().

Możesz również użyć funkcji IntelliSense, aby dokończyć słowo po wpisaniu wystarczającej liczby znaków, aby je jednoznacznie określić. Jeśli umieścisz kursor po ciągu data w poniższym kodzie i wpiszesz get, IntelliSense wyświetli funkcje wcześniej zdefiniowane w kodzie lub zdefiniowane w bibliotece zewnętrznej dodanej do projektu.

Zrzut ekranu przedstawiający okno programu Visual Studio Code z wprowadzonym wyrazem

Funkcja IntelliSense może również wyświetlać informacje o typach po umieszczeniu wskaźnika myszy na elementach programowania.

Aby zapewnić informacje o funkcji IntelliSense, usługa językowa może używać plików typeScript d.ts i komentarzy JSDoc. W przypadku najczęściej używanych bibliotek Języka JavaScript pliki d.ts są automatycznie uzyskiwane. Aby uzyskać więcej informacji na temat uzyskiwania informacji IntelliSense, zobacz JavaScript IntelliSense.

Sprawdzanie składni

Usługa językowa używa biblioteki ESLint do sprawdzania składni i lintingu. Jeśli musisz ustawić opcje sprawdzania składni w edytorze, w menu wybierz: Narzędzia , a następnie Opcje>, JavaScript/TypeScript>, a potem Lintowanie>. Opcje lintingu odsyłają do globalnego pliku konfiguracji ESLint.

W poniższym kodzie w wyrażeniu zobaczysz wyróżnianie zielonej składni (zielone zygzaki). Umieść kursor na wyróżnianiu składni.

Wyświetl błąd składni

Ostatni wiersz tego komunikatu informuje, że usługa językowa oczekuje przecinka (,). Zielona falista linia oznacza ostrzeżenie. Czerwone zygzaki wskazują błąd.

W dolnym okienku możesz kliknąć kartę lista błędów, aby wyświetlić ostrzeżenie i opis wraz z nazwą pliku i numerem wiersza.

Wyświetl listę błędów

Ten kod można naprawić, dodając przecinek (,) przed "data".

Aby uzyskać dodatkowe informacje na temat lintingu, zobacz Linting.

Zakomentuj kod

Pasek narzędzi, który jest wierszem przycisków na pasku menu w programie Visual Studio, może pomóc zwiększyć produktywność w miarę programowania. Na przykład można przełączać tryb uzupełniania IntelliSense (IntelliSense jest narzędziem wspomagającym kodowanie wyświetlającym listę pasujących metod i inne), zwiększyć lub zmniejszyć wcięcie wiersza lub zakomentować kod, którego nie chcesz kompilować. W tej sekcji zakomentujemy trochę kodu.

Wybierz co najmniej jeden wiersz kodu w edytorze, a następnie wybierz Komentuj zaznaczone linie przycisk przycisk Komentuj na pasku narzędziowym. Jeśli wolisz używać klawiatury, naciśnij Ctrl+K, Ctrl+C.

Znaki komentarza w języku JavaScript // są dodawane na początku każdego zaznaczonego wiersza w celu komentarza do kodu.

Zwiń bloki kodu

Jeśli potrzebujesz uporządkować widok niektórych regionów kodu, możesz je zwinąć. Wybierz małe szare pole z znakiem minus wewnątrz niego na marginesie pierwszego wiersza funkcji. Lub, jeśli jesteś użytkownikiem klawiatury, umieść kursor w dowolnym miejscu w kodzie konstruktora i naciśnij Ctrl+M, Ctrl+M.

zwijanie przycisku zwijania

Blok kodu zwija się tylko do pierwszego wiersza, po którym następuje wielokropek (...). Aby ponownie rozwinąć blok kodu, kliknij to samo szare pole, które ma teraz znak plus lub naciśnij Ctrl+M, Ctrl+M ponownie. Ta funkcja nazywa się konturowanie i jest szczególnie przydatna, gdy zwijasz długie funkcje lub składasz całe klasy.

Zobacz definicje

Edytor programu Visual Studio ułatwia sprawdzanie definicji typu, funkcji itp. Jednym ze sposobów jest przejście do pliku zawierającego definicję, na przykład wybranie opcji Przejdź do definicji w dowolnym miejscu, do którego odwołuje się element programowania. Jeszcze szybszym sposobem, w jaki nie przenosisz fokusu od pliku, w którym pracujesz, jest użycie Zobacz definicję. Przyjrzyjmy się definicji metody render w poniższym przykładzie.

Kliknij prawym przyciskiem myszy render i wybierz pozycję Zobacz definicję z menu zawartości. Lub naciśnij Alt+F12.

Pojawia się okno podręczne z definicją metody render. Możesz przewinąć okno podręczne, a nawet zajrzeć do definicji innego typu poprzez podejrzenie kodu.

okno Zobacz definicję

Zamknij okno podglądu definicji, wybierając małą ikonkę z "x" w prawym górnym rogu wyskakującego okna.

Wyświetlanie wskazówek dotyczących nakładek

Począwszy od programu Visual Studio 2022 w wersji 17.12, podpowiedzi w tekście pokazują dodatkowe informacje na temat kodu źródłowego wyświetlanego bezpośrednio w linii. Jest to zwykle używane do wyświetlania wywnioskowanych typów, nazw parametrów i innych niejawnych informacji z kodu bezpośrednio w edytorze.

Zrzut ekranu przedstawiający wskazówki dotyczące nakładki.

Aby skonfigurować wskazówki dotyczące nakładek:

  1. Przejdź do pozycji Narzędzia > Opcje > Edytor tekstu > Wszystkie języki > Wskazówki dotyczące wkładeki wybierz opcję wyświetlania wskazówek dotyczących nakładki.

  2. Przejdź do pozycji Narzędzia Tools > Options > Text Editor > JavaScript/TypeScript > Advanced > General i skonfiguruj wskazówki dotyczące nakładki, które chcesz ukryć lub pokazać.

    Domyślnie większość tych opcji jest wyłączona.

Używanie fragmentów kodu

Program Visual Studio udostępnia przydatne fragmenty kodu , których można użyć do szybkiego i łatwego generowania często używanych bloków kodu. fragmenty kodu są dostępne dla różnych języków programowania, w tym JavaScript. Dodajmy pętlę for do pliku kodu.

Umieść kursor, w którym chcesz wstawić fragment kodu, kliknij prawym przyciskiem myszy i wybierz fragment kodu>Wstaw fragment kodu.

fragment kodu w programie Visual Studio

W edytorze zostanie wyświetlone pole Wstaw fragment kodu. Wybierz ogólne, a następnie kliknij dwukrotnie dla elementu na liście.

fragment kodu dla pętli for w programie Visual Studio

To dodaje fragment kodu pętli for do twojego kodu:

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

}

Aby zapoznać się z dostępnymi fragmentami kodu dla języka, wybierz pozycję Edytuj>IntelliSense>Wstaw fragment kodu, a następnie wybierz folder swojego języka.

Powiązana zawartość