.Js tutorial in Visual Studio Code

Node.js to platforma do budowania szybkich i skalowalnych aplikacji serwerowych przy użyciu JavaScript. Węzeł.JS jest runtime i npm jest menedżerem pakietów dla Node.Moduły js.

Visual Studio Code ma wsparcie dla języków JavaScript i TypeScript, jak również Node.debugowanie js. Jednak, aby uruchomić węzeł.js aplikacji, trzeba będzie zainstalować węzeł.js runtime na twoim komputerze.

aby rozpocząć ten proces, zainstaluj Node.js dla Twojej platformy., Menedżer pakietów węzłów jest zawarty w węźle.Dystrybucja js. Musisz otworzyć nowy terminal (wiersz polecenia) dla narzędzi wiersza poleceń node I npm aby znaleźć się na twojej ścieżce.

Linux: istnieją określone węzły.Pakiety js dostępne dla różnych wersji Linuksa. Zobacz Instalowanie Węzła.js poprzez menedżera pakietów, aby znaleźć węzeł.pakiet js i instrukcje instalacji dostosowane do twojej wersji Linuksa.

Wskazówka: aby przetestować, że masz węzeł.,js poprawnie zainstalowany na komputerze, otwórz nowy terminal i wpisz node --help I powinieneś zobaczyć dokumentację użycia.

Hello World

zacznijmy od utworzenia najprostszego węzła.aplikacja js,”Hello World”.

Utwórz pusty folder o nazwie „hello”, przejdź do i otwórz kod VS:

mkdir hellocd hellocode .

Wskazówka: możesz otwierać pliki lub foldery bezpośrednio z linii poleceń. Okres”.,’odnosi się do bieżącego folderu, dlatego VS Code uruchomi i otworzy folder Hello.

z paska narzędzi Eksploratora plików naciśnij przycisk Nowy plik:

i nazwij plikapp.js:

używając rozszerzenia pliku.js, VS Code interpretuje ten plik jako JavaScript i ocenia zawartość za pomocą usługi języka JavaScript. Zapoznaj się z tematem języka JavaScript VS Code, aby dowiedzieć się więcej o obsłudze JavaScript.,

Utwórz prostą zmienną łańcuchową w app.js I wyślij zawartość łańcucha do konsoli:

var msg = 'Hello World';console.log(msg);

zauważ, że po wpisaniu console.IntelliSense na console obiekt został automatycznie zaprezentowany.

zauważ również, że VS Code wie, żemsg jest ciągiem znaków opartym na inicjalizacji do'Hello World'., Jeśli wpiszesz msg. zobaczysz IntelliSense pokazujące wszystkie dostępne na msg.

Po eksperymentowaniu z IntelliSense, Przywróć wszelkie dodatkowe zmiany w powyższym przykładzie kodu źródłowego i zapisz plik (⌘S (Windows, Linux Ctrl+S)).

uruchamianie Hello World

proste jest uruchamianieapp.js za pomocą Node.js. Z terminala po prostu wpisz:

node app.js

powinieneś zobaczyć wyjście „Hello World” do terminala, a następnie węzła.,js powraca.

zintegrowany Terminal

VS Code ma zintegrowany terminal, za pomocą którego można uruchamiać polecenia powłoki. Możesz uruchomić Node.js bezpośrednio stamtąd i uniknąć przełączania się z VS Code podczas uruchamiania narzędzi wiersza poleceń.

do tego przejścia można użyć zewnętrznego terminala lub zintegrowanego terminala VS Code do uruchamiania narzędzi wiersza poleceń.

debugowanie Hello World

jak wspomniano we wstępie, VS kod jest dostarczany z debuggerem dla węzła.aplikacje js. Spróbujmy debugować naszą prostą aplikację Hello World.,

aby ustawić punkt przerwania wapp.js, Umieść kursor edytora w pierwszej linii i naciśnij F9 lub kliknij w edytorze po lewej stronie obok numerów linii. W rynnie pojawi się czerwone kółko.

aby rozpocząć debugowanie, wybierz Widok Uruchom na pasku aktywności:

Możesz teraz kliknąć pasek debugowania zielona strzałka lub nacisnąć F5, aby uruchomić i debugować „Hello World”. Twój punkt przerwania zostanie trafiony i możesz przeglądać i przechodzić przez prostą aplikację., Zauważ, że VS Code wyświetla różnokolorowy pasek stanu, wskazujący, że jest w trybie debugowania, a konsola debugowania jest wyświetlana.

teraz, gdy widziałeś VS Code w akcji z „Hello World”, następna sekcja pokazuje użycie VS Code z pełnym węzłem stosu.aplikacja internetowa js.

Uwaga: skończyliśmy z przykładem „Hello World”, więc przejdź z tego folderu przed utworzeniem aplikacji Express. Możesz usunąć folder „Hello”, jeśli chcesz, ponieważ nie jest on wymagany przez resztę przejścia.,

aplikacja Express

Express jest bardzo popularnym frameworkiem aplikacji do budowania i uruchamiania węzłów.aplikacje js. Możesz zbudować (utworzyć) nową aplikację Express za pomocą narzędzia Generator Express. Generator Express jest dostarczany jako moduł npm i instalowany za pomocą narzędzia wiersza poleceń npm npm.

Wskazówka: aby sprawdzić, czy masznpm poprawnie zainstalowany na komputerze, wpisz npm --help z terminala i powinieneś zobaczyć dokumentację użycia.,

zainstaluj Generator Express, uruchamiając następujące z terminala:

