okruch-kodu

lint-staged czyli jeszcze prostsze lintowanie plików przed commitem

Lepsze jest wrogiem dobrego

Własny skrypt

W jednym z poprzednich wpisów pokazałem skrypt, którego używam jako pre-commit hooka do lintowania zmienionych plików przed commitem.

Mój skrypt robi robotę, ale jest napisany w bashu co ma swoje wady:

Istnieje rozwiązanie, które po pierwsze jest napisane w Javascripcie, po drugie ma prostszą konfigurację, a poznałem je na konferencji ngPoland w zeszłym roku.

Lint-staged

lint-staged to narzędzie, które jego twórcy opisują krótko:

Run linters against staged git files and don’t let slip into your code base!

Zgodnie z opisem lint-staged umożliwia inspekcję plików dodanych do commita.
To jakie pliki mają być badane i jakie komendy mają być “na nich” (pliki pasujące do wzorca zostaną podane jako argument lintera) wykonane definiuje się w obiekcie konfiguracyjnym, który może być sekcją w package.json, osobnym plikiem JSON lub Yaml .lintstagedrc lub plikiem js lint-staged.config.js. Oprócz tych domyślnych źródeł plik konfiguracyjny można wskazać w linii poleceń.

Przykładowa konfiguracja, odpowiadająca mojemu wspomnianemu wcześniej skryptowi, wygląda tak (w formacie JSON):

1
2
3
4
5
{
"linters":{
"*.ts": ["tslint --fix", "eslint --fix", "git add"],
"*.scss": ["stylelint", "git add"]
}

Wzorce nazw plików raczej nie wymagają wyjaśnienia. Komendy są podane w tablicy, więc wykonają się jedna po drugiej. Użycie flagi --fix w linterach oraz git add` spowoduje, że poprawialne błędy zostaną poprawione i commit wykona się już z poprawnymi plikami (o ile nie wystąpią błędy, których linter nie umie naprawić).

Oczywiście, żeby automatycznie wywoływać lint-staged przed commitem trzeba użyć narzędzia do zarządzania gitowymi hookami lub samemu zmienić plik pre-commit w .git/hooks.
Ja używam husky - narzędzia, które w fazie postinstall nadpisuje lokalne hooki wywołaniem poleceń skonfigurowanych w package.json lub pliku konfiguracyjnym. Twórcy lint-staged propagują używanie husky. Konfiguracja jest banalna i wygląda na przykład tak:

1
2
3
4
5
6
7
8
9
{
...
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
...
}

Podsumowanie

Używanie tego typu narzędzi ma same plusy:

wpis dodany 2019-02-11

tematy: