Podstawowe narzędzia programisty JS

Jak bezboleśnie i z przyjemnością rozwijać oprogramowanie

Cześć!

Kim jestem?

  • Wielki fan finansów, Open-Source i technologii
  • Lubię grać w gry (zarówno te cyfrowe, jak i analogowe)
  • i oglądam zdecydowanie zbyt dużo seriali ;)
  • Ponad 16 lat doświadczenia przy tworzeniu projektów webowych
  • Kiedyś co-founder i CTO w małym start-upie
  • Obecnie Senior Fullstack Engineer @
  • Mam obsesję na punkcie produktywności i jakości oprogramowania (w tej kolejności)

Założenia tej prelekcji

Czego się spodziewać?

  • Ogólny przegląd technik
    • Bez szczegółów konfiguracji
    • Podobne rozwiązania mogą zostać zastosowane w innych stosach technologicznych
  • Subiektywny przegląd narzędzi
    • Konkretne rozwiązania to jedynie przykłady
    • Korzystałem z nich osobiście
    • ...lub bardzo bym chciał :)
  • Korzystam z WebStorma, ale podobne rozwiązania istnieją też dla VS Code

Dlaczego warto rozmawiać o podstawach?

A w szczególności o konfiguracji środowiska i projektu?

  1. Łatwo o nich zapomnieć
  2. Najlepszy stosunek wysiłku do korzyści
  3. Nigdy nie jest za późno, aby je wprowadzić
  4. Dobry sposób na uniknięcie podstawowych błędów
  5. Najlepsza metoda obrony przed bylejakością

Współdzielenie konfiguracji edytora

Jak to zrobić i dlaczego warto?

  • Jeżeli to możliwe, wybierzcie jedno środowisko
  • JetBrains / VS Code to najpopularniejsze rozwiązania
  • Upewnijcie się, że wszyscy używają tych samych ustawień
    • Reguły formatowania kodu w IDE
    • Połączenia do baz danych
    • Wtyczki IDE
    • Konfiguracja struktury projektu
    • Domyślne ustawienia uruchamiania / debugowania

Współdzielenie konfiguracji edytora

WebStorm i inne IDE JetBrains

  • Nie dodawajcie .idea/ do .gitignore
  • Dodajcie te pliki do repozytorium:
    • .idea/project-name.iml - struktura projektu
    • .idea/watcherTasks.xml
    • .idea/jsLibraryMappings.xml
    • .idea/vcs.xml - ustawienia repozytorium
    • .idea/modules.xml
    • .idea/dataSources.xml - lista domyślnych połączeń do baz danych
    • .idea/externalDependencies.xml - konfiguracja wymaganych wtyczek IDE
  • Nie dodawajcie tych (WebStorm powinien stworzyć domyślny .gitignore):
    • .idea/shelf/
    • .idea/workspace.xml
    • .idea/httpRequests/

Współdzielenie konfiguracji edytora

Visual Studio Code

Współdzielenie konfiguracji edytora

.editorconfig

  • Podstawowe reguły formatowania kodu
  • Standard wspierany przez większość edytorów/IDE
    warto dodać, nawet jeżeli te same ustawienia są skonfigurowane w innym miejscu
  • Upewnijcie się, że nie ma rozbieżności ustawień z innymi narzędziami

                        root = true

                        [*]
                        end_of_line = lf
                        insert_final_newline = true
                        charset = utf-8

                        [**.{js,ts,json}]
                        indent_style = space
                        indent_size = 4

Więcej szczegółów: www.editorconfig.org

Uproszczenie tworzenia środowiska

direnv & nvm

Jednolite lokalne środowisko:

  • Domyślny .env.local
  • .nvmrc - konfiguracja wersji node
  • direnv do automatycznego ładowania środowiska
    • Modyfikacja $PATH, aby dodać potrzebne komendy
    • Ładowanie zmiennych środowiskowych do aktywnej sesji konsoli
    • Automatyczne wywołanie nvm install / nvm use

Uproszczenie tworzenia środowiska

Przydatne rozwiązania

  • Domyślna konfiguracja połączeń do baz danych
    • Skrypty w package.json
    • Współdzielona konfiguracja w IDE
  • Dockerfile i/lub docker-compose.yml
  • Inne przydatne narzędzia:
    • https://devenv.sh/
    • GitHub Codespaces
    • Okteto

