VSCodeのZen Modeで集中力をハックする

はじめに

Microsoft社が開発しているVSCode は拡張機能が豊富で柔軟なコーティング環境を作れるエディタでとても人気があります。また最近では同社が開発しているTypeScriptがフロントエンド開発のトレンドになってることもあり、VSCodeをメインのエディタとして使用することも多くなってきました。私自身、VSCodeにて記事を執筆していることもありかなりお世話になってます。

そこで今回は、コーティング作業へ集中することに特化した機能、**禅モード(Zen mode)**をご紹介します。

余談ではありますが、この記事を投稿しているこちらのサイトZenn とは何も関係ありません。**「Zen」**です。

このサイト「Zenn」の名前の由来については過去にcatnoseさんがdevsumi 2021にて言及されています。^[1]

善い行いをすればいずれ返ってくる... → 善 → "Zenn"

この表現がサービスをうまく表現しているなと感じるとともに私がZennを好きな理由でもあります。

Zen Modeの有効化

拡張機能の導入などは必要なく、VSCodeにデフォルトで用意されている機能なので、ショートカットで簡単に有効化できます。デフォルトでショートカットキーが用意されており、WindowsであればCtrl＋K・Z 、macOSであれば、⌘＋K・ZでZen Modeが発動します。

またCtrl＋Shift＋P / ⌘＋Shift＋Pで開くコマンドパレットのウィンドウに、zenと入力することでも有効化できます。

Zen Modeの切り替えを選択して有効化

有効化すると一瞬でエディタ以外のインタフェースが消えました。これがいわゆる「Zen Mode」です。

Zen ModeでUI表示が最低限になった

海外のニュアンスなので少し解釈に迷いますが「禅の精神」みたいなイメージでしょうか。とにかく集中だけに特化したモードといえますね。

この状態だとエディタにフォーカスが当たり続けるためコーティングだけに集中できるようになります。またサイドバーや設定メニューも隠れてしまいますが、VSCodeのショートカットキーを覚えていれば問題なく使用できるためそこまで大きな問題にはなりません。

意図的にではありますが、ショートカットキーを使って操作を強いられるようにもなるので自然とショートカットキーを覚えられるというのもいい点ですね。あえてこの環境でショートカットキーを勉強するのもいいなと感じました。

解除するときはEscキーを押すことでZen Modeが終了し通常モードに戻ります。

実際この記事もVSCodeのZenn Modeを使用して執筆しています。ターミナルもVSCode内からアクセスできるため、VSCodeの画面だけで作業が完結し、快適に執筆を進められるのがよかったです。

設定でさらにカスタマイズ

またZen modeは設定でさらにカスタマイズできます。初めてZen Modeを使用する時の設定は以下のようになっています。

設定変更前

設定項目は日本語表記に対応しているため直感的に触ることができます。初期状態だとメインエディタが中央寄せ、ソースコードのないの行番号が非表示になるため私はしばらく使った上で以下のように設定しています。

設定変更後

• Center Layout（レイアウトの中央寄せ）
• Hide Line Number（行番号の非表示）
• Hide Status Bar（下ステータスバーの非表示）

上の3項目それぞれデフォルトから変更しました。これにより最小限のUI表示を保ちながら作業に没入できるのでおすすめです。

作業スペースが広くなるのでターミナルとエディタを並べても余裕

他にもサイドバー、上部のUIの表示や、非表示を設定できます。

この状態でZen Modeの有効・無効を何回か切り替えてみるとコーディング環境が通常表示よりスリムになったのがよくわかります。

おわりに

今回は、VSCodeでZen Modeを使用したコーディングだけに集中できる環境についてご紹介しました。

個人的にこのZen（禅）で集中力を高めるという発想がかなり気に入っています。小技的な機能にはなりますが、ショートカットキー1つでいつでも集中へ特化したレイアウトに変更できるのはとても便利です。またVSCodeは有志が開発している拡張機能が豊富で、VSCodeだけで完結できることが多くオールインワンエディタとしてのポテンシャルを秘めていると感じました。今回紹介したZen Mode以外にも便利な機能が多く、VSCodeを通して得られるオールインワンな開発体験にはすごく満足しています。

Zen ModeはJetbrains社の提供するPhpStorm^[2] やPyCharm^[3]などのIDEにも実装されているようです。他にも搭載しているエディタ、IDEがないか探してみるのも面白いですね。

最後まで読んでいただきありがとうございました。

脚注

1. Zennという名前にした理由

2. IDE 表示モード | PhpStorm

3. IDE 表示モード | PyCharm