eslint-plugin-vue を作っている話

4日朝に Vue.js #1 アドベント カレンダーを見たら3日のぶんが空いていたので急遽書きました。

私は .vue ファイルを静的検証するための ESLint Plugin を開発しています。

• eslint-plugin-vue
• ( ESLint についてはこちら: ESLint 最初の一歩 )

このプラグインを使うと、.vueファイルのテンプレート部分について、リアルタイムで構文エラーを検出したり、v-bind 等のディレクティブの使い方が間違っていたときに指摘してくれたりします。また、公式の Vue.js スタイルガイド に沿うように自動成形することもできます。

🏃 試してみる

eslint-plugin-vue を簡単に試してみるために、オンライン デモがあります (1度アクセスすれば、以後はオフラインでも使えます)。ここでコードを入力して、どのようなエラーが出るのか、どのように自動修正が働くのかを確認することができます。

• https://mysticatea.github.io/vue-eslint-demo/

このオンライン デモ自体も、もちろん Vue.js で作られています 😉

💿 インストール

npm を利用してインストールします。

$ npm install --save-dev eslint eslint-plugin-vue

📖 使い方

https://github.com/vuejs/eslint-plugin-vue#readme

他の ESLint Plugin と同様に、ESLint の設定ファイルを書いて使います。例えばこんな感じ。

.eslintrc.json

{
    "extends": [
        "eslint:recommended",
        "plugin:vue/recommended"
    ],
    "rules": {
        "semi": "error",
        "indent": ["error", 2],
        "quotes": ["error", "single"]
    }
}

そして、Glob パターンで対象ファイルを指定します。

$ ./node_modules/.bin/eslint "src/**/*.{js,vue}"

Visual Studio Code で使う

Visual Studio Code には Vetur という Vue.js のための優れた拡張機能があるので、利用している方も多いのではないでしょうか。
Visual Studio Code で、.vue ファイルに ESLint 静的検証を行うには、少し追加の設定が必要です。

1. VSCode ESLint 拡張機能をインストールする
2. ユーザー設定を開き、.vueファイルで VSCode ESLint 拡張機能が動作するよう設定する

settings.json

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

🍻 貢献する

eslint-plugin-vue はまだまだ開発途上でして、一緒に開発してくれる仲間を募集しています。
Issues を見て、実装できそうなルールを作って頂ければ嬉しいです。

以上。