Dowiedz się, jak używać edytora kodu dla języka JavaScript
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 pobierania programu Visual Studio, aby zainstalować ją bezpłatnie. Aby uzyskać więcej informacji na temat pobierania usługi językowej dla języka TypeScript, zobacz Obsługa języka 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 tworzenie Node.js i aplikacja Express.
Dodawanie nowego pliku projektu
Możesz użyć środowiska IDE, aby dodać nowe pliki do projektu.
Po otwarciu projektu w programie Visual Studio kliknij prawym przyciskiem myszy folder lub węzeł projektu w Eksplorator rozwiązań (okienko po prawej stronie), a następnie wybierz polecenie Dodaj>nowy element.
Jeśli nie widzisz wszystkich szablonów elementów, wybierz pozycję Pokaż wszystkie szablony, a następnie wybierz szablon elementu.
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 po wpiseniu Router()polecenia zobaczysz typy argumentów, które można przekazać. Jest to nazywane pomocą sygnatury.
Możesz również użyć funkcji IntelliSense, aby ukończyć wyraz po wpisaniu wystarczającej liczby znaków, aby go uściślić. Jeśli umieścisz kursor po data ciągu w poniższym kodzie i wpiszesz get, funkcja IntelliSense wyświetli funkcje zdefiniowane wcześniej w kodzie lub zdefiniowane w bibliotece innej firmy, która została dodana do projektu.
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 o sposobie uzyskiwania informacji funkcji IntelliSense, zobacz IntelliSense języka JavaScript.
Sprawdzanie składni
Usługa językowa używa biblioteki ESLint do sprawdzania składni i lintingu. Jeśli chcesz ustawić opcje sprawdzania składni w edytorze, wybierz pozycję Narzędzia>Opcje>języka JavaScript/Linting języka TypeScript.> Opcje linting wskazują na globalny plik konfiguracji ESLint.
W poniższym kodzie w wyrażeniu zobaczysz wyróżnianie zielonej składni (zielone zygzaki). Umieść kursor na wyróżnianiu składni.
Ostatni wiersz tego komunikatu informuje, że usługa językowa oczekuje przecinka (,). Zielony wywiórka wskazuje 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.
Ten kod można naprawić, dodając przecinek (,) przed "data".
Aby uzyskać dodatkowe informacje na temat lintingu, zobacz Linting (Linting).
Oznacz jako komentarz 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 funkcji IntelliSense (IntelliSense to pomoc programowa, która wyświetla listę pasujących metod, między innymi), zwiększa lub zmniejsza wcięcie wiersza albo oznacza kod komentarza, którego nie chcesz kompilować. W tej sekcji oznaczymy jako komentarz kod.
Wybierz co najmniej jeden wiersz kodu w edytorze, a następnie wybierz przycisk 
Oznacz jako komentarz wybrany wiersz na pasku narzędzi. 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, aby oznaczyć jako komentarz kod.
Zwiń bloki kodu
Jeśli musisz usunąć listę widoków niektórych regionów kodu, możesz ją 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.
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 jest nazywana podkreśleniem i jest szczególnie przydatna w przypadku zwijania długich funkcji lub całych klas.
Definicje widoków
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 pozycji 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 funkcji Podgląd definicji. Przyjrzyjmy się definicji render metody w poniższym przykładzie.
Kliknij prawym przyciskiem myszy render i wybierz pozycję Zobacz definicję z menu zawartości. Lub naciśnij Alt+F12.
Zostanie wyświetlone okno podręczne z definicją render metody . Możesz przewinąć okno podręczne, a nawet zajrzeć do definicji innego typu z podglądu kodu.
Zamknij okno podglądu definicji, wybierając małe pole z tekstem "x" w prawym górnym rogu okna podręcznego.
Używanie fragmentów kodu
Program Visual Studio udostępnia przydatne fragmenty kodu, których można używać 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 języka JavaScript. Dodajmy pętlę for do pliku kodu.
Umieść kursor, w którym chcesz wstawić fragment kodu, kliknij prawym przyciskiem myszy i wybierz pozycję Wstaw> fragment kodu.
W edytorze zostanie wyświetlone pole Wstaw fragment kodu . Wybierz pozycję Ogólne , a następnie kliknij dwukrotnie element dla elementu na liście.
Spowoduje to dodanie fragmentu for kodu pętli:
for (var i = 0; i < length; i++) {
}
Aby zapoznać się z dostępnymi fragmentami kodu dla danego języka, wybierz pozycję Edytuj>wstaw wstaw fragment funkcji IntelliSense>, a następnie wybierz folder języka.