← Przygotowanie

Lekcja 2 z 4 ⏱ 15 minut

Instalacja edytora VS Code

Zainstalujemy program, w którym będziesz pisać kod. Jest darmowy i używają go nawet profesjonaliści.

Czym jest VS Code i dlaczego akurat ten

Visual Studio Code (wszyscy mówią po prostu VS Code) to edytor – program do pisania kodu. Wyobraź go sobie jak Word, tylko dla programistów: koloruje kod, podpowiada i wskazuje błędy. Jest całkowicie darmowy, a ludzie w największych firmach na świecie budują w nim strony. Nauczysz się go teraz i zostanie z tobą na długo.

⚠️

Instaluj z dorosłym obok. Niech rodzic usiądzie z tobą – sama instalacja jest bezpieczna, ale dobrze, żeby wiedział, co trafia na komputer.

Instalacja na Windows

  1. Otwórz code.visualstudio.com i kliknij duży niebieski przycisk Download for Windows.

  2. Gdy plik się pobierze, kliknij go (znajdziesz go na pasku u dołu albo w folderze Downloads).

  3. Zaakceptuj licencję (zaznacz I accept the agreement), potem po prostu klikaj Next. Na kroku Select Additional Tasks zaznacz Create a desktop icon, żeby mieć ikonę na pulpicie.

  4. Kliknij Install i poczekaj. Na koniec kliknij Finish – VS Code się otworzy.

Instalacja na Mac

  1. Otwórz code.visualstudio.com i kliknij Download for macOS.

  2. Gdy plik się pobierze, znajdź go w folderze Downloads. Jeśli to plik .zip, kliknij go dwukrotnie, żeby rozpakować.

  3. Pojawi się niebieska ikona Visual Studio Code. Przeciągnij ją do folderu Applications. Gotowe, zainstalowane.

  4. Otwórz folder Applications i kliknij dwukrotnie Visual Studio Code, żeby uruchomić. Za pierwszym razem Mac zapyta, czy na pewno chcesz otworzyć – kliknij Open.

Poznaj VS Code

VS Code mówi wieloma językami – zróbmy szybki rekonesans:

  1. Na lewym pasku kliknij ikonę ułożonych kwadratów (Extensions). Wygląda jak cztery małe klocki.

  2. W polu wyszukiwania u góry wpisz Prettier (albo nazwę motywu, który ci się podoba, np. Dracula albo Night Owl).

  3. Wybierz coś, co ci pasuje, i kliknij Install obok.

  4. W prawym dolnym rogu może wyskoczyć małe okienko – zrób to, co sugeruje. VS Code od razu zastosuje twój wybór.

Sprawdź się: VS Code się otwiera i wygląda gotowy do pracy, z menu u góry (File, Edit, Selection…). Jeśli tak – wszystko gra, twój warsztat jest gotowy!

Co wyniesiesz z tej lekcji