Visual Studio Code dla początkujących – instrukcja krok po kroku

Pobranie i instalacja na Windows

Visual Studio Code dla początkujących to edytor kodu Microsoftu dla Windows 10 i Windows 11, charakteryzujący się instalacją bez uprawnień administratora, integracją z PATH i obsługą rozszerzeń; oficjalna dokumentacja Microsoft wymienia 3 warianty instalacji dla Windows: User setup, System setup i ZIP archive (źródło: Microsoft, 2026).

Skąd pobrać VS Code bez ryzyka?

Pobierz instalator wyłącznie ze strony code.visualstudio.com. Nie używaj reklam w wynikach wyszukiwania, portali z paczkami programów ani instalatorów opisanych jako „download manager”, bo mogą dodać paski narzędzi, zmienić stronę startową albo pobrać starą wersję programu.

• code.visualstudio.com – oficjalna strona Microsoftu udostępnia aktualny instalator Visual Studio Code dla Windows.
• VSCodeUserSetup-{version}.exe – typowa nazwa instalatora użytkownika wskazuje, że program zainstaluje się w profilu bieżącego konta.
• Windows 10 lub Windows 11 – przed instalacją uruchom Windows Update i zainstaluj zaległe poprawki, szczególnie na świeżym systemie.
• Minimum 1 GB wolnego miejsca – sam edytor zajmuje mniej, ale rozszerzenia, cache i folder .vscode szybko zwiększają użycie dysku.
• Microsoft Defender SmartScreen – jeśli zgłasza ostrzeżenie dla pliku z innej strony niż code.visualstudio.com, przerwij instalację i pobierz instalator ponownie.

Który instalator wybrać: User setup czy System setup?

Dla prywatnego laptopa, komputera domowego i konta bez praw administratora wybierz User setup. System setup ma sens w firmie, pracowni szkolnej albo na komputerze współdzielonym przez kilka kont Windows, bo instaluje VS Code dla wszystkich użytkowników.

Wariant	Dla kogo	Typowa ścieżka	Uwagi administracyjne
User setup	Jedno konto Windows, nauka HTML, JavaScript, Python lub Git	C:\Users\nazwa\AppData\Local\Programs\Microsoft VS Code	Nie wymaga administratora i zwykle aktualizuje się najwygodniej.
System setup	Komputer firmowy, szkolny lub wieloużytkownikowy	C:\Program Files\Microsoft VS Code	Wymaga administratora przy instalacji i części aktualizacji.
ZIP archive	Użycie przenośne, testy, środowiska bez instalatora	Dowolny folder po rozpakowaniu	Aktualizacje wykonujesz ręcznie, więc początkującym zwykle tego nie polecam.

„User setup is the recommended installation for most people” – Microsoft, VS Code Windows setup, 2026

Czy zaznaczać Add to PATH i Open with Code?

Jeśli instalator pokazuje opcje Add to PATH, Open with Code oraz skróty w menu kontekstowym, zaznacz je. PATH pozwala uruchomić edytor poleceniem code z PowerShella lub terminala, a Open with Code dodaje wygodne otwieranie folderów prawym przyciskiem myszy.

1. Uruchom plik VSCodeUserSetup-{version}.exe dwuklikiem z folderu Pobrane.
2. Zaakceptuj licencję i zostaw domyślną ścieżkę instalacji, jeśli nie masz konkretnego powodu do zmiany.
3. Zaznacz Add to PATH, aby komenda code działała po restarcie terminala.
4. Zaznacz Open with Code, aby folder projektu otwierał się z menu kontekstowego Eksploratora Windows.
5. Po zakończeniu instalacji uruchom Visual Studio Code z menu Start, a nie z przypadkowego skrótu pobranego z internetu.

Pierwszy folder projektu i zaufanie

Pierwszy folder projektu w VS Code to katalog roboczy zawierający pliki strony, konfigurację .vscode i ewentualne skrypty, charakteryzujący się własnym widokiem Explorer, ustawieniami Workspace Trust i terminalem startującym w tej lokalizacji.

Jak utworzyć folder C:\Users\nazwa\Documents\vscode-start?

