VSCodeのZen Mode （禅モード）でコードの世界にDive in

前回の記事ではVSCodeでVim・Emacsキーバインドが使えるようになりました

chaploud-blog.hatenablog.com

VSCodeを使った開発をし始めて4年ほど経過したので、かつてはSpacemacs使いだった私も、モダンエディタの豊富なUIやマウス操作にはもう慣れてきました。ただ、普段会社で大きなモニタで開発していると気にならないですが、自宅でノートPCの画面上でVSCodeを右半分に表示させて編集していると、「狭い....」と感じていました。

Spacemacs時代を思い出してみれば、UIは最小限に抑えられコードの編集領域が可能な限り広げられていた印象です。ファイルツリーすらたまにしか開かなかったですし、それで不便を感じることはありませんでした。Vimキーバインドとwhich-keyにより、すべてがの操作がキーボードだけで完結し、思考と同じスピードでコードを編集・実行・デバッグしている瞬間もあったように思います。

今回はVSCodeに標準搭載されているZen Mode（禅モード）を紹介します。

方法

やり方は簡単で、ctrl + k z またはコマンドパレット ctrl + shift + p から 「View: Toggle Zen Mode」を実行するだけです。元に戻したければ同じコマンドを再度実行します。

設定

何も設定していないと、VSCodeがフルスクリーンになった上で編集領域が中央寄せになりますが、この挙動は望ましくないので、VSCodeの設定ファイル settings.json に以下を追加します（{ } 内をマージ）。

{
  "zenMode.fullScreen": false,  // フルスクリーンにしない
  "zenMode.showTabs": "none",  // タブを表示しない
  "zenMode.centerLayout": false, // 中央ぞろえにしない
  "window.menuBarVisibility": "compact", // メニューを「・・・」に格納
  "window.commandCenter": false, // コマンドセンターを非表示
}

そして、メニュー上部に各種UIボタンが多すぎて邪魔ならそのアイコン上で右クリックをし、コンテキストメニューからチェックを外します。最終的には、Zen Mode起動時に以下のような見た目になります。通常状態も合わせて載せます。

Zen Mode時のVSCode

通常・設定前

わずかな違いかもしれませんが、画面の小さいノートPCではこの数文字分がコードの見やすさに関わってきます。また、Zen Modeは目の前のコードの編集に集中するシチュエーションで使うため、余計なものが表示されないというのは効果的です。タブが表示されないですが、Vimの gt / gT によるタブ切り替えや、ctrl + tab によってタブ選択すればよいですし、ファイルは ctrl + p で探せばよく、コマンドはwhich-keyや ctrl + shift + p （または各種キーボードショートカット）から実行すればOKです。

Zen Modeを要所で活用することで、みなさまがますますのフロー状態に入ることを期待しています。