Visual Studio Code: instalacja, konfiguracja i rozszerzenia

• Zacznij od zwykłego wydania VS Code z oficjalnej strony pobierania.
• Dla każdego ćwiczenia przygotuj osobny folder i otwieraj cały projekt.
• Rozszerzenia dobieraj do zadania: najpierw uruchom przykład, później rozbudowuj konfigurację.

Przygotuj dostęp do internetu do pobrania programu oraz miejsce na projekty. Microsoft zaleca procesor 1,6 GHz lub szybszy i 1 GB pamięci RAM, czyli pamięci używanej przez działające programy. To zalecenia dotyczące edytora; przy wyborze komputera uwzględnij też narzędzia, z których zamierzasz korzystać.

Strona pobierania VS Code podaje Windows 10 lub 11 w wersji 64-bitowej oraz macOS 12.0 lub nowszy. Dokumentacja wymagań platformowych wskazuje dla macOS systemy objęte aktualizacjami bezpieczeństwa Apple. Polecam sprawdzić oba warunki, zwłaszcza na starszym Macu.

Windows 11

Dla początkującego polecam instalator User setup, przeznaczony dla bieżącego konta. Zgodnie z instrukcją instalacji w Windows nie wymaga on uprawnień administratora.

1. Pobierz Visual Studio Code User setup.
2. Uruchom plik VSCodeUserSetup-{version}.exe i przejdź przez instalator.
3. Po instalacji zamknij i ponownie otwórz terminal, czyli okno do wpisywania poleceń.

Instalator dodaje polecenie code do zmiennej PATH, czyli listy folderów, w których system szuka programów. Ponowne otwarcie terminala pozwala uwzględnić tę zmianę.

macOS

Wykonaj kroki z instrukcji instalacji dla macOS:

1. Pobierz VS Code dla macOS.
2. Otwórz pobrany plik .dmg, czyli obraz dysku zawierający kopię zawartości dysku lub folderu.
3. Przeciągnij Visual Studio Code.app do folderu Applications.
4. Uruchom aplikację z tego folderu.

Aby później korzystać z polecenia code, otwórz paletę poleceń skrótem Cmd+Shift+P. Wykonaj Shell Command: Install 'code' command in PATH, a następnie ponownie uruchom terminal. Tę kolejność opisuje konfiguracja PATH na Macu.

Ubuntu 24.04 LTS

LTS oznacza wydanie z długoterminowym wsparciem. W tym przykładzie użyj pakietu .deb, czyli pliku instalacyjnego dla systemów z rodziny Debian i Ubuntu. Dokumentacja instalacji na Linuksie opisuje instalację pakietu poleceniem apt.

Poniższy blok jest przeznaczony dla Ubuntu 24.04 LTS w wariancie x64, czyli dla 64-bitowych procesorów x86. Przed rozpoczęciem potrzebujesz dostępu do internetu i konta uprawnionego do wykonywania poleceń przez sudo. Przygotuj też folder, w którym możesz zapisywać pobrane pliki, oraz hasło swojego konta, jeśli sudo poprosi o uwierzytelnienie.

1. Utwórz folder pierwszy-projekt.
2. Otwórz terminal w folderze pierwszy-projekt i wpisz poniższe polecenia. Zawierają pobranie pakietu, więc plik vscode.deb nie musi wcześniej istnieć; adres najnowszego stabilnego wydania podaje FAQ Microsoftu:

sudo apt update &&
sudo apt install -y wget ca-certificates &&
wget --no-verbose -O vscode.deb 'https://update.code.visualstudio.com/latest/linux-deb-x64/stable' &&
sudo apt install -y ./vscode.deb

sudo: unable to send audit message: Operation not permitted

WARNING: apt does not have a stable CLI interface. Use with caution in scripts.

Hit:1 http://archive.ubuntu.com/ubuntu noble InRelease
Get:2 http://archive.ubuntu.com/ubuntu noble-updates InRelease [126 kB]
Hit:3 http://archive.ubuntu.com/ubuntu noble-backports InRelease
Hit:4 https://cli.github.com/packages stable InRelease
Get:5 http://security.ubuntu.com/ubuntu noble-security InRelease [126 kB]
Hit:6 https://packages.microsoft.com/repos/code stable InRelease
…
0 upgraded, 0 newly installed, 0 to remove and 4 not upgraded.

Pierwsze dwa polecenia aktualizują listę dostępnych pakietów i instalują wskazane pakiety: narzędzie pobierania wget oraz pakiet certyfikatów ca-certificates. Następnie wget zapisuje pobrany instalator jako vscode.deb, nadpisując istniejący plik o tej nazwie. Ostatnie polecenie instaluje pakiet VS Code w systemie. sudo uruchamia je z uprawnieniami administratora; potwierdź operację, jeśli system poprosi.

