Konfiguracja edytora

Twój edytor

VS Code jest obecnie jednym z najbardziej popularnych edytorów. Posiada ogromną bazę rozszerzeń i doskonale integruje się z popularnymi usługami, jak np. GitHub. Większość z funkcjonalności wymienionych poniżej można także dodać do VS Code w formie rozszerzeń, co sprawia, że jest bardzo dobrze konfigurowalny!

Społeczność Reacta używa także:

• WebStorm to zintegrowane środowisko deweloperskie zaprojektowane specjalnie do pracy z JavaScriptem.
• Sublime Text posiada wbudowane wsparcie dla JSX oraz TypeScriptu, podświetlanie składni i autouzupełnianie.
• Vim to elastyczny edytor tekstu stworzony do efektywnego pisania i modyfikowania dowolnego tekstu. W większości systemów UNIX-owych oraz w Apple OS X występuje pod nazwą “vi”.

Zalecane funkcje edytora tekstu

Niektóre edytory mają te funkcje wbudowane, inne wymagają instalowania rozszerzeń. Dla pewności sprawdź, jakie wsparcie dla nich ma twój edytor!

Linting

Lintery kodu znajdują problemy w kodzie podczas jego pisania i pomagają je zawczasu naprawić. Popularnym, open-sourcowym linterem dla JavaScriptu jest ESLint.

• Zainstaluj ESLinta z konfiguracją zalecaną dla Reacta (upewnij się, że masz zainstalowany Node!)
• Zintegruj ESLint z VS Code za pomocą oficjalnego rozszerzenia

Upewnij się, że masz włączone w projekcie wszystkie reguły z eslint-plugin-react-hooks. Są one istotne, ponieważ wychwytują zawczasu większość poważnych błedów. Są one domyślnie włączone w rekomendowanym zestawie reguł eslint-config-react-app.

Formatowanie

Ostatnia rzecz, jaka powinna się wydarzyć po udostępnieniu twojego kodu współtwórcom projektu, jest dyskusja pt. tabulatory vs spacje! Na szczęście jest Prettier, który posprząta w twoim kodzie, formatując go według ustalonych reguł. Uruchom Prettiera, a wszystkie tabulatory w kodzie zamienią się na spacje; wszelkie wcięcia, cudzysłowy i apostrofy itp. również zostaną podmienione na podstawie ustawień. Idealnie by było, gdyby Prettier był uruchamiany przy każdym zapisaniu pliku, automatycznie aplikując te reguły za ciebie.

Aby zainstalować rozszerzenie Prettier dla VSCode, musisz:

1. Uruchomić VS Code
2. Użyć komendy szybkiego otwarcia (naciśnij Ctrl/Cmd + P)
3. Wkleić w pole ext install esbenp.prettier-vscode
4. Nacisnąć Enter

Formatowanie podczas zapisu

Idealnie by było, gdyby kod sam się formatował przy każdym zapisie pliku. VS Code ma do tego specjalny zestaw ustawień!

1. W VS Code naciśnij Ctrl/Cmd + Shift + P.
2. Wpisz “settings”
3. Naciśnij Enter
4. W polu wyszukiwarki wpisz “format on save”
5. Upewnij się, że opcja “format on save” jest zaznaczona!

Jeśli twój zestaw reguł dla ESLinta zawiera reguły dotyczące formatowania, mogą one wchodzić w konflikt z Prettierem. Zalecamy wyłączenie wszystkich reguł formatujących w ESLincie za pomocą wtyczki eslint-prettier, aby wykorzystać ESLinta tylko do wyłapywania błędów logicznych w kodzie. Jeśli chcesz sprawdzić formatowanie plików przed zmergowaniem pull requesta, użyj komendy prettier --check w skrypcie ciągłej integracji (ang. continuous integration).