TypeScript の linter の tslint と、Formatter の prettier を組み合わせて使用する方法について記載します。
モジュールインストール
対象モジュール
モジュール | バージョン | 説明 |
---|---|---|
tslint | 5.10.0 | TypeScript Linter |
prettier | 1.12.1 | code fommatter |
tslint-plugin-prettier | 1.3.0 | tslint 実行時に prettier を実行してくれる |
tslint-config-prettier | 1.12.0 | prettier でフォーマットした箇所を tslint に無視させる |
tslint-config-standard | 7.0.0 | JavaScript Standard Style の tslint 版ってところ |
1 2 |
npm install --save-dev tslint prettier tslint-plugin-prettier tslint-config-prettier tslint-config-standard |
tslint 設定
tslint.json をプロジェクトルートに作成し、以下の入力を行う。
必要に応じて、変更してください。
1 2 3 4 5 6 7 8 |
{ "rulesDirectory": ["tslint-plugin-prettier"], "extends": ["tslint-config-standard", "tslint-config-prettier"], "rules": { "prettier": true } } |
VSCodeの設定
TSLintプラグインをインストールする。
拡張機能 |
---|
tslint |
インストールが完了し読み込みが終わったのちに、VSCodeの設定を変更する。
1 2 |
"tslint.autoFixOnSave": true |
これで、保存時にtslintが起動される。この時、tslint-plugin-prettierによりprettierによるフォーマットも実行されます。
コメント
助かるわー!