読者です 読者をやめる 読者になる 読者になる

KatsuYuzuのブログ

.NET の開発をメインとした日記です。

Visual StudioでTypeScriptの静的検証ツールtslintを導入する方法

TypeScript始めました。C#erだと1日あればすらすら書けるんじゃないでしょうか。躓いたのは読み込み順序*1とかthisの扱い*2とかJavaScript的な部分。知識として必要になってくるのも、むしろJavaScript。というか、本質的にそう。

環境

  • Visual Studio 2013 update 4
  • TypeScript 1.4
  • Web Essentials 2.5.4

tslint とは

「書き方がルールと違うんじゃないの?」と常々指摘してくれるツールです。
f:id:KatsuYuzu:20150215015258p:plain
余談ですが、勉強会よりもOJTよりも何よりも成長効果があるなと実感中*3。そして無料。無料、大事。同じく検証してくれるReSharperは有料だから……*4

Visual StudioでTypeScriptの静的検証ツールtslintを導入する方法

話はシンプル。拡張機能「Web Essentials」をインストールする。

Web Essentials for Visual Studio

tslintのルールを定義する

tslintの検証のルールはtslint.jsonで定義されていますが、これについてもWeb Essentialsで可能です。メニュー経由で"C:\Users\[user name]\tslint.json"を編集できます。
f:id:KatsuYuzu:20150215020425p:plain
ルールの意味もちゃんと表示されるので安心です。
f:id:KatsuYuzu:20150215021434p:plain
ただし、このままだとファイルのパスの通り個人設定なので、保存は[名前を付けて保存]からソリューションファイルと同じ階層に保存しましょう。そうするとソリューション単位に設定できます。ソース管理を使用しているのであればtslint.jsonも一緒に管理すると管理、共有ができて良いです。

オススメのルール

基本はデフォルトのままで十分ですが、いくつか好きなルールを追加しました。

  • member-ordering
  • no-switch-case-fall-through
  • etc...


好みの tslint.json(Web Essentials 2.5.4時点のすべての rules)
デフォルトをコミットしてからカスタムをコミットしたので何を変えたのかは差分を見てください。

Visual Studioのフォーマット機能(CTRL + K,D)に合わないspaceの制約を消したりもしました。

おまけ:Productivity Power Toolsが便利

拡張機能「Productivity Power Tools」をインストールすると、エラー一覧の情報をソリューションエクスプローラー上に破線、吹き出しで反映してくれます。tslintがファイルを開いている時しか反応してくれずエラー一覧では見落としがちなので助かっています。
f:id:KatsuYuzu:20150215015758p:plain

Productivity Power Tools 2013 extension
他にもMatch Margin機能がめちゃくちゃいいですね。選択してるワードと同じワードをハイライトしてくれます。Scrollbar markers機能でスクロールバー上でもハイライトされるのが最高。

×構文解析、○静的検証(2015/02/17 追記)

記事投稿時、tslintそのものを構文解析ツールと表現していたのですが、tsコンパイラが解析した構文木を利用した静的な検証だよとご指摘いただきました。


@vvakameさん、ありがとうございます&すいませんでした*5
@vvakameさんの本、基礎はもちろん、こうした開発環境や言語仕様など一歩踏み込んだ内容まで書かれていましたのでオススメです。

TypeScriptリファレンス Ver.1.0対応【委託】 - 達人出版会

*1:.NETのノリでクラスを呼び出してると読み込み順序によってはコケる。読み込んだファイル順、書かれている順で定義されていくから注意。

*2:JavaScriptの闇。callbackをラムダで書いていれば基本OK。thisを変数で持っててくれる。

*3:雰囲気とか工数とか気にせずツールがペアプロしてくれる。言いにくいこともビシバシ指摘してくれる。

*4:成長効果考えたら絶対にペイするから何とか予算通したい。

*5:僕のアホ頭が色々マージした結果の勘違いで「本にも○○とありまあああすうう」と言いながら本には上記の通り正しく書かれてございました……