Opcja --no-verbose ogranicza komunikaty pobierania, zachowując podstawowe informacje i komunikaty o błędach. Opcja -y automatycznie potwierdza pytania apt o kontynuowanie instalacji. Poczekaj na zakończenie pobierania i instalacji, zanim przejdziesz do następnego kroku.

3. Uruchom VS Code.

Pakiet może zapytać o dodanie repozytorium apt i klucza podpisującego. Repozytorium jest źródłem pakietów, a klucz służy do weryfikacji ich podpisów. Według instrukcji Microsoftu ich dodanie umożliwia aktualizowanie VS Code przez systemowy menedżer pakietów.

Polecam folder pierwszy-projekt przeznaczony wyłącznie na to ćwiczenie. Workspace, czyli obszar roboczy, jest w prostym projekcie otwartym folderem wraz z jego konfiguracją. Tak wyjaśnia go dokumentacja ustawień.

1. Utwórz folder pierwszy-projekt w menedżerze plików systemu lub użyj folderu przygotowanego podczas instalacji w Ubuntu.
2. W VS Code wybierz File > Open Folder... i wskaż ten folder, zgodnie z instrukcją otwierania projektu.
3. Jeśli pojawi się pytanie o zaufanie, oceń pochodzenie zawartości. Własny, pusty folder to dobry punkt startowy.

Przy cudzym projekcie polecam najpierw przejrzeć pliki. Funkcja Workspace Trust pozwala zdecydować, czy VS Code i rozszerzenia mogą wykonywać kod projektu bez osobnego potwierdzenia. Restricted Mode, czyli tryb ograniczony, ogranicza między innymi terminal, debugowanie i rozszerzenia.

Możesz również otworzyć terminal systemowy w folderze projektu i wykonać polecenia opisane w dokumentacji wiersza poleceń:

code --version
code .

Pierwsze wypisuje wersję VS Code, identyfikator zmiany w jego kodzie i architekturę, czyli wariant programu dla danej rodziny procesorów. Drugie otwiera bieżący folder, oznaczony kropką. Te polecenia nie usuwają plików projektu.

W interfejsie VS Code Explorer pokazuje pliki, główny edytor ich zawartość, a dolny panel mieści między innymi terminal i komunikaty. Paletę poleceń, czyli wyszukiwarkę funkcji edytora, otworzysz przez Ctrl+Shift+P w Windows i Linuksie lub Cmd+Shift+P na Macu.

Polecam zapamiętać paletę przed nauką pozostałych skrótów. Gdy poradnik podaje nazwę polecenia, wyszukaj ją tam. Na przykład Preferences: Open Settings otwiera ustawienia edytora.

Do tego ćwiczenia wystarczy dokument HTML. Nie dodawaj jeszcze bibliotek, czyli gotowych fragmentów kodu wykorzystywanych przez inne programy. Celem jest przećwiczenie otwierania, zapisywania i oglądania efektu.

1. W Explorer wybierz New File, tak jak pokazuje instrukcja tworzenia pliku.
2. Utwórz plik index.html:

<!doctype html>
<html lang="pl">
  <head>
    <meta charset="utf-8" />
    <title>Pierwszy projekt</title>
  </head>
  <body>
    <h1>Uczę się korzystać z VS Code</h1>
    <p>To mój pierwszy plik w projekcie.</p>
  </body>
</html>

Przykład korzysta ze struktury dokumentu opisanej przez MDN. Znaczniki, takie jak <p>, opisują elementy strony. <title> ustawia tytuł karty przeglądarki, a charset="utf-8" deklaruje kodowanie znaków obsługujące polskie litery.

3. Zapisz plik przez Ctrl+S w Windows i Linuksie albo Cmd+S na Macu, zgodnie z instrukcją zapisywania.
4. Kliknij plik prawym przyciskiem w Explorer i wybierz Open in Integrated Browser. Dokumentacja podglądu HTML opisuje ten sposób otwierania strony wewnątrz VS Code.

Powinien pojawić się nagłówek „Uczę się korzystać z VS Code” i akapit poniżej. Zmień treść akapitu i zapisz plik. Zgodnie z dokumentacją podgląd aktualizuje się podczas modyfikowania HTML.

Polecam powtarzać taki cykl przy kolejnych ćwiczeniach:

flowchart TD
  A[Otwórz folder] --> B[Edytuj plik]
  B --> C[Zapisz zmiany]
  C --> D[Sprawdź wynik]
  D --> E[Popraw jeden szczegół]
  E --> B

