Sider Blog

コードレビュー自動化サービス「Sider」を運営するSider株式会社のコーポレートブログです。



トップ > TSLint > TypeScriptの静的コード解析ツールTSLintを使い、コードレビューの前工程でコードをチェックしまいましょう

TypeScriptの静的コード解析ツールTSLintを使い、コードレビューの前工程でコードをチェックしまいましょう

TSLint TypeScript コードレビュー

素のJavaScriptをチーム内でそのまま使うのを嫌がる方は少なくありません。型の定義ができなかったり、括弧が多く、分かりづらいコードになりやすいといった問題がよく言われます。そこで注目されているのがMicrosoft社がメインで開発を行っている代替言語のTypeScriptです。TypeScriptは変換処理を行うとJavaScriptになります。

そんなTypeScriptであってもチーム開発においては適切にコードレビューを行う必要があります。それをレビューの前工程、開発段階で少しでも楽にすることが出来る、静的コード解析ツールであるTSLintを紹介します。

TSLintのインストール

TSLintのインストールは npm コマンドで行います。

$ npm install tslint -g

インストールすると tslint コマンドが使えるようになります。

TSLintの使い方

TSLintは解析対象の .ts ファイルを指定して実行します。パターンで記述することで複数ファイルも指定可能です。実行すると、修正した方が良いポイントについて出力されます。

$ tslint './*.ts'

ERROR: ajv.d.ts[156, 21]: Array type using 'Array<T>' is forbidden for simple types. Use 'T[]' instead.
ERROR: ajv.d.ts[15, 28]: Don't use 'Object' as a type. Avoid using the `Object` type. Did you mean `object`?
ERROR: ajv.d.ts[7, 13]: interface name must start with a capitalized I
ERROR: ajv.d.ts[219, 13]: interface name must start with a capitalized I

後はこの指摘事項に沿って修正していくだけです。

自動修正する

よくある指摘（例えば行の最後にスペースが入っているなど）であれば --fix オプションを使って自動修正ができます。

$ tslint --fix './*.ts'

このオプションで修正されないのは一行の最大文字数であったり、JSDocの記述、変数名の付け方（インタフェースは大文字のIではじまるべき）などについてです。こうした指摘については手動で対応していく必要があります。

設定を変更する

TSLintも他の解析器同様に設定ファイルで動作を変えられるようになっています。まず、 --init オプションを使ってベースになる設定ファイル tslint.json を生成します。内容としては次のようになります。

$ cat tslint.json 
{
    "defaultSeverity": "error",
    "extends": [
        "tslint:recommended"
    ],
    "jsRules": {},
    "rules": {},
    "rulesDirectory": []
}

この設定ファイルを編集することで指摘事項を制限できます。

出力フォーマットを変更する

デフォルトでは標準出力にエラーメッセージを出すだけですが、 --format オプションを指定することで異なるフォーマットで出力できるようになります。例えば json と指定すれば結果がJSONになります。

[{"endPosition":{"character":33,"line":14,"position":658},"failure":"Don't use 'Object' as a type. Avoid using the `Object` type. Did you mean `object`?","name":"ajv.d.ts","ruleName":"ban-types","ruleSeverity":"ERROR","startPosition":{"character":27,"line":14,"position":652}},{"endPosition":{"character":25,"line":195,"position":7585},"failure":"Don't use 'Object' as a type. Avoid using the `Object` type. Did you mean `object`?","name":"ajv.d.ts","ruleName":"ban-types","ruleSeverity":"ERROR","startPosition":{"character":19,"line":195,"position":7579}}]

対応しているフォーマットとしてはJSONの他、 stylish / verbose / pmd / msbuild / checkstyle / vso / fileslist / codeFrame になります。

TypeScriptは大手企業を中心に広まっていますが、Visual Studio Codeなどのカジュアルなプログラミングエディタがサポートしていることもあって中小企業やスタートアップでも採用するケースが増えています。自社でTypeScriptを使っていくならばTSLintを使っていきましょう。

私たちの提供するSideCIはTSLintに対応しています。個人の開発であればローカルにインストールすれば良いですが、チーム開発であればクラウド上で自動でコードレビューを行ってくれる仕組みは効率的な開発体制につながるはずです。

SideCIは無料トライアルを提供しています。ぜひお試しください。