モチベーション
tslintについては、これまで誰かが作ってくれた設定ファイルを使ってきました。 しかし、そろそろちゃんと理解したいと思い、諸々調べてみました。 この資料に tslint を一から設定する方法を記載し、自分の理解を整理しようとおもいます。
※ 理解が間違っている点ありましたら、コメント貰えたら嬉しいです！
そもそもLint って何？
そもそもLintについて理解がふわっとしていたので、wikipediaを読みました。linterとはソースコードを解析してプログラムの保守性・安全性を保ち、機能的なバグを防ぐためのもの。特にJavaScriptやPythonなどのコンパイルフェーズを持たないものにとっては、実行する前にバグを見つけられることができるので有用とのことでした。
tslint 導入手順
- install
- configuration presetsの導入
- 適用するrulesの選択
tslint install
上記ドキュメントを見て、tslintを導入していきます。 下記のコマンドをポチッと実行しましょう。
yarn add -D tslint
Exit Codesは、ルールを詳細に設定する際に必要となるため、ここにあるということだけは覚えておくと良いと思います。
Exit Codes 0: success 1: cliの引数エラー 2: Linting failed
configuration presets の導入
次は、下記のlinkからLintの設定方法について確認していきます。 Configuring TSLint
色々書いてありますが、最初は extends と Configuration presets だけ見ておけば良いでしょう。extendsには下記のような説明が記載されています。
The name of a built-in configuration preset (see built-in presets below), or a path or array of paths to other configuration files which are extended by this configuration.
extendsは、build-inのプリセット設定ファイルを入れたり、設定ファイルのパスを記載するプロパティです。ここに記載するべき設定ファイルは、Configuration presets にて説明されています。Configuration presetsには、下記3つの設定ファイルが存在します。
| presets | description |
|---|---|
| tslint:recommended | stable な設定ファイル |
| tslint:latest | tslint:recommendedと新しく追加されたルールを含む |
| tslint:all | 全てのチェックを行う設定ファイル |
さて、ミニマムでtslintを使ってみます。
最もスタンダードそうな tslint:recommended を extends に記載します。
このとき設定ファイルの名前は tslint.json とする必要があります。
// tslint.json
{
"extends": ["tslint:recommended"]
}
この設定でlintを実行していきましょう。下記のような結果が返ってきます。
$ yarn tslint 'src/**/*.ts' ERROR: /xxx/iiopt/src/cli.ts[22, 1]: Exceeds maximum line length of 120 ERROR: /xxx/iiopt/src/cli.ts[29, 9]: The key 'alias' is not sorted alphabetically ERROR: /xxx/iiopt/src/cli.ts[30, 23]: Missing trailing comma
vscode上で確認してみると、lintでErrorとなっている場所が、赤くなっていることが確認できます。
ルールの修正
Rule: object-literal-sort-keys
# bad
overwrite: {
type: "boolean",
alias: "o",
default: false,
},
# good
overwrite: {
alias: "o",
default: false,
type: "boolean",
},
ということですね。理由としては、下記のように記載されています。
Useful in preventing merge conflicts
overwrite objectにおいて、typeは渡されるデータの型、default は値が渡されなかった際のデフォルト値です。なのでこのルールに従うと、typeの前に defaultを渡す必要が出てきます。僕としては、まず型の情報を確認し、その後にデフォルト値を渡した方がしっくりくるので、それを阻むこのルールは取り除くことにしました。そのtslint.jsonの設定は下記のようになります
{
"extends": ["tslint:recommended"],
"rules": {
"object-literal-sort-keys" : false
}
}
vscode上でも怒られなくなりました。
まとめ
tslintの設定は一気にやろうとすると混乱するので、特に理由がない限り最初は configuration presetsを使って、ERRORになった部分を一つずつ確認し、ルールを作っていくとよいのかなぁと思いました。
補足: 修正しなかったルールとその理由
trailing comma
$ yarn tslint 'src/**/*.ts' ERROR: /xxx/iiopt/src/cli.ts[30, 23]: Missing trailing comma <= このエラー
trailing commaに関しては、下記のドキュメントに記載されています。 Rule: trailing-comma
# NG
overwrite: {
type: "boolean",
alias: "o",
default: false
},
overwrite: {
type: "boolean",
alias: "o",
default: false,
},
この理由について調査してみると、airbnbの資料にそれっぽい説明がありました。
GitHub - airbnb/javascript: JavaScript Style Guide
Why? This leads to cleaner git diffs. Also, transpilers like Babel will remove the additional trailing comma in the transpiled code which means you don’t have to worry about the trailing comma problem in legacy browsers.
git diffsがなくなるから良い。legacy browsersでエラーになることがあったけど、Babelを使えば問題無いよね。とのこと。納得したので、このルールは適用しようと思います。