Najprostszy start to folder w Dokumentach. Otwórz Eksplorator Windows, przejdź do C:\Users\nazwa\Documents, kliknij prawym przyciskiem myszy, wybierz Nowy, Folder i nazwij go vscode-start. Nie zapisuj pierwszych projektów na Pulpicie, jeśli używasz OneDrive i masz problemy z synchronizacją, bo początkujący często mylą wtedy błędy edytora z blokadą pliku przez chmurę.

• C:\Users\nazwa\Documents\vscode-start – przewidywalna ścieżka ułatwia późniejsze odnalezienie plików i backup.
• Explorer w VS Code – panel po lewej pokazuje pliki otwartego folderu, a nie całą zawartość dysku C.
• Folder zamiast pojedynczego pliku – VS Code może zapamiętać układ okien, ustawienia i rozszerzenia powiązane z projektem.
• .vscode – ten folder może przechowywać lokalne ustawienia projektu, na przykład formatter albo konfigurację debugowania.
• Dokumenty – ta lokalizacja jest bezpieczniejsza dla początkującego niż Program Files, gdzie zwykłe konto może mieć ograniczone prawa zapisu.

Jak otworzyć folder przez File, Open Folder?

W VS Code wybierz File, Open Folder, wskaż C:\Users\nazwa\Documents\vscode-start i zatwierdź przyciskiem Select Folder. Jeśli chcesz szybciej, po poprawnej instalacji możesz kliknąć folder prawym przyciskiem myszy w Eksploratorze Windows i wybrać Open with Code.

1. Uruchom Visual Studio Code z menu Start, aby mieć pewność, że korzystasz z właściwej instalacji.
2. Wybierz File, Open Folder i przejdź do Dokumenty, vscode-start.
3. Sprawdź, czy po lewej stronie widzisz Explorer z nazwą vscode-start.
4. Nie otwieraj pojedynczego pliku HTML przez File, Open File, jeśli planujesz pracować z obrazami, CSS i JavaScriptem.
5. Gdy folder się nie otwiera, sprawdź uprawnienia folderu i czy nie znajduje się w lokalizacji chronionej przez administratora.

Co oznacza Workspace Trust i kiedy kliknąć Yes?

Workspace Trust to mechanizm bezpieczeństwa VS Code, który ogranicza automatyczne uruchamianie skryptów, terminala, debuggera i części rozszerzeń w nieznanych folderach. Kliknij Yes, I trust the authors, gdy folder utworzyłeś samodzielnie lub pochodzi z zaufanego repozytorium, na przykład organizacji Microsoft albo Docker na GitHubie (źródło: Microsoft, 2026).

„Until you’ve reviewed a project for malicious content, rely on the Workspace Trust boundary” – Microsoft, Workspace Trust documentation, 2026

Z mojej praktyki administracyjnej: największe ryzyko nie dotyczy pliku index.html, tylko projektów pobranych jako ZIP z internetu. Przed zaufaniem sprawdź pliki package.json, .vscode/settings.json, skrypty instalacyjne i nietypowe pliki wykonywalne.

Pierwszy plik HTML i podgląd pracy

Pierwszy plik HTML to index.html, czyli domyślny dokument strony WWW, charakteryzujący się rozszerzeniem .html, kodowaniem UTF-8 i możliwością otwarcia bez serwera w Microsoft Edge, Google Chrome albo Firefox.

Jak utworzyć index.html w Explorerze VS Code?

W panelu Explorer kliknij ikonę New File przy nazwie folderu vscode-start, wpisz index.html i naciśnij Enter. Jeśli plik nie ma rozszerzenia .html, VS Code nie włączy właściwego kolorowania składni, a podpowiedzi HTML mogą działać słabiej.

• index.html – nazwa jest standardem startowym dla prostych stron i serwerów WWW.
• Ctrl+S – skrót zapisuje plik i powinien wejść w nawyk, nawet jeśli później włączysz Auto Save.
• UTF-8 – domyślne kodowanie obsługuje polskie znaki bez dodatkowej konfiguracji.
• HTML – VS Code rozpoznaje język po rozszerzeniu pliku i włącza kolorowanie składni.
• Panel Problems – część błędów składni może pojawić się na dole edytora, zależnie od języka i rozszerzeń.

Jaki minimalny kod wkleić do pierwszego pliku?

