Jak skonfigurować VS Code pod efektywną pracę z React i TypeScript Część 1

Niedawno musiałem skonfigurować dla siebie na nowo środowisko do tworzenia aplikacji. Pierwszą, jaką podjąłem, była aplikacja Reactowa, dlatego postanowiłem podzielić się tym procesem z Wami. Mój ulubiony edytor to Visual Studio Code. Potrafię również korzystać z Vima (planuję nawet próbę przejścia, przynajmniej czasowo, na NeoVim – napiszę o tym! 😉). Ale na dzień dzisiejszy to VS Code jest tym jedynym edytorem.

Aby w pełni wykorzystać jego możliwości w projektach React + TypeScript, warto poświęcić chwilę na odpowiednią konfigurację. Dobrze skonfigurowany VS Code pozwoli Ci pisać kod szybciej, uniknąć wielu błędów, a także poprawi czytelność i organizację projektu.

W tym wpisie pokażę Ci, jak krok po kroku dostosować edytor, jakie rozszerzenia warto zainstalować oraz jak usprawnić workflow, aby praca z Reactem i TypeScriptem była jeszcze przyjemniejsza i bardziej efektywna.

Gotowa/y? Zaczynajmy!

Instalacja i podstawowa
konfiguracja VS Code

1. Pobranie i instalacja

Jeśli jeszcze nie masz VS Code, pobierz go ze strony oficjalnej i zainstaluj odpowiednią wersję dla swojego systemu operacyjnego. Na Linuxie polecam wersję z paczek .deb lub .rpm, a jeśli używasz Arch Linux – instalację przez yay -S visual-studio-code-bin.

2. Pierwsze uruchomienie i dostosowanie wyglądu

Po instalacji warto od razu dostosować wygląd edytora do własnych preferencji. Moje rekomendacje:

• Motyw kolorystyczny: Dracula Official, One Dark Pro lub Night Owl
• Ikony plików: Material Icon Theme

Możesz je znaleźć w Marketplace (Ctrl + Shift + X, a potem wyszukaj nazwę motywu/ikon).

3. Ustawienia edytora (settings.json)

VS Code daje możliwość dostosowania wielu aspektów edytora poprzez plik settings.json. Aby go otworzyć:

1. Otwórz paletę poleceń (Ctrl + Shift + P).
2. Wpisz „Preferences: Open Settings (JSON)” i wybierz opcję.

Warto dodać kilka przydatnych ustawień:

{
  "editor.formatOnSave": true,
  "editor.tabSize": 2,
  "editor.wordWrap": "on",
  "files.autoSave": "afterDelay",
  "typescript.suggestionActions.enabled": true
}
  

To podstawowa konfiguracja, która automatycznie formatuje kod przy zapisie, ustawia wcięcia na 2 spacje i włącza podpowiedzi dla TypeScriptu.

Niezbędne rozszerzenia

Aby maksymalnie zwiększyć komfort pracy w VS Code, warto skorzystać z kilku rozszerzeń, które nie tylko poprawią jakość kodu, ale także przyspieszą workflow. W tej sekcji przedstawię najważniejsze dodatki, które sprawią, że praca z Reactem i TypeScriptem będzie przyjemniejsza, bardziej uporządkowana i wydajna.

ESLint – automatyczna analiza kodu

🔹 ESLint to niezbędne narzędzie dla każdego programisty Reacta i TypeScriptu. Pomaga wykrywać błędy w kodzie, dba o spójność stylu i zapobiega potencjalnym problemom jeszcze przed uruchomieniem aplikacji.

Jak zainstalować?

1. Otwórz Extensions (Ctrl + Shift + X).
2. Wyszukaj ESLint i kliknij Install.
3. Dodaj plik .eslintrc.json w katalogu głównym projektu:

Kopiuj

{
    "extends": [
        "eslint:recommended", 
        "plugin:react/recommended", 
        "plugin:@typescript-eslint/recommended"
    ]
}
  

4. Upewnij się, że ESLint działa, wpisując w terminalu:

Kopiuj

npx eslint . --fix

  

Prettier – formatowanie kodu

🔹 Prettier automatycznie formatuje kod, poprawiając jego czytelność i zachowując jednolity styl w całym projekcie. Świetnie współpracuje z ESLint.

Instalacja i konfiguracja:

1. Zainstaluj rozszerzenie Prettier – Code formatter.
2. W pliku .vscode/settings.json dodaj:

Kopiuj

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

  

3. Aby automatycznie formatować pliki TypeScript i JSX:

Kopiuj

npx prettier --write src/
  

React Developer Tools – debugowanie komponentów React

🔹 React Developer Tools to must-have dla każdego React Developera. Umożliwia inspekcję komponentów i ich propsów w DevTools.

Jak używać?

1. Po instalacji otwórz DevTools w przeglądarce (F12 lub Ctrl + Shift + I).
2. Znajdziesz tam nową zakładkę „Components”, gdzie możesz podejrzeć strukturę komponentów Reacta.

TypeScript Hero – ulepszone wsparcie dla TypeScript

🔹 To rozszerzenie poprawia wsparcie dla TypeScriptu w VS Code, dodając funkcje takie jak:
✔ Automatyczne importy
✔ Szybkie przechodzenie do definicji plików
✔ Lepsza obsługa podpowiedzi IntelliSense

Instalacja:

1. Wyszukaj w marketplace TypeScript Hero.
2. Po instalacji uruchom ponownie VS Code.

Jest / Testing Library – testowanie kodu

🔹 Jeśli używasz Jest i Testing Library do testowania komponentów React, warto zainstalować rozszerzenia:
✔ Jest – umożliwia uruchamianie testów bezpośrednio w edytorze
✔ ESLint Plugin for Testing Library – wykrywa błędy w testach

Instalacja:

1. Jest: npm install --save-dev jest @testing-library/react
2. ESLint plugin: npm install --save-dev eslint-plugin-testing-library

Dodaj do .eslintrc.json:

{
  "extends": ["plugin:testing-library/react"]
}
  

Path Intellisense i Auto Import – szybsze importowanie plików

🔹 Path Intellisense pomaga w autouzupełnianiu ścieżek do plików, a Auto Import dodaje brakujące importy do kodu.

Instalacja:

1. Zainstaluj Path Intellisense i Auto Import.
2. W pliku .vscode/settings.json ustaw:

Kopiuj

{
  "typescript.preferences.importModuleSpecifier": "relative"
}
  

Error Lens – podświetlanie błędów w kodzie

🔹 Error Lens natychmiast podświetla błędy w edytorze, zamiast ukrywać je w panelu problemów.

Instalacja:

1. Wyszukaj i zainstaluj Error Lens.
2. W .vscode/settings.json możesz dostosować wygląd błędów:

Kopiuj

{
  "errorLens.enabled": true,
  "errorLens.messageBackgroundMode": "message",
  "errorLens.fontSize": "14pt"
}
  

W kolejnym wpisie przejdziemy do kolejnych kroków konfiguracji VS Code dla React i TypeScript 🙂