Atom ESLintのVue.jsプラグインを導入し.vueファイルで構文チェックを行う

Atomエディタで.vueファイル（単一ファイルコンポーネント）の構文チェックを行うための設定です。

eslintのインストール

JavaScriptのリアルタイム構文チェックを行うために、eslintをグローバルインストールします。

eslintだけでなく、.vue（単一ファイルコンポーネント）用の構文チェックをするプラグインもインストールします。

グローバルインストールするために-gをつけるのを忘れないようにします。

$ npm install -g eslint eslint-config-vue eslint-plugin-html eslint-plugin-vue

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

以下のAtomのパッケージをインストールします。

インストール時に依存するパッケージのインストールも行うように指示されることがありますので、その場合は依存するパッケージもインストールします。

linter
- 構文チェックを行うためのベースとなるパッケージ
linter-eslint
- 上記でインストールしたeslintをAtomで使用するためのパッケージ
language-vue
- .vueファイルのシンタックスハイライトなどを行うためのパッケージ

linter-eslintの設定

scopeの設定

linter-eslintをインストールすると.jsファイルは構文チェックを行ってくれるのですが、.vueファイルではチェックを行ってくれません。

.vueファイルもチェック対象となるように、linter-eslintの設定画面でList of scope to run Eslint on, ...の設定項目にsource.jsなどの拡張子がいろいろと指定されているはずなので、そこに.vueも追記します。

source.js, source.jsx, source.js.jsx, source.babel, source.js-semantic
source.js, source.jsx, source.js.jsx, source.babel, source.js-semantic, text.html.vue

pathの設定

上記でグローバルインストールしたeslintを使用するために、グローバルインストールしたeslintのパスを設定します。

Global Node Installation Pathの設定項目にパスを設定します。

パスはOSによって異なりますが、以下のコマンドでパスを取得できます。

$ npm get prefix
/usr/local #linuxの場合（各PCの環境によって変わります）

コマンドを実行して出力されたパスをそのまま設定項目に追記します。

また、Use global ESLint Installationの項目のチェックボックスがOFFになっている場合はONにします。

eslintの設定

プロジェクトフォルダのルートに.eslintrc.jsonのファイルを作成します。

このファイルで「文字列の囲みはシングルクォーテーションを使用する（ダブルクォーテーションの場合はエラー）」などの細かい設定を行います。

設定内容はお好みですが、"extends": "vue"で、上記でインストールしたvueのプラグインを適用させています。

{
    "env": {
        "browser": true,
        "es6": true,
        "node": true
    },
    "extends": "vue",
    "parserOptions": {
        "ecmaVersion": 2017
    },
    "rules": {
        "quotes": [
            "error",
            "single"
        ],
        "semi": [
            "error",
            "always"
        ],
        "no-constant-condition": 1,
        "no-var": 2,
        "prefer-const": 2
    }
}

以上で設定完了です。チェックがされない場合は、開いているファイルを閉じてからもう一度開き直してみてください。