npm install -g express-generator

-g przełącznik instaluje ekspres generator globalnie na komputerze, dzięki czemu można go uruchomić z dowolnego miejsca.

możemy teraz rusztować nową aplikację Express o nazwie myExpressApp uruchamiając:

express myExpressApp --view pug

tworzy to nowy folder o nazwie myExpressApp z zawartością Twojej aplikacji., Parametry--view pug mówią generatorowi, aby używał silnika szablonu pug.

aby zainstalować wszystkie zależności aplikacji (ponownie wysłane jako moduły npm), przejdź do nowego folderu i wykonajnpm install:

cd myExpressAppnpm install

w tym momencie powinniśmy przetestować, czy nasza aplikacja działa. Wygenerowana aplikacja Express mapackage.json plik, który zawierastart skrypt do uruchomienianode ./bin/www. Spowoduje to uruchomienie węzła.uruchomiona aplikacja js.,

z terminala w folderze aplikacji Express Uruchom:

npm start

węzeł.js web server zostanie uruchomiony i możesz przejść do http://localhost:3000, aby zobaczyć uruchomioną aplikację.

świetna edycja kodu

zamknij przeglądarkę i z terminala w folderze myExpressApp zatrzymaj węzeł.js server naciskając CTRL + C.,

Teraz uruchom VS Code:

code .

Uwaga: Jeśli używasz zintegrowanego terminala VS Code do zainstalowania generatora Express i rusztowania aplikacji, możesz otworzyć myExpressApp folder z uruchomionej instancji VS Code z plikiem > otwórz polecenie Folder.

węzeł.JS i Express documentation świetnie wyjaśniają, jak tworzyć bogate aplikacje przy użyciu platformy i frameworka., Visual Studio Code sprawi, że będziesz bardziej produktywny w tworzeniu tego typu aplikacji, zapewniając świetne wrażenia z edycji kodu i nawigacji.

Otwórz plik app.js I najedź kursorem na węzeł.js global object __dirname. Zauważ, jak VS Code rozumie, że__dirname jest ciągiem znaków. Co ciekawsze, możesz uzyskać pełny IntelliSense przeciwko węzłowi.js framework. Na przykład możesz wymagać http I uzyskać pełny IntelliSense względem klasy http podczas wpisywania kodu Visual Studio.,

VS Code używa plików deklaracji typu TypeScript (typings) (na przykładnode.d.ts), aby dostarczyć metadane do VS Code o frameworkach opartych na JavaScript, których używasz w swojej aplikacji. Pliki deklaracji typu są napisane w języku TypeScript, dzięki czemu mogą wyrażać typy danych parametrów i funkcji, dzięki czemu kod VS zapewnia bogate doświadczenie IntelliSense. Dzięki funkcji Automatic Type Acquisition nie musisz się martwić o pobranie tych plików deklaracji typu, VS Code zainstaluje je automatycznie za Ciebie.,

Możesz również napisać kod, który odwołuje się do modułów w innych plikach. Na przykład w app.js wymagamy modułu ./routes/index, który eksportuje klasę Express.Router. Jeśli uruchomisz IntelliSense naindex, zobaczysz kształt klasyRouter.

Debuguj swoją aplikację Express

musisz utworzyć plik konfiguracyjny debuggera launch.json dla Twojej aplikacji Express., Kliknij ikonę Uruchom na pasku aktywności, a następnie ikonę Konfiguruj koło zębate u góry widoku Uruchom, aby utworzyć domyślny plik launch.json. Wybierz węzeł.środowisko js poprzez zapewnienie, że właściwość type w configurations jest ustawiona na "node". Gdy plik jest tworzony po raz pierwszy, VS Code będzie wyglądać wpackage.json dlastart skrypt i użyje tej wartości jako program(co w tym przypadku jest "${workspaceFolder}\\bin\\www) dla konfiguracji programu uruchamiania.,

{ "version": "0.2.0", "configurations": } 

Zapisz nowy plik i upewnij się, że program uruchom jest wybrany w rozwijanej konfiguracji u góry widoku Uruchom. Otwórz app.js I ustaw punkt przerwania u góry pliku, w którym tworzony jest obiekt aplikacji Express, klikając w rynnę po lewej stronie numeru linii. Naciśnij klawisz F5, aby rozpocząć debugowanie aplikacji. VS Code uruchomi serwer w nowym terminalu i uderzy w ustawiony przez nas punkt przerwania. Stamtąd możesz sprawdzać zmienne, tworzyć zegarki i przechodzić przez kod.,

wdrażanie aplikacji

Jeśli chcesz dowiedzieć się, jak wdrożyć aplikację internetową, zapoznaj się z samouczkami wdrażanie aplikacji na platformie Azure, w których pokazujemy, jak uruchamiać witrynę na platformie Azure.

w programie Visual Studio Code jest o wiele więcej do odkrycia, wypróbuj następujące tematy:

• Ustawienia – dowiedz się, jak dostosować kod VS do tego, jak chcesz pracować.
• debugowanie – tutaj naprawdę świeci kod VS.
• wideo: pierwsze kroki z Node.debugowanie js-dowiedz się, jak dołączyć do działającego węzła.proces js.
• węzeł.,debugowanie js-dowiedz się więcej o wbudowanym węźle VS Code.debugowanie js.
• przepisy debugowania – przykłady scenariuszy takich jak debugowanie po stronie klienta i kontenera.
• zadania-wykonywanie zadań z Gulp, Grunt i Jake. Wyświetlanie błędów i ostrzeżeń.