🐣

IntelliJ/WebStormを初めて使う人向け、やることリスト

2021/06/24に公開

IntelliJ

WebStorm

tech

はじめに

私のチームでWebStormを導入するのですが、私以外は初めて使うということでスムーズに使い始められるように手順を考えてみました。
「IntelliJ, WebStormを初めて使う！」という方は是非参考にしてみてください。

制約事項

IntelliJ/WebStormはインストール済みを想定（インストールの手順は説明しません）
IntelliJと言っても、WebStorm成分高め
Windows版IntelliJをもとに説明（ショートカットはMac版用も併記します）

プラグインのインストール

まずは日本語プラグインをインストールします。
普段使う場合は英語でもいいのですが、最初にやるチュートリアルをやる場合、英文に抵抗がある方は日本語化プラグインを入れておくことを強くおすすめします。

File > Settings > Plugins （[Macの場合] IntelliJ IDEA > Preferences > Plugins）からプラグインがインストールできます。
Japanese Language Pack / 日本語言語パックを検索し、インストールして、再起動します。

チュートリアル

これを受けることで基本的な操作、ショートカットを覚えることができます。

アクションの検索（[Windows] Ctrl + Shift + A / [Mac] Command + Shift + A）から、IDE機能を学習を検索しします。
左サイドバーに次のような表示が現れるので、自分が使用する言語を選択し、最初のレッスンから順に受けていきます。

設定を変更

File > Settings （[Macの場合] IntelliJ IDEA > Preferences）を選択し、設定ウィジェットを開いて設定を行います。
設定変更を推奨するものは、見出しに[推奨]と記載しました。

Ctrl + マウスホイールでフォントサイズが変更できるようにする

画面共有時などに便利です。

エディター > 一般 > Ctrl+マウスホイールでフォントをサイズ変更する

[推奨] ファイルの保存時に最終行の改行を整形する

不要な改行を削除し、最終行に一つだけ改行を挿入するようにします。

エディター > 一般 > 保存したファイルの最後に有る末尾の空白行を除去
エディター > 一般 > ファイル末尾に改行を挿入する

[推奨] スタイルも一緒にコピーする機能を無効にする

デフォルトだと、フォントや色もコピーされます。
基本的に不要な機能だと思いますので、無効にします。

エディター > 一般 > (Ctrl+C) をリッチテキストとしてコピーのチェックを外す

タブを複数行にして表示する

エディター > 一般 > エディタータブ で タブを表示する場所 を 複数行 にします。

大文字小文字区別せずにコードを補完する

エディター > 一般 > コード補完 > 大/小文字を区別する のチェックは外します。

[推奨] テキスト選択時に `"` や `{` を入力することで選択箇所を囲むようにする

エディター > 一般 > スマートキー > 引用符または波括弧の入力時に選択範囲を囲む にチェックを入れます

[推奨] エディタの見た目を整える

行番号と空白を表示します。昔は設定が必要だったように思えますが、現在はデフォルト設定だったかもしれません。

エディター > 一般 > 外観 > 行番号の表示 のチェックを入れる
エディター > 一般 > 外観 > 空白を表示 のチェックを入れる

エディター > フォント で好みのフォント、サイズ、行の高さを設定します。
私は次のような設定にしています。

フォント
- JetBrains Mono
サイズ
- 12
行の高さ
- 1.1

[推奨] 改行コードを設定

エディター > コードスタイル > 改行コード を Unix および macOS(\n) を選択します

インデントのサイズの設定

エディター > コードスタイル > <各言語> (例: TypeScript, JavaScript, CSS, その他のファイル)のタブ文字数、インデント継続インデントの文字数を設定します
私のチームでは、インデントはスペース2つなので、タブの文字数、インデント、継続インデントの文字数をすべて 2 にします

コードのフォーマットの設定

エディター > コードスタイル > <各言語> (例: TypeScript, JavaScript)の スペース 、 句読点 、 コード生成 の設定を行います。

PJ依存だと思いますが、私のPJでは次のように設定しました。

スペース
- オブジェクトリテラルの丸括弧 のチェックを入れる
- ES6 import/export の丸括弧 のチェックを入れる
句読点
- 使用しない ステートメントの終端にセミコロン 常時 使用 単一 引用符 新しいコードのみ
コード生成
- JSDocに型を含める にチェックを入れる

[推奨] 保存時に`eslint --fix`されるようにする

言語 & フレームワーク > JavaScript > コード品質ツール > ESLint > 保存時に eslint --fix を実行 にチェックを入れます。

(2022/04/23追記) [推奨] コード整形、保存時に`prettier`が実行されるようにする

言語 & フレームワーク > JavaScript > Prettier > コードの整形時 保存時 にチェックを入れます。

メモリインジケータを表示する

IntelliJの動作が遅くなるとき、メモリ割当量に対して、殆ど使ってしまっていることが原因の場合があります。
メモリ使用量の可視化、ガベージコレクションを起こすために、メモリインジケータを表示します。

一番下のステータスバーを右クリックしてメモリインジケータを選択します。
画面右下にメモリインジケータが表示されます。

メモリインジケータをクリックすることで、ガベージコレクションを発生させることができます。

プロジェクトを操作しやすくする

左サイドバーからプロジェクトを表示します。歯車アイコンをクリックして、シングルクリックでファイルを開くと開いているファイルを常に選択を選択します。

(2021/08/10追記) テキスト系ファイルで画面幅で自動で行の折り返しされるようにする

エディター > 一般 > 次のファイルで行の折り返し にチェックを入れます。

プラグインをインストール

お好みで

私は使っている
- Key Promoter X
  - GUIでの操作に対して、適合するショートカットを教えてくれる
- CSV
- JS GraphQL
- Prettier
- Batch Scripts Support
- Prisma
- Tailwind CSS
- Json Parser
  - 右のナビゲーションから起動する
  - RawなJsonをペーストしてパースすると、Prettyしたり、Treeの状態のJSONを表示してくれるツール
- GitToolbox
  - 標準のGitプラグインで手が届いていない部分について、いろいろな表示、機能を追加してくれるプラグイン
  - キャレットを置くと、該当行のGitBrame（コミットした人、日時、メッセージ）が表示される
- Atom Material Icons
  - ファイルのアイコンがかっこよくなる
  - 以前はExtra Iconsというプラグインを使っていたが有償になったので乗り換えた
  - Visual Studio Codeでも同様のプラグインがあった気がしますね
私は使っていないが、人によっては検討してもいいかもしれないやつ
お試し中
- Presentation Assistant
  - 使用したショートカットが表示される。プレゼンテーションやペアプロをやるときに使用すると、相手にどんなショートカットを使用したかどやれる
  - （モンゴル感想）プラグインを入れてみたものの、今まで使用してこなかったので、ちらつきが気になりやめた

キーマップ（=ショートカット）を設定する

私は追加でいくつかキーマップを追加しています。
以下を追加しています。また、競合するキーマップは解除しています。

エディターのアクション > キャレットを行末に移動
- Shift + スペースを割り当て
メインメニュー > ウィンドウ > エディタータブ > 他のタブを閉じる
- Alt + X を割り当て
メインメニュー > ウィンドウ > エディタータブ > すべてのタブを閉じる
- Alt + Shift + X を割り当て
メインメニュー > ウィンドウ > エディタータブ > 分割して右に移動
- Alt + R を割り当て

まとめ

自分好みの設定に変更し、良きIntelliJライフを！！

設定をした方は、ぜひショートカットも覚えてください