Vue.jsでtypescript-eslint + Prettierを導入する

先日、TypeScriptチームがTSLintからESLintに切り替えていくという発表がありました。
TypeScript on ESLint の未来

そこで、従来のTSLint + Prettierではなく、typescript-eslint + PrettierをVue.jsプロジェクトに導入する方法を調べたので、まとめます。

基本的には下記の記事の通りなのですが、Vue.js用にeslint-plugin-vueを入れるのと、.eslintrc.jsにPrettierの設定も書いていきます。
Using ESLint and Prettier in a TypeScript Project

パッケージのインストール

必要なパッケージをインストールします。npmの場合はnpm install --save-devに置き換えてください。

ESLint関連

yarn add --dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-vue

Prettier関連

yarn add --dev prettier eslint-plugin-prettier eslint-config-prettier

ESLintの設定

.eslintrc.jsを作成して以下を記述します。ESLintの設定ファイルはjsonでも書けますが、jsだとコメントが書けて便利なのでjsファイルにします。

.eslintrc.js

module.exports = {
  // parserに'vue-eslint-parser'を指定し、'@typescript-eslint/parser'はparserOptionsに指定する
  parser:  'vue-eslint-parser',
  parserOptions: {
    'parser': '@typescript-eslint/parser',
  },
  extends:  [
    'plugin:@typescript-eslint/recommended',
    'plugin:vue/recommended',
    'prettier/@typescript-eslint',
    'plugin:prettier/recommended',
  ],
  rules: {
    'prettier/prettier': [
      'error',
      {
        'singleQuote': true,
        'semi': false
      }
    ]
  }
}

extendsにpluginのルールセットを指定し、rulesでルールを上書きしていきます。prettier用のルールは'prettier/prettier'に書いていきます。ここでは、シングルクォート、セミコロンなしに設定しています。

重要なのは、コメントにもありますがparserに'vue-eslint-parser'を指定し、'@typescript-eslint/parser'はparserOptionsに指定する点です。Vue.jsとは関係のないtypescript-eslintの記事では、@typescript-eslint/parserをそのままparserに指定するように書かれているのですが、これだとeslint-plugin-vueを組み合わせたときにうまく動きません。ここで最初ハマったのですが、公式ドキュメントにちゃんと書いてありました。

If you want to use custom parsers such as babel-eslint or typescript-eslint-parser, you have to use parserOptions.parser option instead of parser option. Because this plugin requires vue-eslint-parser to parse .vue files, so this plugin doesn't work if you overwrote parser option.

User Guide | eslint-plugin-vue

公式ドキュメント読むのって大事ですね。。(自戒)

VSCodeの設定

あとは、VSCodeでのファイル保存時にESLintとPrettierが動くようにユーザ設定を編集します。
(ESLintの拡張機能を入れていることを前提とします。入れてない方はインストールしてください。)

1. メニューのCode→基本設定→設定を開く
2. settings.jsonを編集する(設定がjsonで開かれていない場合は右上の{}みたいなアイコンをクリックする)

settings.json

{
    "eslint.autoFixOnSave": true,
    "eslint.validate": [
        "javascript",
        {
            "language": "typescript",
            "autoFix": true
        },
        {
            "language": "vue",
            "autoFix": true
        }
    ]
}

以上の設定で、tsファイルやvueファイル保存時にも動作するようになります。