More than 5 years have passed since last update.

Vue/NuxtでESLintを活用(vueスタイルガイド導入編)

Last updated at 2019-03-17Posted at 2019-03-10

はじめに

この記事では、ESLintを使って、Vueファイルの監視を設定して行きます。

ひとまず導入編

ESLintを入れたのであれば、jsファイルだけでなく、せっかくなのでVueファイルも監視してしまいましょう。その設定方法をこの記事では説明して行きます。プロジェクトは前回使用したものを使って行きます。

Vueスタイルガイドとは

Vueスタイルガイドとは、公式で推奨されているVueの書き方ガイドです。ある程度慣れてきたら、ガイドに沿った書き方をすることで、保守性が増したり、可読性が上がったりします。

優先度がA~Dまであり、わかりやすく説明されているのでぜひ一度読んでみてください。

確認

まずは確認です。例えば、現状、pages/index.vueを以下のようにスタイルガイドに反した自己終了形式でない書き方をしてもlintで注意されることはありません。

こういったスタイルガイドに反した書き方があれば監視して注意を出してくれるように設定をして行きましょう。

設定

まずは、vueファイルが監視対象となるように設定します。
vue-loaderとeslint-plugin-vueが必要になります。前回からの続きでしたら既に初期設定で入っているので問題ありません。既存プロジェクトへの導入であれば、以下を参考にインストールしてください。

次に、.eslintrc.jsを編集します。２箇所追加しましょう。


module.exports = {
  root: true,
  env: {
    browser: true,
    node: true
  },
  parserOptions: {
    parser: 'babel-eslint'
  },
  extends: [
    '@nuxtjs',
    'standard',
+   "plugin:vue/recommended"
  ],
+ plugins: [
+   'vue'
+ ],
  // add your custom rules here
  rules: {}
}