簡単にVisual Studio Codeのメニューバーとアクティビティバーの非表示にしたり表示させたりする方法

VisualStudioCodeのメニューバーとアクティブバーの表示させたり非表示させたりする方法。表示を切り替えて作業効率を向上へ。

すっかりプログラミング用エディタ業界を制したといっても過言ではないマイクロソフトが作り上げた傑作ソフト(アプリ)のVisual Studio Code(ヴィジュアル・スタジオ・コード)ですが、今回はそのちょっとした便利テクニックの紹介です。

プログラミングのコードを書くときはできるだけ入力している画面をシンプルに、そして広くできたほうが便利ですよね。

そこで今回は、画面上にあるメニューバーやアクティビティバーを消したり、逆に表示させたりする方法を紹介します。

今回の作業環境

・Windows10
・Visual Studio Code 1.69.1

Visual Studio Codeのコード入力画面をできるだけ広くして作業効率アップ

まず次の画像を見てください。

VisualStudioCodeの使い方(メニューバーとアクティブバーの表示と非表示の方法)

メニューバーというのは、画面の最上部にある「ファイル(F)」とか「編集(E)」とかがある横長の部分のことです。これを消すととても画面がシンプルになって気持ちがいいです。

アクティビティバーというのは、画面の←側にある虫眼鏡アイコンやフラスコのアイコンがある縦長の部分のことです。これが消えると←側にスペースが広がります。

下の画像を見てください。

これは私の作業画面ですが、ご覧のとおりメニューバーもアクティビティバーも表示させていません。

VisualStudioCodeの使い方(メニューバーとアクティブバーの表示と非表示の方法)

コードをただ書いている作業のときは、メニューバーやアクティビティバーを使うことはあまりないと思います。つまり不要な情報なのですね。

なのでそれらを消してしまったほうが、ちょっとだけではシンプルな見た目になってカッコイイ(?)、そして画面を広くできます。

そして消してしまったそれらを表示させるのも実は簡単に出来ます。だから安心してさっさと消してしまいましょう。

メニューバーを消したり表示させたりする方法

VisualStudioCodeの使い方(メニューバーとアクティブバーの表示と非表示の方法)

まず上画像のようにメニューバーが表示されている状態から、メニューバーを消してみましょう。

最初に、キーボードで、

Shift、Ctrl、そして「P」を同時に押しましょう(Shift+Ctrl+P)。

(なおこのキーボードの組み合わせはVisual Studio Codeで最も重要な組み合わせ(ショートカット)です。マウスで操作するのではなく、まずは「Shift+Ctrl+P」。これからVisual Studio Codeの全てが始まるといっても過言ではありません)

さてこうすると、上画像中の矢印の部分の表示枠(ウインドウ)が出現します。

そこには最初の矢印のところに検索欄がありますので、そこに、

toggle

と入力してみてましょう。

そうすると、2番めの矢印のように複数の項目が出てきます。

そしてまさにそこに、

表示:メニューバーの切り替え
View Toggle Menu Bar

という項目が登場します。

はい、その項目をクリックしましょう。

どうでしょうか?メニューバーが消えたと思います。

では、次に消えたメニューバーを表示させましょう。

やることは同じです。

Shift、Ctrl、そして「P」を同時に押して(Shift+Ctrl+P)から、

toggle

と入力。

出てきた項目から、

表示:メニューバーの切り替え
View Toggle Menu Bar

を選んでクリック(または決定)です。

これで消えたアクティビティバーが再び表示されます。

このようにしてメニューバーの表示・非表示が簡単に行えます。

ですので安心してメニューバーを消してコードを書く画面(ウインドウ)をできるだけ広くしましょう。

アクティビティバーを消したり表示させたりする方法

メニューバーと同じようにアクティビティバーも非表示にしたり表示さえたりが出来ます。やる作業は全く同じです。

VisualStudioCodeの使い方(メニューバーとアクティブバーの表示と非表示の方法)

まずはアクティビティバーが上のように表示されている状態から、それを消してみましょう。

やはりまずは、Shift、Ctrl、そして「P」の同時押し(Shift+Ctrl+P)です。

VisualStudioCodeの使い方(メニューバーとアクティブバーの表示と非表示の方法)

そして、上画像矢印①に、

toggle

と入力して、今度は矢印②の、

表示:アクティビティバーの切り替え
View Toggle Activitiy Bar Visibility

を選択してクリック(または決定)です。

これでアクティビティバーが消えます。

最後に消したアクティビティバーを表示さえてみましょう。やることは同じです。

またしても、Shift、Ctrl、そして「P」の同時押し(Shift+Ctrl+P)から、

toggle

と入力し、

表示:アクティビティバーの切り替え
View Toggle Activitiy Bar Visibility

を選択してクリック(決定)です。

これで非表示になっていたアクティビティバーが表示されます。

以上のような操作によって、Visual Studio Codeの画面上からメニューバーとアクティビティバーを消すことができ、そのスペース分だけコード入力画面を広げることが可能です。

少しだけ画面をシンプルにそしてスペースを拡大する操作ですが、そのちょっとした差がコード画面の見やすさの向上、ひいては作業効率の向上につながるのでおすすめの操作です

もしみなさんがこれからのプログラミング学習や転職などに悩みがあるならば、現役エンジニアから学べるプログラミングスクールTechAcademy [テックアカデミー]でオンライン講座を受講するのも良いと思います。1人で悩みながら学習を進めるよりもわかりやすく、費やす時間も少なく合理的・効率的に学習できるからです。

Webマーケティングコース

Webアプリケーションコース

データサイエンスコース

機械学習の基礎が学べる「Pythonコース」

など各種の講座が用意されていますので、自分の未来に沿った講座が見つかります。無料で体験できるテックアカデミー無料体験も用意されていますのでお得に利用してみてください。

初心者におすすめプログラミングスクール