Edited at

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ファイル保存時にも動作するようになります。