Wpisz prosty szkielet: <!doctype html>, <html lang=”pl”>, <head>, <meta charset=”utf-8″>, <title>Start</title>, <body> i jeden nagłówek lub akapit. Następnie zapisz plik skrótem Ctrl+S. Jeśli uczysz się od zera, przyda się też osobny materiał HTML dla początkujących – pierwszy plik.

1. Utwórz plik index.html w folderze vscode-start, a nie luzem w Pobranych.
2. Wklej minimalny szkielet HTML i ustaw lang=”pl”, aby dokument deklarował język polski.
3. Zapisz plik skrótem Ctrl+S i sprawdź, czy kropka przy nazwie karty zniknęła.
4. Otwórz folder projektu w Eksploratorze Windows i dwukliknij index.html.
5. Jeśli przeglądarka nie pokazuje zmian, zapisz plik ponownie i odśwież stronę klawiszem F5.

Czy Live Server jest obowiązkowy do podglądu?

Live Server nie jest obowiązkowy dla jednego pliku HTML. Jest wygodny, gdy chcesz automatyczne odświeżanie, testujesz ścieżki do plików CSS albo pracujesz z prostym projektem WWW. Do pierwszego testu wystarczy dwuklik index.html w Eksploratorze Windows.

Praktyczny przykład: jeśli masz index.html i style.css w tym samym folderze, ścieżka <link rel=”stylesheet” href=”style.css”> zadziała po dwukliku. Jeśli później dodasz skrypty pobierające dane albo moduły JavaScript, wtedy lokalny serwer, taki jak Live Server, ograniczy błędy wynikające z zabezpieczeń przeglądarki.

Terminal, rozszerzenia i podstawowe ustawienia

Terminal VS Code to zintegrowany panel poleceń PowerShell, Command Prompt, Git Bash albo WSL, charakteryzujący się startem w folderze projektu, obsługą komend systemowych i linkami prowadzącymi bezpośrednio do plików w edytorze.

Gdzie jest terminal i dlaczego startuje w folderze projektu?

Otwórz terminal przez View, Terminal albo skrót Ctrl+`. Po otwarciu folderu vscode-start terminal powinien wskazywać tę lokalizację jako katalog roboczy. Dzięki temu polecenia tworzą pliki w projekcie, a nie przypadkowo w C:\Users\nazwa.

„The shell’s working directory starts at the root of the workspace folder.” – Microsoft, VS Code Terminal docs, 2026

• PowerShell – domyślny terminal w wielu instalacjach Windows 10 i Windows 11 obsługuje polecenia takie jak dir, cd i mkdir.
• Ctrl+` – skrót otwiera lub chowa terminal bez odrywania rąk od klawiatury.
• View, Terminal – ścieżka menu jest bezpieczna dla osób, które nie pamiętają skrótów.
• code –version – komenda działa dopiero wtedy, gdy VS Code jest poprawnie dodany do PATH.
• Git Bash – pojawi się jako profil terminala dopiero po instalacji Git, którą można wykonać według poradnika jak zainstalować Git w Windows.

Jak instalować rozszerzenia z Extension Marketplace?

Kliknij ikonę Extensions po lewej stronie albo użyj Ctrl+Shift+X. Wyszukaj rozszerzenie po nazwie i sprawdź wydawcę. Dla pierwszych projektów WWW sensowne są Polish Language Pack, Prettier i Live Server, ale nie instaluj kilkunastu dodatków naraz.

„Extensions have the same permissions as VS Code itself” – Microsoft, Extension Marketplace, 2026

To ważne zdanie bezpieczeństwa: rozszerzenie nie jest tylko motywem graficznym. Może czytać pliki projektu, uruchamiać procesy i dodawać komendy do Command Palette, dlatego wybieraj dodatki z dużą liczbą instalacji, aktualizowane i publikowane przez rozpoznawalnych autorów.

Jak ustawić Auto Save, Format On Save i motyw?

Auto Save włączysz przez File, Auto Save albo przez Settings po skrócie Ctrl+,. W ustawieniach wyszukaj Auto Save, Format On Save, Default Formatter oraz Color Theme. Prettier ustawiaj jako domyślny formatter dopiero wtedy, gdy faktycznie formatujesz HTML, CSS lub JavaScript.

