TypeScriptのコード規約をIntelliJのデフォルト設定任せにしていたので、TSLintでちゃんとやる。

TypeScriptのコード規約をIntelliJのデフォルト設定任せにしていたので、TSLintでちゃんとやる。

*lintは自分で、あるいは社で作成された一定の規約に従ったコードを書かないと怒られシステムです。

人の目とか感覚ではなく、機械が機械的に怒ってくれるので感情が沸かないのが良いですね。

TypeScriptにはTSLintがある

現在JavaScriptを書くにあたってはバベルがわりにTypeScriptを使っているので、TSLintを設定します。

TypeScriptとTSLintをインストールして、

npm i -g typescript tslint

設定ファイルであるtslint.jsonを生成します。

tslint --init

これで基本的なルールが記述されたtslint.jsonが作成されるので、Rulesなどを参照しながらお好みのルールに仕上げます。

これで一貫性をもったコードを書けるようになり、治安維持につとめられます。

設定の必要がなくなったルール

This rule is now implemented in the TypeScript compiler and does not need to be used.

なかにはこういうルールもあるので、他人のtslint.jsonからコピペ追加するときにはいちおうドキュメントを見てみましょう。

IntelliJでの設定

Settings > Languages & Frameworks > TypeScript > TSLintに設定ページがあります。

Enableにチェックをいれて、NodeへのパスとTSLintパッケージへのパスを通します。

初期値ではtslint.jsonを自動検索してくれますが、社から配給されるファイル名がちがうであるとか、宗教上の理由でファイル名がちがう場合は、特定のファイルを指定することもできます。

f:id:mmmpa:20160509105126p:plain

特に付け加えたルール

no-bitwise、no-conditional-assignmentは悩ましかったけど入れなかった。

no-bitwiseは今触ってるやつ以外では入れましょうという感じですね。

curly

Enforces braces for if/for/do/while statements.

no-angle-bracket-type-assertion

型アサーションをasで書くようにするルール。

<ClassA>a;   // ng
a as ClassA; // ok

わたしの場合Reactを常用しているので、JSX(TypeScriptだと拡張子tsxになる)を使うことが前提になっています。

JSXのシンタックスと当たってしまって<>での型アサーションは使えないので、両方が混ざるのを防ぐ意味があります。