【JetBrains系IDE】 IntelliJ IDEA の便利な設定（WebStorm・PhpStorm）
私は多くの言語でJetBrains系IDEのお世話になってます。もちろん、JetBrains All Products Pack を購入してます。
| 言語 | IDE |
|---|---|
| Java・JSP・Spring Boot | IntelliJ IDEA |
| JS・HTML | WebStorm |
| PHP・Laravel | PhpStorm |
| C++・Arduino・ESP32 | CLion |
| PostgreSQL・MySQL・SQLite | DataGrip |
| Python | PyCharm |
| GO言語 | GoLand |
| Android | Android Studio |
こんな具合に、よく使う言語のほとんどが JetBrains からIDEがリリースされています。インターフェースや操作感も統一されているので、一度慣れてしまうとJetBrains以外のIDEで開発したくなくなります。以前はiOSアプリ開発のためにXCodeをよく使ってましたが、使い勝手が違いすぎて触りたくありません（笑）。 VS Codeもすっかり出番が少なくなりましたねぇ。
さて、そんな JetBrains系IDEの便利な設定を忘備録として残します。IntelliJ IDEA や WebStorm で使う設定が中心ですが、JetBrains系で他のIDEでも応用できる設定だと思います。ご参考ください。
SCSSの自動コンパイル（File Watchers）
SCSSファイルを変更した際に、それをトリガーに自動コンパイルが走って、CSSファイルを生成させる設定です。あらかじめ、プラグインに File Watchers が必要です。インストールしておきます。
設定 → ツール → File Watchers
へ進み、SCSSを選択して新規作成します。パラメーターは以下画像を参考に。
分割JSファイルを一つにまとめる（File Watchers）
JSライブラリを一つのファイルで管理すると修正が辛かったり、テストしづらくなります。そこでモジュール単位にファイル分割することがあると思います。ただしリリースでは一つのファイルとしてまとめたい場合も、File Watchersを使うと便利です。次は、File Watchersでモジュールjsの変更を監視し、シェル（bash）を走らせて一つのファイルに結合させています。
引数の部分ですが、シェルスクリプトに直すと以下の処理を行なっています。
#!/bin/bash
# --------------------------------------------------------------------------------------------------
# nu.core.js と modules/*.js を結合し、nu.js を生成するスクリプト
# - 一時ファイルを経由し、差分があるときだけ上書き
# - IntelliJ の File Watcher のワンライナーを移植
# --------------------------------------------------------------------------------------------------
set -euo pipefail
# プロジェクトルートからの相対パス
SRC_DIR="$(cd "$(dirname "$0")/../src/nu/js" && pwd)"
cd "$SRC_DIR"
# nullglob を有効化（マッチしない場合にパターン文字列を残さない）
shopt -s nullglob
TMP_FILE="nu.js.tmp"
OUT_FILE="nu.js"
# 結合処理
cat nu.core.js modules/*.js > "$TMP_FILE"
# 差分がある場合のみ上書き
if ! cmp -s "$TMP_FILE" "$OUT_FILE"; then
mv -f "$TMP_FILE" "$OUT_FILE"
echo "[concatNuJs] 更新: $OUT_FILE"
else
rm -f "$TMP_FILE"
echo "[concatNuJs] 変更なし"
fi
IDEの File Watchers
設定でうまく動かない場合は、諦めてシェルでやるのも一つの手です。fswatch
などでファイル変更を監視して上記のようなスクリプトを実行すれば同じことが実現できます。
フォントやフォントサイズを変更する
ソースコードのフォント調整は 設定 →
エディター → フォント で変更可能です。
左側のソースツリーやIDEのフォント変更は、設定 →
外観 → フォント にあります。
私の場合、16インチのMacBook
Proを使ってますが、パソコン自体のディスプレイサイズを
2056 x 1329 の最大設定にしつつ、さらにIDEのフォント
Iosevka でサイズ 13.0
に設定してますのでかなり文字は小さいです。というのもサブモニターを使わずに、MacBook一台でプログラミング仕事をこなしたく、この方法に行き着きました。
差分比較や画面分割した作業が多いのでフォント幅が詰まった
Iosevka
フォントは、スペースを有効活用できます。また、インデントは全てタブ設定にして2スペースで表現させてます。
最初は小さすぎて目が悪くなりそうと思ったものですが、慣れるものですね。通常の文字サイズのパソコンを見ると「デカッ」と思うようになってしまいました。。