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によるフォーマットも実行されます。
ECMAScript,Javaを扱います。
最近は、vue.jsなどフロントエンドの技術に興味あり！
中日ドラゴンズを応援してます。
コメント
助かるわー！