Rozszerzenie to dodatek do edytora. Polecam instalować je pojedynczo i po każdym sprawdzać, czy rozwiązuje konkretny problem. Poniższe zestawienie jest propozycją wyboru, a nie rankingiem popularności.

Formatter porządkuje zapis kodu, na przykład wcięcia. Linter analizuje kod pod kątem reguł i możliwych błędów. Debugger pomaga zatrzymać program i sprawdzić jego stan.

JavaScript jest językiem programowania używanym między innymi na stronach, a CSS opisuje ich wygląd. Interpreter wykonuje kod danego języka. Kontener to odizolowane środowisko aplikacji i jej narzędzi; podstawy rozwija poradnik Dockera.

Jak zainstalować dodatek

Wykonaj kroki opisane w dokumentacji rozszerzeń:

1. Otwórz Extensions przez Ctrl+Shift+X w Windows i Linuksie lub Cmd+Shift+X na Macu.
2. Wyszukaj nazwę dodatku i otwórz jego stronę.
3. Sprawdź wydawcę oraz opis, następnie wybierz Install.
4. Jeśli pojawi się prośba o zaufanie do wydawcy, oceń ją przed potwierdzeniem.

Po instalacji przycisk Install zmienia się w przycisk zarządzania. Microsoft wyjaśnia też, że rozszerzenia mają takie uprawnienia jak VS Code. Polecam rezygnować z dodatków o niejasnym pochodzeniu.

Ustawienia User dotyczą użytkownika, a Workspace otwartego projektu. Dokumentacja ustawień opisuje również ustawienia specyficzne dla języka, które mają własne reguły pierwszeństwa. Polecam trzymać wspólne zasady formatowania w projekcie, a osobiste preferencje wyglądu w ustawieniach użytkownika.

Do ćwiczenia HTML proponuję Prettier i ręczne zapisywanie plików:

1. Zainstaluj Prettier - Code formatter.
2. W nowym projekcie utwórz folder .vscode.
3. Utwórz plik .vscode/settings.json:

{
  "files.autoSave": "off",
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  }
}

JSON to tekstowy format danych z parami nazwa i wartość. VS Code zapisuje ustawienia projektu w folderze .vscode. Jeśli plik już istnieje, dopisz ustawienia między obecnymi nawiasami klamrowymi, zachowując przecinki, zamiast zastępować całą zawartość.

files.autoSave: "off" wyłącza automatyczny zapis, a editor.formatOnSave: true włącza formatowanie przy zapisie. Identyfikator esbenp.prettier-vscode wybiera Prettier jako domyślny formatter. Sekcja [html] ogranicza tę konfigurację do HTML.

4. Zmień wcięcie w index.html i zapisz plik. Przy aktywnym Prettier formatowanie powinno je uporządkować. Zapis i formatter zmieniają zawartość pliku na dysku, dlatego polecam porównać wynik przed dalszą pracą.

Polski interfejs

Nazwy poleceń w tym poradniku odpowiadają dokumentacji angielskiej. Jeśli wolisz polskie menu, zastosuj instrukcję zmiany języka:

1. Otwórz paletę i wybierz Configure Display Language.
2. Wybierz język polski, oznaczony kodem pl.
3. Poczekaj na instalację pakietu językowego, jeśli jest potrzebny, i uruchom edytor ponownie po wyświetleniu prośby.

Rozszerzenie Python wymaga osobnej instalacji interpretera. Instalację samego języka znajdziesz w poradniku Microsoftu. Tutaj skup się na połączeniu go z edytorem.

1. Po instalacji Pythona i rozszerzenia otwórz paletę.
2. Wykonaj Python: Select Interpreter i wybierz zainstalowanego Pythona, zgodnie z dokumentacją wyboru interpretera.
3. Otwórz zapisany plik .py z własnego ćwiczenia.
4. Wybierz Run Python File w prawym górnym rogu edytora. Ten przycisk uruchamia aktywny plik przy użyciu wybranego interpretera.

Gdy chcesz sprawdzić działanie programu krok po kroku, skorzystaj z debuggera:

1. Ustaw breakpoint, czyli punkt zatrzymania, klikając margines obok wykonywalnej linii. Dokumentacja debugowania opisuje go jako czerwoną kropkę.
2. Rozwiń strzałkę obok przycisku uruchamiania i wybierz Python Debugger: Debug Python File.
3. Po zatrzymaniu sprawdź wartości w VARIABLES, a potem kontynuuj przyciskiem Continue, zgodnie z instrukcją debuggera.

Polecam zaczynać od skryptu, którego oczekiwany wynik już znasz.

