tslint + prettier を設定

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 版ってところ
npm install --save-dev tslint prettier tslint-plugin-prettier tslint-config-prettier tslint-config-standard

tslint 設定

tslint.json をプロジェクトルートに作成し、以下の入力を行う。
必要に応じて、変更してください。

{
"rulesDirectory": ["tslint-plugin-prettier"],
"extends": ["tslint-config-standard", "tslint-config-prettier"],
"rules": {
"prettier": true
}
}

VSCodeの設定

TSLintプラグインをインストールする。

拡張機能
tslint

インストールが完了し読み込みが終わったのちに、VSCodeの設定を変更する。

"tslint.autoFixOnSave": true

これで、保存時にtslintが起動される。この時、tslint-plugin-prettierによりprettierによるフォーマットも実行されます。

コメント

  1. 高橋 より:

    助かるわー!

タイトルとURLをコピーしました