JavaScript jest niezmiennie uznawany za ulubiony język programowania większości programistów.
Ponad 63% respondentów, z którymi przeprowadzono wywiady w Ankieta Stackoverflow 2023 powiedział, że używają JavaScript. Z drugiej strony kod Visual Studio jest popularnym zintegrowanym środowiskiem programistycznym (IDE). Ten sam ankieta pokazało, że VS Code jest najpopularniejszym edytorem kodu – na jego korzyść głosowało ponad 73% respondentów.
Visual Studio Code obsługuje JavaScript i wiele innych języków. W tym artykule opiszę znaczenie uruchamiania JavaScript w Visual Studio Code, jak stworzyć projekt JavaScript/napisać kod, podam przewodnik krok po kroku dotyczący uruchamiania JavaScript w VS Code oraz najlepsze praktyki dotyczące uruchamiania kodu JavaScript w kodzie VS.
Spis treści:
Znaczenie uruchamiania JavaScript w VS Code
JavaScript jest jednym z niewielu języków, które są obsługiwane od razu po wyjęciu z pudełka Kod VS. Oto niektóre z powodów, dla których możesz chcieć uruchomić JavaScript w VS Code:
- Wykonaj i przetestuj kod: Możesz pisać i wykonywać kod JavaScript bez opuszczania edytora. Ten edytor potraktuje wszystko, co napiszesz w plikach z rozszerzeniem .js, jako kod JavaScript. Ten edytor kodu będzie także podświetlał błędy w kodzie podczas jego pisania i ułatwi debugowanie.
- Posiada zintegrowany terminal: nie musisz wychodzić z edytora kodu, aby uruchamiać polecenia w celu utworzenia nowych folderów lub plików lub przeprowadzić kontrolę wersji. Terminal ten umożliwia także przeglądanie komunikatów o błędach.
- Duży ekosystem: zawsze możesz poszukać rozszerzeń, jeśli funkcja, której szukasz, nie jest obsługiwana przez VS Code od razu po wyjęciu z pudełka. Możesz używać takich rozszerzeń, aby uzyskać dodatkowe funkcje i uzyskać wsparcie dla różnych bibliotek i frameworków.
- Ładowanie na gorąco i serwer na żywo: możesz włączyć automatyczne zapisywanie kodu JavaScript w VS Code. Opcja serwera na żywo umożliwia także uruchamianie kodu JavaScript w przeglądarce podczas kodowania. Funkcja ponownego ładowania na gorąco gwarantuje, że edytor kodu automatycznie wybierze wszystkie zmiany i nie będzie konieczne ponowne uruchamianie działającego serwera.
- IntelliSense i uzupełnianie kodu: czasami redaktorzy kodu potrzebują tylko, abyś zaczął pisać kod i oferują sugestie poprzez inteligentne sugerowanie kodu i autouzupełnianie. Ta funkcja pozwoli Ci zaoszczędzić czas; wystarczy skupić się na logice.
- Zgodność między platformami: możesz zainstalować VS Code na systemach macOS, Linux i Windows. Ten edytor kodu obsługuje także TypeScript, indeks górny JavaScript, który wprowadza typy.
Uruchamianie JavaScriptu w VS Code
Ustawienie środowiska do uruchamiania kodu JavaScript jest łatwe, niezależnie od systemu operacyjnego. Idealnie byłoby, gdyby Twój komputer miał co najmniej 4 GB pamięci RAM na potrzeby tych instalacji. Aby rozpocząć, wykonaj poniższe kroki.
Skonfiguruj Node.js
Node.js to jedno z najpopularniejszych środowisk wykonawczych JavaScript. Dzięki Node.js możesz uruchamiać JavaScrpt poza środowiskiem przeglądarki. Node.js umożliwił także wykorzystanie JavaScriptu w tworzeniu backendu dzięki swoim frameworkom takim jak Express.js.
Możesz pobierz Node.js za darmo, jeśli nie masz go jeszcze na swoim komputerze. Możesz także sprawdzić, czy jest on zainstalowany na twoim komputerze, używając tego polecenia:
node -v
Jeśli jest zainstalowany, na terminalu zobaczysz coś takiego:
Konfigurowanie kodu programu Visual Studio na potrzeby programowania w języku JavaScript
Visual Studio Code można opisać jako edytor kodu i IDE, w zależności od przypadku użycia. VS Code domyślnie obsługuje JavaScript. Jednak niektóre funkcje JavaScript będą wymagały rozszerzeń, aby mogły zostać uruchomione.
VS Code można pobrać bezpłatnie. Możesz wybrać odpowiednie wersja do pobrania w oparciu o Twój system operacyjny.
Tworzenie projektu JavaScript
Masz teraz podstawowe oprogramowanie (środowisko wykonawcze i edytor kodu) do tworzenia aplikacji JavaScript. JavaScript służy do dodawania interaktywności do stron internetowych i jest najczęściej używany z HTML i CSS. Można go jednak używać także do tworzenia skryptów i struktur danych.
Mogę teraz utworzyć prostą aplikację i nazwać ją JavaScript-VsCode-app.
Możesz użyć tych poleceń:
mkdir JavaScript-VSCode-app
cd JavaScript-VSCode-app
touch app.js
code .
Pisanie kodu JavaScript w kodzie Visual Studio
Na potrzeby tej demonstracji napiszę tylko kod JavaScript. Tak wygląda nasz projekt w edytorze kodu.
Jak widać, mamy tylko jeden plik (app.js). Potrafię teraz napisać prosty program sprawdzający, czy liczba jest parzysta. Napiszę mój kod w pliku app.js. To jest mój kod:
function isEven(number) {
return number % 2 === 0;
}
// Example usage:
let myNumber = 8;
if (isEven(myNumber)) {
console.log(myNumber + " is even.");
} else {
console.log(myNumber + " is odd.");
}
Uruchamianie kodu JavaScript w Visual Studio Code
Jesteśmy teraz gotowi do uruchomienia JavaScript w kodzie VS. Musimy jednak zrozumieć, co robi ten kod. Mamy funkcję, którą nazwaliśmy „isEven”. Nasza funkcja pobiera liczbę i zwraca wartość „prawda”, jeśli liczba jest podzielna przez dwa. Jeśli jednak liczba nie jest podzielna przez dwa, zwróci wartość „false”.
Możemy teraz uruchomić to polecenie:
node app.js
Możesz uruchomić go w katalogu głównym lub terminalu VS Code.
Po uruchomieniu kodu, który podaliśmy w ostatnim kroku, jako wynik otrzymamy „8 jest parzyste”.
A co jeśli sprawdzimy, czy 9 jest parzyste? Możemy zmienić nasz kod w następujący sposób:
function isEven(number) {
return number % 2 === 0;
}
// Example usage:
let myNumber = 9;
if (isEven(myNumber)) {
console.log(myNumber + " is even.");
} else {
console.log(myNumber + " is odd.");
}
Oto co otrzymamy po uruchomieniu naszego kodu:
Jak widać, naszym wynikiem jest „9 jest nieparzyste”.
Dodaj niezbędne rozszerzenia
Program, który stworzyliśmy powyżej, jest prosty. Możesz jednak chcieć zbudować złożoną aplikację, w której będziesz musiał poprawić kod lub nawet debugować. Po lewej stronie kodu VS kliknij przedostatni przycisk.
Możesz także użyć skrótów klawiaturowych: CTRL+Shift+X.
Możesz teraz wyszukiwać różne rozszerzenia, których możesz użyć w swoim kodzie. Na przykład mogę wyszukać ESLint.
Możesz zobaczyć, że rozszerzenia są już włączone po mojej stronie. Zawsze sprawdzaj opis różnych rozszerzeń, aby ułatwić ich konfigurację i użytkowanie.
Użyj rozszerzenia Code Runner
Visual Studio Code obsługuje setki języków programowania. Możesz użyć Biegacz kodu do wykonywania kodów w większości popularnych języków programowania. Znajdź zakładkę rozszerzeń po lewej stronie VS Code i wyszukaj Code Runner.
Kliknij zainstaluj i włącz rozszerzenie, a teraz możesz uruchomić swój kod. Mam prostą instrukcję o treści console.log(„Witaj, świecie!”); w moim pliku app.js. Mogę go uruchomić za pomocą Code Runner. Użyję skrótu F1 i napiszę RUN CODE.
Oto co dostaję na terminalu:
[Running] node "/home/tk/JavaScript-VSCode-app/app.js" Hello, World! [Done] exited with code=0 in 2.106 seconds
Najlepsze praktyki dotyczące wydajnego pisania kodu JavaScript
Konfiguracja, którą mamy do tej pory, jest idealna dla prostych programów JavaScript. Jeśli jednak chcesz płynnie uruchamiać JavaScript w VS Code, musisz pamiętać o tych najlepszych praktykach:
- Użyj lintera kodu: czytelność może stać się problemem w miarę wzrostu rozmiaru pliku JavaScript. Możesz użyć rozszerzenia np Ładniejszy ESLint aby zapewnić wczesne wykrycie błędów w kodzie i zwiększyć czytelność kodu.
- Trzymaj różne języki w różnych plikach: Typowy projekt front-end może wymagać napisania kodu HTML, CSS i JavaScript. Możesz ulec pokusie napisania całego kodu w jednym dokumencie. Pamiętaj jednak, aby zawsze pisać kod HTML, CSS i JavaScript w różnych plikach.
- Skorzystaj z rozszerzeń: Rynek VS Code zawiera tysiące rozszerzeń, które ułatwiają pracę z różnymi bibliotekami. Poznaj rynek i wybieraj rozszerzenia z najlepszymi ocenami i dokumentacją.
Konfigurowanie Git w Visual Studio Code na potrzeby integracji kontroli wersji
Do tej pory podaliśmy kroki konfigurowania VS Code i uruchamiania JavaScript w tym edytorze kodu. Jednak może być konieczne użycie kontroli wersji, takiej jak Git, do śledzenia zmian w kodzie lub nawet przesyłania ich do zdalnego repozytorium, takiego jak GitHub. Oto kroki, które należy wykonać:
- Zainstaluj Git: Git jest najczęściej używaną kontrolą wersji w fazie rozwoju. Pobierz Gita wersję dostosowaną do Twojego systemu operacyjnego i specyfikacji komputera. Możesz uruchomić to polecenie po instalacji, aby sprawdzić wersję Git:
git -v
Jeśli zainstalowałeś go poprawnie, na swoim terminalu będziesz mieć coś podobnego do tego:
- Zainicjuj repozytorium Git: możesz śledzić wszystkie swoje zmiany i zatwierdzać (przygotowywać) je w Git. Uruchom to polecenie z katalogu głównego folderu projektu:
git init
- Skonfiguruj swoją tożsamość Git: Musisz powiedzieć Gitowi, kim jesteś, konfigurując swoją nazwę użytkownika i adres e-mail. Uruchom te polecenia, aby rozpocząć:
git config – globalna nazwa użytkownika „Twoje imię”
git config –global użytkownik.email „[email protected]”>[email protected]”
Zastąp „Twoje imię” i „[email protected]’ z odpowiednimi szczegółami.
- Przygotowanie i zatwierdzenie zmian: Skonfigurowałeś już Git i możesz teraz przygotować i zatwierdzić zmiany. Uruchom to polecenie, aby sprawdzić wszystkie nieśledzone pliki:
git status
Możesz teraz zobaczyć wszystkie nieśledzone i niezatwierdzone pliki.
Uruchom to polecenie, aby wprowadzić zmiany:
git add .
Uruchom ponownie git status, a zobaczysz coś podobnego do tego:
Możesz teraz przekazać swoje pliki. Uruchom to polecenie:
git commit -m “your commit message”
Zastąp „komunikat zatwierdzenia” czymś, co opisuje Twoje działania.
Możesz teraz połączyć kontrolę źródła ze zdalnymi platformami repozytoriów, takimi jak GitHub.
Wniosek
Mamy teraz nadzieję, że rozumiesz, jak stworzyć środowisko i uruchomić JavaScript w VS Code. Do pracy z bibliotekami i frameworkami JavaScript w tym edytorze kodu możesz potrzebować dodatkowych rozszerzeń. Jeśli jednak chcesz korzystać ze wszystkich najnowszych funkcji, zawsze aktualizuj kod programu Visual Studio.
Sprawdź nasz artykuł na temat najlepszych zasobów do nauki JavaScript i doskonalenia swojej wiedzy.