IntelliJ上のNuxt.jsプロジェクトでPrettierとESLintを導入してコードを自動整形させる

おそらく現状のIntelliJのPrettierプラグインでは.eslintrc.jsのRulesが反映されないのとCtrl + sする度に自動整形を走らせて強制的にESLintのルール上に則ったコードにさせたかったので以下のような設定をしました。

nodeモジュールを入れる

// vue-cliでNuxt.jsプロジェクトが入ってる前提です。
// 追加で以下をdevDependenciesにインストール
$ yarn add -D prettier eslint-config-prettier eslint-plugin-prettier

.eslintrc.jsを設定

#ESLint と Prettier -Nuxt.js

上記のNuxt.js公式ドキュメントの通りに.eslintrc.jsをしてください。ただ上記の通りだとダブルクオーテーションを使う設定になっているためsingleQuote: trueを追加しました。

.eslintrc.js

module.exports = {
  // ~~~~~~~~~~~~~~~~
  rules: {
    'semi': [2, 'never'],
    'no-console': 'off',
    'vue/max-attributes-per-line': 'off',
    'prettier/prettier': ['error', { 'singleQuote': true, 'semi': false }]
  }
}

IntelliJ or WebStormにFile Watchersプラグインを追加

追加してください。再起動後、設定→ツール→ファイル監視があればOKです。

File Watchersの設定

• プログラム： \$ProjectFileDir\$/node_modules/.bin/eslint
• 引数: --fix \$FilePath\$ --ignore-path \$ProjectFileDir\$/.gitignore \$ProjectFileDir\$/.
• リフレッシュする出力パス：　\$FilePath\$

上記のような感じで設定しました。--ignore-pathの設定しないとnode_modulesとか.nuxtにも働きかけて死ぬので注意してください。