Git przechowuje historię wersji plików w repozytorium, czyli folderze objętym kontrolą wersji. VS Code ma wbudowaną obsługę Gita, ale korzysta z osobno zainstalowanego programu Git.

Otwórz folder istniejącego repozytorium i przejdź do Source Control. Według opisu tego widoku możesz przeglądać zmienione pliki, a edytor różnic pozwala porównywać ich wersje. Polecam tak oceniać efekt formatowania lub zmiany zaproponowanej przez AI.

Commit oznacza zapis wybranego zestawu zmian w historii Gita. Instalację, pierwszy commit i polecenia rozwija podręcznik Pro Git.

AI, czyli sztuczna inteligencja, może pomagać w pracy z kodem. Aby uruchomić GitHub Copilot, wykonaj kroki z instrukcji konfiguracji:

1. Najedź na ikonę Copilot na pasku stanu i wybierz Use AI Features.
2. Wybierz sposób logowania i wykonaj wyświetlone instrukcje.
3. Po zakończeniu konfiguracji rozpocznij pracę z Copilot.

Polecam pierwszą prośbę ograniczyć do wyjaśnienia pliku: „Wyjaśnij zawartość index.html osobie początkującej. Opisz każdy znacznik i zaproponuj jedno ćwiczenie”. Przeczytaj odpowiedź, a proponowaną zmianę wykonaj i sprawdź w podglądzie.

Jeżeli używany model został wycofany, przejdź do instrukcji zmiany modelu w GitHub Copilot Chat.

Profil to zestaw ustawień i dodatków. Profile VS Code pozwalają przełączać takie zestawy. Polecam osobny profil do Pythona dopiero wtedy, gdy regularnie zmieniasz rodzaj projektu.

Aby przenieść preferencje między komputerami, zastosuj instrukcję Settings Sync:

1. Z menu zębatki lub konta wybierz Backup and Sync Settings....
2. Zaznacz dane do synchronizacji.
3. Wybierz Sign in, a następnie konto Microsoft lub GitHub.
4. Dokończ logowanie w przeglądarce.

Po zalogowaniu usługa łączy dane lokalne i chmurowe, a przy konflikcie prosi o jego rozwiązanie. Polecam przed pierwszą synchronizacją przejrzeć wybrane kategorie i osobno zadbać o kopię plików projektu.

Terminal nie rozpoznaje polecenia code

W Windows ponownie otwórz terminal po instalacji. Na Macu wykonaj Shell Command: Install 'code' command in PATH i również uruchom terminal ponownie. Te rozwiązania opisują instrukcje wiersza poleceń.

Prettier nie formatuje przy zapisie

Sprawdź, czy dodatek jest zainstalowany, a editor.defaultFormatter wskazuje esbenp.prettier-vscode, zgodnie z konfiguracją Prettier. Sprawdź też, czy editor.formatOnSave jest włączone dla danego języka. Polecam zacząć od jednego formattera dla każdego typu pliku.

Terminal lub debugowanie są niedostępne

Sprawdź, czy okno pokazuje Restricted Mode. Dokumentacja trybu ograniczonego wymienia ograniczenia tych funkcji. Nie zmieniaj zaufania tylko po to, by zniknął komunikat; najpierw oceń zawartość projektu.

Po dodaniu rozszerzenia pojawiły się problemy

Polecam tymczasowo wyłączyć ostatnio dodany element. W widoku Extensions zrobisz to przez przycisk zębatki przy rozszerzeniu. Jeśli pojawi się prośba Restart Extensions, wykonaj ją i ponownie sprawdź problem.

Czy Visual Studio Code jest darmowy?

Tak. Microsoft podaje, że VS Code jest bezpłatny do użytku prywatnego i komercyjnego. Dostęp do usług AI zależy od warunków wybranego planu Copilot.

Czym różni się Visual Studio Code od Visual Studio?

Microsoft opisuje VS Code jako edytor do pracy z kodem, a Visual Studio jako bardziej rozbudowane IDE, czyli zintegrowane środowisko programistyczne. Na początek polecam używać narzędzia wskazanego w wybranym kursie.

Czy do VS Code trzeba mieć konto Microsoft?

Nie. Instalacja i podstawowe funkcje edytora nie wymagają konta. Logowanie jest potrzebne do opisanej wyżej synchronizacji; Settings Sync obsługuje konto Microsoft lub GitHub.

Jeśli edytor jest już gotowy, polecam przejść do poradnika Pythona: instalacji i pierwszego skryptu. Wykorzystaj poznany schemat: osobny folder, zapisany plik i sprawdzenie wyniku. Gdy zaczniesz częściej poprawiać projekt, dołącz historię zmian z podręcznika Gita.