Ergonomia pracy z kodem

Emmet - lepsze snippety

Emmet to wtyczka do wielu popularnych edytorów tekstu, która znacznie usprawnia pracę w HTML i CSS.
Tworzy złożony kod na podstawie prostego języka bazującego na selektorach CSS.

Ergonomia pracy z kodem

Nawigacja po kodzie

  • Zdefiniujcie strukturę projektu

    • wykluczone node_modules z wyników wyszukiwania
    • zaznaczony katalog z testami
  • Zdefiniowane zakresy plików w IDE i przypiszcie im kolory
    • projekty klient/serwer
    • oddzielne pakiety NPM
    • moduły
  • "Go to usage/definition" zamiast globalnej wyszukiwarki
  • TypeScript lub JSDoc do lepszej nawigacji

Ergonomia pracy z kodem

Domyślna konfiguracja uruchamiania/debugowania

  • Zdefiniujcie konfigurację uruchamiania/debugowania
    • dla lokalnego środowiska
    • dla różnych rodzajów testów
  • Zapiszcie ją w repozytorium

Ergonomia pracy z kodem

Akcje przy zapisie pliku

  1. Formatowanie kodu
  2. Optymalizacja importów
  3. Automatyczna naprawa błędów lintera

Ergonomia pracy z kodem

Narzędzia AI

  • GitHub Copilot znacznie przyspiesza wiele żmudnych zadań:
    • Podstawowe auto-uzupełnianie kodu
    • Tłumaczenia
    • Pisanie wyrażeń regularnych
    • Pisanie testów

Automatyzacja

lint-staged

  • Proste narzędzie do uruchamiania innych skryptów tylko dla nowo zmienionych plików
  • Znacznie przyspiesza czas działania linterów / formatowania kodu
  • Pozwala na stopniowe wprowadzenie reguł / narzędzi
  • Bardzo dobrze integruje się z husky

Automatyzacja

git hooks & husky

  • Pozwalają na uruchomienie skryptów przed commit/push do repozytoriun
  • Można je wykorzystać do odpalania lintera / formatowania kodu
  • Bardzo przydatna biblioteka: husky
    • Automatycznie tworzy pliki w .git/hooks podczas npm install
    • Zapewnia jednolitą konfigurację git hooks w zespole

Kontrola jakości kodu

Linter - np. ESLint

  • Integracja z IDE
    • Naprawa problemów przy zapisie
    • Podświetlanie ostrzeżeń/błędów
  • Uruchamianie przy zapisie do repozytorium
    • Integracja z git hooks
    • Przetwarzanie tylko zmodyfikowanych plików z lint-staged
  • Uruchamianie w CI£
    • Blokada merge, jeżeli są błędy
    • Przetwarzanie tylko zmodyfikowanych plików
  • Dodatkowe punkty za tworzenie własnych reguł!

Unikanie częstych błędów

Danger.js

  • Can write PR comments and block merges
  • Pozwala na pisanie własnych reguł i kontrolę możliwości merge PR
  • Sprawdzajcie reguły podczas zapisu do repozytorium
  • Weryfikujcie ponownie w CI
  • Twórzcie nowe reguły jako wnioski z incydentów
  • Proste pomysły dobrych reguł:
    • package.json zmieniony, ale brak zmian w package-lock.json
    • brakujący wpis CODEOWNERS dla nowego pliku
    • zapobieganie automatycznych migracji dla ogromnych tabel SQL
    • powiadom odpowiednie osoby o wykorzystaniu metod/klas/modułów

Kontrola jakości kodu

Zewnętrzne narzędzia

  • Dostarczają bardziej zaawansowane reguły
  • Pozwalają na śledzenie stanu projektu dzięki metrykom
  • Popularni dostawcy:
    • SonarQube
    • Codeclimate
    • Embold

Inne narzędzia

Warto sprawdzić

  • gitleaks
  • .editorconfig
  • własne .gitattributes
  • security scanning tools (e.g. Snyk)
  • container scanning tools (e.g. Spectral)
  • Emmet