おそらく現状の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を設定
上記の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の設定
![スクリーンショット 2018-04-30 9.55.05.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F21909%2F3d35de7c-32f7-3af4-0609-0c6c1a64c70a.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=844a097d698b06e6ad4b036617256a64)
![スクリーンショット 2018-04-30 9.55.31.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F21909%2F2a93fe22-7adc-ee88-0f89-1b31ab5cbcde.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=fd38a605bcac1b5657b88d207e3b0cf8)
- プログラム: $ProjectFileDir$/node_modules/.bin/eslint
- 引数: --fix $FilePath$ --ignore-path $ProjectFileDir$/.gitignore $ProjectFileDir$/.
- リフレッシュする出力パス: $FilePath$
上記のような感じで設定しました。--ignore-path
の設定しないとnode_modules
とか.nuxt
にも働きかけて死ぬので注意してください。