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

1 2	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
}
}

{

"rulesDirectory": ["tslint-plugin-prettier"],

"extends": ["tslint-config-standard", "tslint-config-prettier"],

"rules": {

"prettier": true

}

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

拡張機能
tslint

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

"tslint.autoFixOnSave": true

1 2	"tslint.autoFixOnSave": true

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

ECMAScript,Javaを扱います。
最近は、vue.jsなどフロントエンドの技術に興味あり！

中日ドラゴンズを応援してます。