zukucode
主にWEB関連の情報を技術メモとして発信しています。

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
    }
}

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


関連記事

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

    Atomエディタで.vueファイル(単一ファイルコンポーネント)の構文チェックを行うための設定です。JavaScriptのリアルタイム構文チェックを行うために、eslintをグローバルインストールしま...


  • Vue.js FontAwesome5を導入する

    webpackを使ったvue.jsのプロジェクトにFontAwesomeを導入します。webpackなどの環境は作成済みとします。最初に、以下のパッケージをインストールします。以下のようにインストール...


  • Vue.js 独自のfilterを実装する

    Vue.jsで独自のfilterを実装して、各コンポーネントで使用できるようにします。コンポーネント内で定義することもできますが、今回はグローバルファンクションとして作成して、全てのコンポーネントで使...


  • Vue.jsを学習する上で知っておきたいES2015の文法

    Vue.jsは公式ドキュメントを始め、ネット上のほとんどのサンプルがES2015(ES6)の表記で実装されています。Vue.jsで頻繁に使用するであろうES2015の文法を紹介します。objectの中...


  • Vue.js lessで外部のlessファイルをImportする

    メインカラーなどの共通情報は外部のlessファイルに記載し、各vueファイルではそのlessファイルをImportして実装するのが効率的です。.vueファイル内のlessで外部のlessファイルをIm...


  • Vue.js axiosをajaxライブラリとして導入する

    Vue.jsではajaxまわりの処理は用意されておらず、外部のライブラリを各自で自由に用意するようになっています。axiosの設定用にhttp.jsというファイルを作成します。エントリポイントのapp...


  • Vue.js webpackでHot Module Replacementを行う

    開発を効率化するために、Hot Module Replacement(HMR)の設定を行います。Hot Module Replacementを設定しておけば、ブラウザの再読込は行わず、修正した箇所のみ...


  • vue-router webpackでページごとにファイルを分割する

    vue-routerでシングルアプリケーションを作成していると、ページ数が増えるにしたがって作成されるjsファイルのファイルサイズもどんどん増えていきます。ページごとにファイルを分割し、そのページがア...


  • vue-router 現在のパスによってスタイルを変更する

    vue-routerでシングルページアプリケーションを作成する際に、例えばヘッダやサイドバーのナビゲーションで現在表示しているページのリンクを無効にしたり色を変えたりしたい場合があります。vue-ro...


  • vue-routerを導入してSPAを作成する

    Vue.jsのプロジェクトにvue-routerを導入してシングルページアプリケーション(spa)を作成します。最初にvue-routerのパッケージをインストールします。router-linkはナビ...