1. Wejdź w File, Auto Save, jeśli chcesz zapisywanie bez ciągłego Ctrl+S.
2. Otwórz Settings skrótem Ctrl+, i wyszukaj Format On Save.
3. Ustaw Default Formatter na Prettier, jeśli rozszerzenie Prettier jest zainstalowane i aktywne.
4. Wybierz motyw przez Command Palette i wpisz Preferences: Color Theme.
5. Jeśli formatowanie psuje układ pliku, wyłącz Format On Save dla workspace i porównaj efekt.

Kiedy instalować Node.js, Git i dodatkowe narzędzia?

Node.js nie jest wymagany do prostego HTML i CSS. Przyda się dopiero przy npm, Vite, React, Vue lub narzędziach budujących projekt. Git nie jest częścią VS Code, ale edytor wykryje go po instalacji i pokaże panel Source Control. Jeśli dopiero zaczynasz, najpierw opanuj folder, index.html, terminal i zapis pliku, a dopiero później przechodź do Git i npm.

Test poprawnej konfiguracji

Test poprawnej konfiguracji VS Code to szybka kontrola instalacji, ścieżki PATH, zapisu plików, działania rozszerzeń i panelu Problems, charakteryzująca się tym, że nie wymaga reinstalacji programu ani kasowania folderu projektu.

Jak sprawdzić Command Palette i podstawowe komendy?

Naciśnij Ctrl+Shift+P i wpisz kilka fraz: Settings, Color Theme, Format Document, Extensions. Jeśli lista komend filtruje się natychmiast, interfejs VS Code działa poprawnie. Command Palette jest też miejscem, gdzie rozszerzenia dodają własne polecenia, więc po instalacji Live Server możesz tam znaleźć komendę związaną z uruchomieniem podglądu.

• Ctrl+Shift+P – otwiera Command Palette i pozwala wyszukać niemal każdą funkcję edytora.
• Ctrl+P – służy do szybkiego otwierania plików w aktualnym folderze projektu.
• Panel Problems – pokazuje błędy i ostrzeżenia wykryte przez język lub rozszerzenia.
• Explorer – po lewej stronie powinien nadal pokazywać folder vscode-start oraz index.html.
• Settings – zmiany ustawień są stosowane od razu, więc nie trzeba restartować edytora po każdej opcji.

Co oznacza brak komendy code w terminalu?

W terminalu wpisz code –version. Jeśli zobaczysz numer wersji, identyfikator commita i architekturę, PATH działa. Jeśli pojawia się komunikat, że code nie jest rozpoznawane, zamknij terminal, uruchom go ponownie, a potem zrestartuj VS Code. Dopiero po tych krokach sprawdzaj instalator.

1. Uruchom View, Terminal i wpisz code –version.
2. Jeśli komenda działa, wpisz code . w folderze projektu i sprawdź, czy otwiera bieżący katalog.
3. Jeśli komenda nie działa, zamknij wszystkie okna terminala, bo PATH jest odczytywany przy starcie powłoki.
4. Jeśli problem zostaje, uruchom instalator User setup ponownie i sprawdź opcję Add to PATH.
5. Nie usuwaj folderu C:\Users\nazwa\Documents\vscode-start, bo problem dotyczy edytora, nie twoich plików.

Czy reinstalacja VS Code usuwa projekty?

Reinstalacja Visual Studio Code nie usuwa folderów projektu zapisanych w Dokumentach, Pulpicie albo repozytoriach Git. Może natomiast zresetować część ustawień programu, jeśli celowo usuniesz dane użytkownika VS Code z AppData. Przed naprawą samego edytora zrób kopię folderu projektu na dysk zewnętrzny lub do ZIP, szczególnie gdy masz tam pliki bez kopii w Git.

W przypadkach, które prowadziłem u początkujących użytkowników, najczęstsze objawy nie wymagają reinstalacji: brak code w PATH, nieotwarty folder, zła nazwa pliku index.html.txt, wyłączone rozszerzenie albo brak zapisu Ctrl+S. Przy większych problemach użyj też poradnika VS Code najczęstsze problemy oraz podstawowego wyjaśnienia Visual Studio Code co to jest.

Najczęściej zadawane pytania

Czy instalacja VS Code usuwa moje pliki?

