Jakość tworzonego kodu jest jednym z kluczowych czynników pozwalających utrzymywać szybkie tempo wdrażania zmian a także sprawia, że długoletni rozwój oprogramowania nie staje się coraz większą udręką. W tym artykule chciałbym wymienić kilka zagadnień i narzędzi, które mocno wspierają utrzymywanie wysokiej jakości kodu w aplikacjach frontendowych.

Typowanie w wersji strict

Ciężko już w dzisiejszych czasach wyobrazić sobie większe aplikacje pisane w JavaScripcie bez wsparcia typowania (zazwyczaj z wykorzystaniem TypeScriptu). Ale aby nie było to pisane niesolidnie, ale rzeczywiście stanowiło silną tarczę ochronną przed błędami, powinniśmy dążyć do tego, aby zawsze mieć skonfigurowane silne typowanie (flaga strict ustawiona na true w przypadku TypeScriptu).

ESLint

ESLint zapewnia statyczną analizę kodu w celu szybkiego wykrywania błędów. Możemy rozpocząć od domyślnej konfiguracji wykorzystując rekomendowane zbiory reguł zależnie od używanych bibliotek, np.:

"eslint:recommended"
"plugin:cypress/recommended"
"plugin:prettier/recommended"
"plugin:@typescript-eslint/recommended"
"plugin:react/recommended"
"plugin:@angular-eslint/recommended"

Możemy dodawać pojedyncze reguły, np. wychwytujące użyty console.log:

"no-console": ["error"]

Zakres konfiguracji jest naprawdę spory, warto zapoznać się z dokumentacją.

Prettier

Prettier to formatter kodu sprawiający, że wszyscy developerzy uczestniczący w rozwoju produktu są zmuszeni do używania jednego stylu formatowania, przez co kod aplikacji jest łatwiejszy do czytania. Zasady formatowania warto ustalić w obrębie konkretnego zespołu.

GIT pre-commit hook i CI/CD

Aby egzekwować wszystkie powyższe standaryzacje powinniśmy dodać weryfikację ESLint i Prettier na poziomie CI/CD, a najlepiej już w momencie próby zrobienia commita za pomocą pre-commit hooka.

Poniżej znajduje się przykład implementacji wspomnianego hooka, dodanie NPMowego skryptu prepare do package.json który uruchomi się automatycznie wraz z uruchomieniem komendy npm install. Warto zwrócić uwagę na to, że zadziała również w przypadku npm publish i npm pack.

{
  "scripts": {
    "prepare": "cp scripts/pre-commit .git/hooks/ && chmod +x .git/hooks/pre-commit"
  }
}

Plik scripts/pre-commit:

#!/bin/sh

printf "\n *** Running ESLint, Prettier and unit tests *** \n"

npm run lint
npm run prettier
npm run test

status=$?
exit $status

SonarLint

SonarLint to rozszerzenie IDE umożliwia analizę kodu w czasie rzeczywistym w celu wykrycia błędów i luk bezpieczeństwa w kodzie źródłowym zapewniając wskazówki jak je rozwiązać.

Podsumowanie

Mam nadzieję, że przedstawiona tutaj garść narzędzi przyda się Wam jako wsparcie podczas rozwoju projektów frontendowych. Jeżeli znasz inne narzędzia pozwalające utrzymywać wysoką jakość kodu podziel się nim w komentarzu.