webpack実行時にtslintを有効化

概要

webpack -wでビルドしてる時にtslintのwarningも出るようにしたい！

手順

必要なパッケージをインストール

# webpackで使用するため
npm install tslint tslint-loader --save-dev
# tslint.json生成のため
npm install tslint -g

tslint.json生成

tslint --init

インターフェースルールを除外

初期設定ではinterfaces宣言で接頭にIをつけないとダメ！って怒られて邪魔なので"interface-name"ルールを追加して除外

    "rules": {
        "interface-name": [
            true,
            "never-prefix"
        ]
    },

webpack.config.jsにruleを追記

module.exports = {
...
  module: {
    // ファイルタイプに対するloaderの設定
    rules: [
    ...
+      {
+        enforce: 'pre',
+        test: /\.tsx?$/,
+        use: [
+          {
+            loader: 'tslint-loader',
+            options: {
+              typeCheck: true,
+              fix: true,
+            }
+          }
+        ]
+      }
    ]
  },

ビルドして見る

npm run watch叩いて見るだけ

まとめ

linter働かしておくと、無邪気に実装してても怒ってくれるから安心