Nie, instalacja edytora nie usuwa projektów zapisanych w Dokumentach, na Pulpicie albo w innym wybranym folderze. Visual Studio Code jest programem, a pliki projektu są osobnymi danymi użytkownika. Ryzyko pojawia się dopiero wtedy, gdy ręcznie usuwasz folder projektu albo kasujesz dane w AppData bez kopii.

Czy trzeba instalować Node.js razem z VS Code?

Nie trzeba instalować Node.js do prostego HTML i CSS. Node.js jest potrzebny głównie do npm, Vite, React, Vue, Angular i narzędzi uruchamianych z terminala. Na pierwszą lekcję wystarczy VS Code, index.html i przeglądarka.

Co zrobić, gdy komenda code nie działa w terminalu?

Najpierw zamknij terminal i otwórz go ponownie, bo zmienna PATH jest odczytywana przy starcie powłoki. Jeśli to nie pomaga, zrestartuj VS Code i wpisz code –version jeszcze raz. Gdy nadal pojawia się błąd, uruchom instalator ponownie i sprawdź, czy opcja Add to PATH była zaznaczona.

Czy trzeba ufać każdemu folderowi w VS Code?

Nie, ufaj tylko folderom, których źródło znasz. Folder utworzony samodzielnie w Dokumentach możesz zwykle oznaczyć jako zaufany. Projekt pobrany z internetu najpierw otwórz w Restricted Mode i sprawdź pliki konfiguracyjne, skrypty oraz rozszerzenia wymagane przez workspace.

Jakie rozszerzenia zainstalować na początku?

Na start wystarczą Polish Language Pack, Prettier i ewentualnie Live Server. Polish Language Pack pomaga osobom, które wolą polski interfejs, Prettier porządkuje formatowanie kodu, a Live Server ułatwia podgląd strony. Nie instaluj wielu podobnych formatterów naraz, bo mogą nadpisywać sobie ustawienia.

Czy Live Server jest potrzebny do pierwszego pliku HTML?

Nie, pierwszy index.html możesz otworzyć dwuklikiem w przeglądarce. Live Server jest wygodny, gdy chcesz automatyczne odświeżanie i podgląd pod lokalnym adresem. Jeśli dopiero sprawdzasz, czy VS Code działa, prostszy test przez plik lokalny jest wystarczający.

Dlaczego VS Code pyta o Workspace Trust?

VS Code pyta o zaufanie, ponieważ projekty mogą zawierać skrypty, ustawienia i rozszerzenia uruchamiające kod na komputerze. To zabezpieczenie jest szczególnie ważne dla paczek ZIP pobranych z internetu i nieznanych repozytoriów. Przy własnym folderze testowym możesz zaufać projektowi, ale przy cudzym kodzie najpierw sprawdź zawartość.

Czy można używać VS Code bez konta Microsoft?

Tak, Visual Studio Code działa bez logowania do konta Microsoft. Konto jest potrzebne dopiero do funkcji synchronizacji ustawień, części usług chmurowych albo integracji, które samodzielnie włączysz. Do lokalnej nauki HTML, terminala i rozszerzeń konto nie jest wymagane.

Źródła i literatura

Dokumentacja oficjalna

Poniższe źródła są dokumentacją producenta i najlepiej nadają się do weryfikacji instalacji, PATH, Workspace Trust, terminala oraz Extension Marketplace.

1. Microsoft, Visual Studio Code – Installing Visual Studio Code on Windows, 2026, https://code.visualstudio.com/docs/setup/windows.
2. Microsoft, Visual Studio Code – Get Started Tutorial, 2026, https://code.visualstudio.com/docs/getstarted/getting-started.
3. Microsoft, Visual Studio Code – Extension Marketplace, 2026, https://code.visualstudio.com/docs/configure/extensions/extension-marketplace.
4. Microsoft, Visual Studio Code – Workspace Trust, 2026, https://code.visualstudio.com/docs/editing/workspaces/workspace-trust.
5. Microsoft, Visual Studio Code – Integrated Terminal, 2026, https://code.visualstudio.com/docs/terminal/getting-started.

Zakres techniczny

Artykuł dotyczy lokalnej instalacji edytora kodu Windows i nie wymaga zmian w rejestrze, usuwania profilu użytkownika ani kasowania projektów. Przy komputerze firmowym stosuj polityki administratora i nie omijaj ograniczeń nałożonych przez dział IT.