Nuxt.jsのtypescriptにlintをかけたい

Nuxtを使ってるんだけど、.vueファイルをtypescriptを使っている場合にlintをかけるには何をしたらいいの？って話

Webpackにちょうどいいloader（tslint-loader）があってこれを噛ませればいいっぽい。

必要なもの

• tslint
• tslint-loader
• typescriptが使えるようにセッティングされたNuxtのプロジェクト

設定

普通はwebpack.configに書くんだけど、Nuxtではwebpackの設定をNuxtが握っているため拡張する処理を書かなきゃいけない。ので、moduleを定義して設定を拡張させてみる。ちなみにベースとなってるのはtypescript-templateなんだけど、最新のNuxtには追従してないみたいなのでちょっと修正加えている。

modules/typescript.ts

module.exports = function (options) {
  // Extend build
  this.extendBuild((config) => {
    config.module.rules.push({
      test: /\.ts$/,
      loader: 'tslint-loader',
      enforce: 'pre',
      options: {
        configFile: 'tslint.json',
        tsConfigFile: 'tsconfig.json',
      },
    });
    config.module.rules.push({
      test: /\.ts$/,
      loader: 'ts-loader',
      options: {
        configFile: 'tsconfig.json',
      },
    });
    for (const rule of config.module.rules) {
      if (rule.loader === 'vue-loader') {
        rule.options.loaders.ts = 'ts-loader?{"appendTsSuffixTo":["\\\\.vue$"], "configFile": "tsconfig.json"}!tslint-loader';
      }
    }
  });
};

これを、nuxt.config.jsonで渡してあげればOK。

CLIでlintだけ実行するにはどうするかまだわからないんだけど何か方法あるのかな。
ちなみにlintの定義は有名なairbnbのやつ使ってます。