【Nuxt × VSCode】ESLintとPrettierの設定方法。自動で構文解析とフォーマットする【Vue】

どーも、ぐるたか@guru_takaです。

Nuxtを使ったプロダクトをVSCodeで開発しています。その際に、ESLintとPrettierの設定で色々詰まったので、メモしておきます!

ESLintとPrettierの設定で悩んでいる方の参考になれば幸いです。

準備

VSCodeの拡張機能でESLintとPrettierをインストールしておきましょう。

設定方法

色々試しましたが、Nuxtの公式ページに従って、設定すると良いです。
参考 Development Tools | ESLint and PrettierNUXTJS

私のアレンジも含め、順を追って說明していきます!

STEP.1
.eslintrc.jsの設定
STEP.2
package.jsonの追記
STEP.3
VSCodeの設定ファイルを追記
STEP.4
nuxt.config.jsの追記

STEP.1:.eslintrc.jsの設定

公式が紹介しているコードに少しばかりアレンジ。追記したコードにはコメントで意味を書いています!

.eslintrc.js
module.exports = {
  root: true,
  env: {
    browser: true,
    node: true
  },
  parserOptions: {
    parser: 'babel-eslint'
  },
  extends: [
    'eslint:recommended',
    'plugin:vue/recommended',
    'plugin:prettier/recommended'
  ],
  // *.vue ファイルを lint にかけるために必要
  plugins: ['vue'],
  // ここにカスタムルールを追加します。
  rules: {
    semi: [2, 'never'],
    'vue/html-indent': ['error', 2],
    'no-console': 'off',//console.log();OK
    'no-unused-vars': 'off',//使っていない変数あってもOK
    'vue/html-self-closing': 'off',//imgタグのようにタグが1つで完結してもOK
    'vue/max-attributes-per-line': 'off',
    'prettier/prettier': [
      'error',
      {
        htmlWhitespaceSensitivity: 'ignore'//aタグの羅列などで変な風にならないように追記
      }
    ]
  }
}

htmlWhitespaceSensitivity: 'ignore'を追記した理由は、何もしないと下図のように、おかしくなることが多々あるからです。

こうなる理由は、インライン要素が表示に関わる可能性があるからです。以下の記事が参考になります!

参考 HTMLをprettierでフォーマットかけると変なところで改行がはいる件takeda_san’s blog

htmlWhitespaceSensitivity: 'ignore'を追記することで、こんな風に適切にフォーマットしてくれるようになります!

STEP.2:package.jsonの追記

公式に従って、以下を追記します。

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

すると、コマンドラインで以下コマンドを叩くと、構文解析や簡易修正ができます。

コマンドライン
# 構文解析
$ npm run lint
# 簡易修正
$ npm run lintfix

コードを書いているときにも自動で構文解析してくれますが、まとめてESLintのチェックを見たいとき等に便利です!

STEP.3:VSCodeの設定ファイルを追記

追記:2020/1/26
私の勘違いで上記の設定をしなくても、問題なく整形できました。なので、STEP3はスキップしてOKです!!

以下のようにVSCodeの拡張機能の設定ファイルを追記します。

settings.json
{
  "eslint.autoFixOnSave": true,
  "eslint.options": { "configFile": "./.eslintrc.js" },
  "eslint.validate": [
    "javascript",
    { "language": "vue", "autoFix": true }
  ],
  "editor.formatOnSave": true,
  // vueはfalse
  "[vue]": {
    "editor.formatOnSave": false
  },
}

注意点として、以下のようにエディタ保存で自動整形をOn、ESLintでの自動保存整形をOffにすると、インライン要素の整形(htmlWhitespaceSensitivity: 'ignore')が競合します

  • “eslint.autoFixOnSave”: off
  • “editor.formatOnSave”: on

なので、以下のように設定しましょう!

 "eslint.autoFixOnSave": true,
  "editor.formatOnSave": true,
  // vueはfalse
  "[vue]": {
    "editor.formatOnSave": false
  },

  • エディタ保存で自動整形をVueファイルの時だけOff
  • ESLintでの自動保存整形をOn

Vueファイルのみエディタ保存での自動整形を回避することで、vueファイル以外も自動整形され、万事解決!

参考 ESLintとPrettierとVSCodeでお手軽コードチェックするまでMOJIの本棚

STEP4:nuxt.config.jsの追記

公式に従って、npm run dev中に、変更検知できるように、以下の設定を追記します。

nuxt.config.js
  build: {
   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)/
        })
      }
    }
  }

最後に

以上です。ESLintやPrettierをより詳しく知りたい方は、ぜひ以下のリンクもチェックしてみてください!

参考 ESLint 最初の一歩Qiita 参考 Prettier 入門 ~ESLintとの違いを理解して併用する~Qiita 参考 Vue/NuxtでESLintを活用(ひとまず導入編)Qiita

コメントを残す