【JetBrains系IDE】 IntelliJ IDEA の便利な設定（WebStorm・PhpStorm）

この記事は、IntelliJ IDEA / WebStorm / PhpStorm を毎日の開発で使っている人向けに、自分が実際に使っていて効果が大きかった4つの設定（File Watchers での SCSS 自動コンパイル、分割 JS の自動結合、フォントとサイズ、Markdown の Run gutter icon）を忘備録としてまとめたものです。全部を一度に入れる必要はなく、気になったものから1つずつ試して、合わなかったら戻せばOKです。JetBrains 系で UI が共通なので、PhpStorm や GoLand でも同じ手順で設定できます。

ショートカット系の設定や使い方は別記事に分けています。あわせて読むと作業効率がさらに上がります。

• 【macOS】IntelliJ IDEA ショートカット チートシート
• Clion x PlatformIOでESP32（Arduino）開発
• はじめての Spring Boot 〜 JavaでWebアプリケーション

私は多くの言語でJetBrains系IDEのお世話になってます。もちろん、JetBrains All Products Pack を購入してます。

こんな具合に、よく使う言語のほとんどが JetBrains からIDEがリリースされています。インターフェースや操作感も統一されているので、一度慣れてしまうとJetBrains以外のIDEで開発したくなくなります。以前はiOSアプリ開発のためにXCodeをよく使ってましたが、使い勝手が違いすぎて触りたくありません（笑）。　VS Codeもすっかり出番が少なくなりましたねぇ。

さて、そんな JetBrains系IDEの便利な設定を忘備録として残します。IntelliJ IDEA や WebStorm　で使う設定が中心ですが、JetBrains系で他のIDEでも応用できる設定だと思います。ご参考ください。

SCSSを保存したら自動でCSSに変換する（File Watchers）

SCSSファイルを変更した際に、それをトリガーに自動コンパイルが走って、CSSファイルを生成させる設定です。あらかじめ、プラグインに File Watchers が必要です。インストールしておきます。

設定 → ツール → File Watchers へ進み、SCSSを選択して新規作成します。パラメーターは以下画像を参考に。

分割したモジュールJSをリリース用に1ファイルへ結合する（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 などでファイル変更を監視して上記のようなスクリプトを実行すれば同じことが実現できます。

エディタとUIのフォント・サイズを変えて画面を広く使う

ソースコードのフォント調整は 設定 → エディター → フォント で変更可能です。 左側のソースツリーやIDEのフォント変更は、設定 → 外観 → フォント にあります。

私の場合、16インチのMacBook Proを使ってますが、パソコン自体のディスプレイサイズを 2056 x 1329 の最大設定にしつつ、さらにIDEのフォント Iosevka でサイズ 13.0 に設定してますのでかなり文字は小さいです。というのもサブモニターを使わずに、MacBook一台でプログラミング仕事をこなしたく、この方法に行き着きました。 差分比較や画面分割した作業が多いのでフォント幅が詰まった Iosevka フォントは、スペースを有効活用できます。また、インデントは全てタブ設定にして2スペースで表現させてます。

最初は小さすぎて目が悪くなりそうと思ったものですが、慣れるものですね。通常の文字サイズのパソコンを見ると「デカッ」と思うようになってしまいました。

Markdownにシェルを書いてその場で実行する（Run gutter icon）

IntelliJ などの JetBrains 系 IDE では、Markdown ファイルのコードブロック内にシェルスクリプトを書くと、行の左側に「Run gutter icon」と呼ばれる緑色のボタンが表示されます。 このボタンからその場でシェルを実行できるので、とても便利です。

なお、この機能は任意のコマンドをその場で実行できるため、信頼できる自分のメモやリポジトリでのみ使うことをおすすめします。外部から取得した Markdown や共有リポジトリ内のメモを開いた際は、コードブロックの内容をよく確認してから実行するようにしてください。

さらに、よく使う値を外部ファイルに変数としてまとめておくと、使い回しが効いて検証も楽になります。 例えば次のようにします。

vars.sh ファイルを用意して、共通で使いたい変数を定義しておきます。

# vars.sh
article_id=101
db=ssg

Markdown のコードブロックでは、最初に source コマンドで変数ファイルを読み込んでおきます。 一度読み込めば、そのシェルセッション内で ${article_id} のように変数を展開して使えるようになります。 このようにしておくと、ドキュメントや検証メモを「そのまま実行可能なレシピ」として育てていけます。

source ./vars.sh
psql -U ssg -d "${db}" -c "
SELECT
  a.article_id,
  s.status AS mail_status,
  s.body   AS mail_body
FROM articles a
  LEFT JOIN send_mail s ON a.send_mail_id = s.send_mail_id
WHERE a.article_id = ${article_id}
  AND a.delete_flg = 0;
"

関連記事

• 【macOS】IntelliJ IDEA ショートカット チートシート
• Clion x PlatformIOでESP32（Arduino）開発
• はじめての Spring Boot 〜 JavaでWebアプリケーション

関連アイテム

• IntelliJ IDEA 本
• JetBrains IDE 解説本
• プログラミング 開発環境 本