TsLint – utrzymywanie kodu w jednym stylu i zapobieganie bólowi głowy

TsLint to TypeScriptowa wersja JsLinta…

Linty to programy które sprawdzają twój kod pod względem:

• Czytelności
• Łatwość utrzymania
• Błędy funkcjonalne

TsLint w projekcie TheShipGame jest uruchamiany przez WebPacka:

{
    test: /\.tsx?$/,
    enforce: "pre",
    loader: 'tslint-loader'
}

test oznacza, że jest dopasowany do rozszerzeń .ts oraz .tsx. .ts to rozszerzenie standardowe dla TypeScript, natomiast .tsx oznacza podobnie do .jsx pliki korzystające z rozszerzonej składni używanej np. przez bibliotekę React.

enforce: "pre" oznacza loadera, który wykonuje się przed innymi. W WebPacku 1.0 preloadery oznaczało się w osobnej sekcji preLoaders:([]). Od WebPacka 2.0 wszystkie loadery znajdują się w jednej tablicy, te które mają się wykonać wcześniej są oznaczone wspomnianym enforce: "pre", natomiast te które mają się wykonać później oznaczane, są enforce: "post".

loader oznacza plugin-programik, który wykonuje całą brudną robotę. Instalacja takiego pluginu nie może być łatwiejsza.

npm install tslint-loader --save-dev

Przypomnę, że --save-dev zapisuje informacje o pakiecie w pliku package.json, to pomocne, gdy chcemy odtworzyć nasze środowisko programistyczne na innym komputerze. Wtedy wykonanie komendy npm install spowoduje odczyt listy pakietów z pliku package.json, ściągnięcie ich do katalogu node_modules.

TsLint sprawdza nasz kod na podstawie reguł – rules. Zawartych w pliku tslint.json w katalogu głównym naszego projektu.

Mój plik tslint.json składa się z dwóch głównych części

rulesDirectory wskazuje tam katalogi w których zdefiniowane, są reguły wykorzystane w drugiej części – "rules".

Zbiory reguł można dodać do swojego projektu poprzez:

npm install tslint-eslint-rules --save-dev
npm install tslint-microsoft-contrib --save-dev

To jakie i jak mocno chcemy się ich trzymać zależy tylko od nas. Ciekawe konfiguracje plików tslint.json można GitHubie.

Microsoft ma swoje rekomendacje, których się mocno nie trzyma w innym swoim projekcie jakim jest TypeScript 🙂

Reguły dotyczą wszystkiego (moje ulubione):

• Wymuszenie PascalCase dla nazw klas: "class-name": true
• Zakaz używania console: "no-console": [true, "debug", "info", "log", "time", "timeEnd", "trace"]
• Wymuszenie używania średników: "semicolon": [true, "always"]
• Zakaz używania nulla (niech żyje undefined!): "no-null":true
• Wymuszenie używania pojedynczych stringów 'string': "quotemark": [true, "single"]