Vue.js/Nuxt.jsプロジェクト向けJetBrains IDEs環境設定メモ

最近、Vue.js, Nuxt.jsをさわり始めました〜　この記事に気になるところや、知っておくと便利なことがあれば是非コメント下さいね！いつもコメントを参考にさせて頂いています。

# 前提条件

* Vue／Nuxtプロジェクトを作成し、実行時にブラウザで見られる状態になっている事（今回は`npx create-nuxt-app <project-name>` でプロジェクトを作成）
* JetBrains社のIDEを使っている（今回はIntelliJ IDEA Ultimate Edition 2018.3.4 で確認。RubyMineやPhpStormでも出来るはずです。試した人、教えて下さいね！）

# Vue.jsプラグインを追加

画像のように追加します。次のセクションでPrettierをインストールするため、まだ再起動しなくてOKです。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/37334/ca3ba91c-3733-9a53-3c13-72ba94c6c5e3.png)


# VueファイルをPrettierで整形

Prettierで整形するホットキーを追加します（Reformat with Prettier）

こちらが参考になります。
https://www.jetbrains.com/help/idea/prettier.html


簡単にまとめると…

Prettierプラグインをインストール、再起動します。 ※よろしければ、ついでにFile Watchers（後述）もインストールしておきましょう。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/37334/92a4fd0e-7269-d466-ca57-5829fa6310c6.png)

Alt+F12でターミナルを開いて、次を実行。

`npm install --save-dev --save-exact prettier` （yarnではなくnpmを使っている場合）


プルダウンからパスを選択（自動で選択候補に出てくるはず）
![image.png](https://qiita-image-store.s3.amazonaws.com/0/37334/982e41ab-65f6-4343-390f-dac5af879869.png)

整形機能を追加完了。これでVueファイルも怖くない。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/37334/2c8927f9-3809-787b-c793-0a79d3eb71f1.png)

# ESLintでコードスタイルをチェック

こちらが参考になります。
https://www.jetbrains.com/help/webstorm/eslint.html
https://www.jetbrains.com/help/idea/eslint.html

簡単にまとめると…

いつもの通り、まだインストールされていなければコマンドを叩く。

`npm install eslint --save-dev`

![image.png](https://qiita-image-store.s3.amazonaws.com/0/37334/7c0888be-126d-6e3f-25bb-6fdf5e36e507.png)

Alt+Enterで自動修正の方法を選択できるようになりました。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/37334/5e8abbfc-da24-8b3c-fcd1-c55684e75c54.png)

# Prettierをファイル保存時に自動実行 （2019/12/31 追記）

`Command + S` または `Ctrl + S` でPrettierを自動的に実行します。VS Codeではこの方法がよく使われているようですので、JetBrainsのIDEでも同じようにしてみましょう！

## File Watchersをインストール

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37334/0d91c2bd-1f16-75cd-0a45-a1fd9ce37941.png)

## File Watchersを設定

非常に簡単です。 Preferences > Tools > File Watchersを選択します

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37334/94ba418f-c627-b34e-ac5d-3e85de6e4a83.png)

＋ボタンをクリック

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37334/1eec377e-e28a-49e3-99f8-a0091ada4610.png)

Prettierを選択

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37334/83e5e7f0-d04f-d50d-75eb-8dbeb26b6bf3.png)

File TypeをJavaScriptからVue（.vue）に変更します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37334/09a14e0a-0362-1bdf-904b-4aee33d57129.png)

忘れずにOKボタンで閉じて設定を適用します。

これで保存のショートカットでPrettierが実行され、ファイルがフォーマットされます。前述のショートカットよりも、こちらの方が簡単ですね。

# （Nuxt.js）記号を含むパスを解決する

手順はこちらが参考になります
https://qiita.com/sutoh/items/54e94df1c610c0f18c85

（こちらはそのうちIDEの方で対応されそうな気がしますね）

![image.png](https://qiita-image-store.s3.amazonaws.com/0/37334/ef68d6e4-58d1-7815-c386-fc6ee930387b.png)

↓パスが解決されて、Command+クリックでファイルへ飛べるようになります
![image.png](https://qiita-image-store.s3.amazonaws.com/0/37334/674f783e-4825-29ec-c6b3-2a979da5d1e7.png)

# script/styleのインデントを調整する

↓未調整の場合、改行するとインデントが入る。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/37334/767d3f3f-6626-bd79-1e04-52f794f1fd48.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/37334/af722eef-c4e0-4040-f81b-def6c922ac39.png)


↓こんな風に設定します。（プロジェクトによりますが、Profileを繰り返し使う場合、ProfileをIDEレベルに変更すると繰り返し設定する手間が省けるのでおすすめです）

<img width="1138" alt="code-style.png" src="https://qiita-image-store.s3.amazonaws.com/0/37334/5cf5ddb9-3e93-86b6-a027-5198fd3050d8.png">

↓設定後、インデントがなくなる。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/37334/b6ae95e5-7275-786c-d217-3d89550ff602.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/37334/28b7a00d-343d-67ae-a919-1eab4908706a.png)

# HTMLのInspectionsを無効化

ESLintのチェックと競合するため次のようにチェックボックスからチェックを外します。

例えば、ESLintは空タグを `<div/>` のように書かないと警告が出ますが、デフォルトのHTMLのinspectionsでは `<div></div>` と書くように書かないと警告が出るため、どちらか一方のルールを取るべきです。こちらはお好みでいくつかチェックボックスにチェックを入れても残してもよいでしょう。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/37334/67b5eedb-6fbf-7794-e5f8-7ee8929f7e70.png)

# その他メモ

それぞれエディタ上の右クリックメニューからも実行可能。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/37334/351f64f9-44f8-9635-fb8c-28f41647eb2e.png)


セミコロンがない時の警告を無効化する（Inspections）。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/37334/4c6d06d6-1b1f-cc29-9beb-85175c52d99f.png)


# 関連リンク

https://www.jetbrains.com/help/idea/vue-js.html
https://qiita.com/devneko/items/afe12b8acaf9648ccbb6
https://www.jetbrains.com/help/idea/vue-js.html