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

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

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

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

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 + Prettierを導入

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

普通の方法ではJavaScript Standard StyleとPrettierのルールが競合してしまうので、両者を併用するためのパッケージであるeslint-config-prettier-standardをインストールします。

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

ESLintに設定を追加

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

.eslintrc.js

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

このとき、prettier-standardはextends内の最後に書く必要があります。

Make sure to put it last, so that it gets the chance to override other configs.

出典：eslint-config-prettier-standard - npm

注意

JavaScript Standard StyleとPrettierでは、関数宣言の括弧の前にスペースを入れるルール（space-before-function-paren）の扱いが異なるため、eslint-config-prettier-standardを用いてリントしたソースコードはJavaScript Standard Styleに完全に準拠しているとは言えません。¹
Prettierr Flavored JavaScript Standard Styleとでも呼ぶべきでしょう。

参考リンク

開発ツール - Nuxt.js
Integrating with ESLint · Prettier

関連記事

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

JavaScriptの書式と整形についてあれこれ - Hachirog ↩