tech blog技術メモ

Web制作に関連する技術を発信しています。

Nuxt.jsでESLint + Prettierを使う際の設定

本記事はNuxt.jsでESLintとPrettierを導入した際に行った設定を備忘録も兼ねて紹介します。

基本的には公式ドキュメントを参考にして設定しているので、こちらで分かる人は公式ドキュメントを読む方が早いかもしれません。

本記事では公式ドキュメントから一部カスタマイズをしたり、補足説明を加えたものになります。

本記事で達成すること

特定のエディタ・IDEに依存しないESLint + Prettier実行環境

必要なモジュールの追加

まずは必要なモジュールをnpm経由でインストールします。
今回必要なモジュールは以下となっています。

  • babel-eslint
  • eslint
  • eslint-config-prettier
  • eslint-loader
  • eslint-plugin-prettier
  • eslint-plugin-vue
  • prettier

これを下記コマンドでインストールしましょう。

npm i -D babel-eslint eslint eslint-config-prettier eslint-loader eslint-plugin-prettier eslint-plugin-vue prettier

ESLintの設定ファイルを作成

必要なモジュールをインストールしたら、次はESLintの設定を行いましょう。
.eslintrc.jsというファイルをプロジェクト直下に作成し、下記を記述します。

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true
  },
  parserOptions: {
    parser: 'babel-eslint',
  },
  extends: [
    'eslint:recommended',
    "plugin:vue/recommended",
    'plugin:prettier/recommended',
  ],
  // required to lint *.vue files
  plugins: ["vue"],
  // add your custom rules here
  rules: {
    "semi": [2, "never"],
    "no-console": "off",
    "vue/max-attributes-per-line": "off",
    "vue/html-self-closing": ["error", {
      "html": {
        "void": "always",
      }
    }],
    "prettier/prettier": ["error", { "semi": false }]
  }
};

これで設定は終了です。

実行用コマンドをnpm-scriptsとして追加する

実行用コマンドを打てばいつでも実行できますが、毎回コマンドを打つのも面倒なので、エイリアスをnpm-scriptとして登録しておきましょう。
下記のコマンドをpackage.jsonscriptsに記述します。

"scripts": {
  "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
  "lintfix": "eslint --fix --ext .js,.vue --ignore-path .gitignore ."
}

設定したオプションを簡単に説明しておきます。

  • --ext
    実行するファイルの拡張子を設定
  • --ignore-path
    無視したいファイルを設定。デフォルトは.eslintignoreここでは.gitignoreを指定してGitHubと除外ファイルの設定を共有しています。

保存時にLintを実行する

npm-scriptsでいつでも実行できるようになりましたが、開発中はそれすらも面倒ですよね。

Nuxt.jsではnuxt.config.js内に下記の設定を記述することでファイルの変更を検知してくれ、変更時にLintが走るようになります。

export default {
  build: {
    /*
     ** You can extend webpack config here
     */
    extend(config, ctx) {
      // Run ESLint on save
      if (ctx.isDev && ctx.isClient) {
        config.module.rules.push({
          enforce: "pre",
          test: /\.(js|vue)$/,
          loader: "eslint-loader",
          exclude: /(node_modules)/
        })
      }
    }
  }
}