Nuxt.jsのプロジェクトにESLint + JavaScript Standard Styleを導入する方法

Nuxt.jsのプロジェクトに、ESLint、JavaScript Standard Styleを導入する方法を紹介します。

create-nuxt-appを使用する場合

プロジェクトの作成にcreate-nuxt-appを使用する場合、リントツールのオプションでESLintを選択するだけで導入することができます。

create-nuxt-appを使用しない場合

Nuxt.jsのスターターテンプレートや、スクラッチからプロジェクトを作っている場合は、自分で導入する必要があります。

ESLintを導入

create-nuxt-appでESLintを使用する設定でプロジェクトを作成した場合や、Nuxt.jsのスターターテンプレートを使用した場合は、あらかじめESLintが組み込まれています。

.eslintrc.jsファイルには、Vue.jsのための設定が記載されています。

.eslintrc.js

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true
  },
  parserOptions: {
    parser: 'babel-eslint'
  },
  extends: [
    'plugin:vue/essential'
  ],
  plugins: [
    'vue'
  ],
  rules: {}
}

nuxt.config.jsファイルには、ソースコードの更新時に自動でリントを実行するための設定が記載されています。

nuxt.config.js

module.exports = {
  build: {
    extend (config, { isDev, isClient }) {
      if (isDev && isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
    }
  }
}

スクラッチからプロジェクトを作っている場合、これらのファイルをプロジェクトに追加することで同じ構成にすることができます。

JavaScript Standard Styleを導入

パッケージをインストール

ESLintでJavaScript Standard Styleを使用するためのパッケージ群をインストールします。¹

$ npm i -D eslint-config-standard eslint-plugin-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node

ESLintに設定を追加

.eslintrc.jsファイルのextendsに、standardを追加します。

.eslintrc.js

  module.exports = {
    root: true,
    env: {
      browser: true,
      node: true
    },
    parserOptions: {
      parser: 'babel-eslint'
    },
    extends: [
+     'standard',
      'plugin:vue/essential'
    ],
    plugins: [
      'vue'
    ],
    rules: {}
  }

このとき、standardはplugin:vue/essentialよりも前に書く必要があります。²

参考リンク

• 開発ツール - Nuxt.js

関連記事

• Nuxt.jsのプロジェクトにESLint + JavaScript Standard Style + Prettierを導入する方法

1. eslint-config-standard - npm ↩

2. eslint-plugin-vue - npm ↩