Atomのlinter-eslintでvuejsのプラグインを導入する

Atomエディタでjavascriptのリアルタイムの構文チェックをおこなうプラグインlinter-eslintvuejsのファイルもチェックをおこなうようにしたときの設定メモです。

Atomにインストールするパッケージ

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

linter : いろいろな言語のリアルタイムの構文チェックをおこなうために必要なパッケージです。

linter-eslint : javascriptの構文チェックをおこなうためのパッケージです。.eslintrc.jsonという設定ファイルをプロジェクトのルートフォルダに置くことで、jsxなどの拡張言語のチェックもおこなうことも可能です。

language-vue : 拡張子が.vueのファイルを扱うためのパッケージです。

.vueファイルでeslintを有効にする

デフォルト設定のままでは拡張子が.vueのファイルはeslintで構文チェックをおこなってくれません。

linter-eslintの設定画面で、以下のように.vueが対象になるようにscopeを追加します。

vue_linter

vuejs用のプラグインを導入する

eslintの設定ファイルでいろいろと設定しなければ、vuejs用のコードはエラーになってしまいます。例えば<template>のようにhtmlを書くと以下のエラーになってしまいます。

error  Parsing error: Unexpected token <

https://github.com/vuejs/eslint-config-vuevuejs用のeslintをおこなうためのパッケージがありましたので、これをインストールします。

eslint-plugin-htmlもインストールする必要があるので、一緒にインストールします。

注意点として、インストールするのはプロジェクトのフォルダではなくlinter-eslintのフォルダです。

linter-eslintの設定画面のView Codeのボタンでlinter-eslintのソースが開くと思いますので、そこでlinter-eslintで使用しているpackage.jsonフォルダの場所を確認できます。

npm install --save-dev eslint-config-vue eslint-plugin-vue eslint-plugin-html

.eslintrc.jsonの設定

インストールしたらプロジェクトのルートフォルダにある(ない場合は新規作成).eslintrc.jsonを以下のように編集します。

"extends": "vue"の部分で、先ほどインストールしたvuejs用のチェックをおこなうようになります。それ以外の部分はお好みで問題ありません。

{
    "env": {
        "browser": true,
        "es6": true,
        "node": true
    },
    "extends": "vue",
    "parserOptions": {
        "sourceType": "module"
    },
    "rules": {
        "quotes": [
            "error",
            "single"
        ],
        "semi": [
            "error",
            "always"
        ]
    }
}

これでvuejsのリアルタイム構文チェックが行われるようになりました。すでに開いていたファイルは一度閉じてから開きなおすとエラーチェックが行われるようになると思います。


関連記事

  • Atomのlinter-eslintでvuejsのプラグインを導入する

    Atomエディタでjavascriptのリアルタイムの構文チェックをおこなうプラグインlinter-eslintでvuejsのファイルもチェックをおこなうようにしたときの設定メモです。vuejs用のe...


  • atomで自作の入力補完候補(スニペット)を登録する方法

    プログラミング用エディタのatomで独自のスニペットを登録する方法を紹介します。スニペットとは入力補完候補のことです。例えばhtmlと入力したいときに、hと入力したタイミングでhtml,h1,head...


  • atom XDebugでPHP(laravel)をデバッグする

    atomエディタでlaravelのデバッグを行う方法を紹介します。XDebugはインストールされているものとします。php.iniでxdebugの設定がされていることを確認します。apacheをインス...


  • atomでショートカットキーを作成・変更する方法

    atomエディタでショートカットキーを設定・変更する方法を紹介します。最初に、まだ割り当てられていないコマンド、例えば「すべて保存(Save All)」のコマンドにショートカットキーを設定する方法を紹...


  • Atomの便利なおすすめパッケージ

    github製の高性能エディタAtomの便利なパッケージを紹介します。いろいろな便利なパッケージを使用することにより、開発効率は格段に上がりますので、最初に便利そうな機能はいろいろと試して自分にあった...


  • 鼻中隔湾曲症の入院・手術 体験記 -手術から現在まで-

    いざ手術室へ...緊急搬送などとは違い、患者(私)は自分で歩くことができる元気(?)な状態なので、手術室には自分で歩いて入りました。そして、ドラマでよく見るような手術室の手術台に自分で横になりました。...


  • 唐松岳・八方尾根に日帰り登山レビュー

    唐松岳に日帰り登山に行ってきました。登山道は森の中を歩く箇所は少なく、ほとんど開けた場所で、風が下から吹いてきてとても気持ちが良いです。途中までリフトが使えることや、道がとても歩きやすいことから、唐松...


  • 鼻中隔湾曲症の入院・手術 体験記 -検査から入院まで-

    以前、鼻中隔湾曲症の手術を受けました。鼻中隔湾曲症の手術をこれから受ける方や、手術をためらっている方に少しでも参考になれば幸いです。手術を受ける前は、睡眠時に鼻孔(左側)がふさがってしまい、鼻呼吸がで...


  • LaravelのElixirでbrowserSyncを導入する

    LaravelのElixirでビルド後にブラウザを自動で再表示するために、browserSyncを導入しました。browserSyncをするためには「laravel-elixir-browsersyn...


  • 冠着山に登山・トレッキングに行ってきました

    冠着駅から歩いて行ったのですが、途中の道はサイクリングをしたくなるようなとても気持ちのいい道でした。かなりの長距離で大変でしたが、姨捨のあぜ道は景色がとても絶景で、風も心地良かったです。夏には最高の避...