Address
304 North Cardinal St.
Dorchester Center, MA 02124

Work Hours
Monday to Friday: 7AM - 7PM
Weekend: 10AM - 5PM

VSCodeのキーボードショートカット

VSCodeでコードを読みやすくするキーボードショートカットが便利でおすすめ。クラスや関数を折り畳んで画面を最大限活用

VSCodeでコードを見やすくするため、クラスや関数を折り畳んで表示できるキーボードショートカットが便利でおすすめ

今回は現代の世界標準?といえるほどの大人気プログラミング用エディタであるVisual Studio Codeについて、便利なキーボードショートカットの1つを紹介します。

それは、コード中のクラスや関数などを折り畳んで表示させることにより、長いコード全体を画面上で見やすくためのものです。

コード全体の関数やクラスなどを一気に折り畳む/展開するキーボードショートカット

折り畳むキーボードショートカット

まず次のPythonのコードを見てください。

VSCodeキーボードショートカット

少なくとも画面内にdef宣言による関数が3つ存在していることがわかるでしょう。実際は画面外にも数個の関数が存在しています。

そして各関数の中身がしっかりと見えています。これはこれでわかりやすいのですが、画面外にあるコードも含めてコード全体を概観したいときは、できるだけ画面内に見える範囲を増やしたいですよね。

そのときの目的はコード全体をざっと見渡すことですから、関数やクラス内部は細かく見る必要はありません。そこで関数やクラスの中身だけを折り畳んでコンパクトに表示すれば、画面に表示できる範囲が広がるでしょう。

今回はまさのその目的のために、私が普段よく使っているキーボードショートカットを紹介します。

まず画面上で特に何かを選択したりすることはせずに、次のキーボードショートカット操作をします。

  • Windows :「Ctrl」を押したままで、「K」→「0(数字のゼロ)」と続けて押す
  • Mac:「⌘」を押したままで、「K」→「0(数字のゼロ)」と続けて押す

これを実行すると上の画面が次のような画面へ変化します。

VSCodeキーボードショートカット

どうでしょう。違いがわかるでしょうか。コード内の全ての関数が折り畳まれて、関数名だけが表示されています。従前では表示されていなかった関数名まで、画面内に表示されています。

このようにコード全体をよりコンパクトな表示にすることで、画面スペースを有効活用してコードを読みやすくできます。おすすめのキーボードショートカットです。

展開するキーボードショートカット

なおコード全体の折り畳まれた関数やクラスを一気に全て展開するには、次のキーボードショートカットを使います。

  • Windows:「Ctrl」を押したままで、「K」→「J」と続けて押す
  • Mac:「⌘」を押したままで、「K」→「J」と続けて押す

ようするに、折り畳みと展開のどちらの場合でも、「Ctrl/⌘ + K」を押したまま、という点は共通しているということです。あとはその後「0」を押すか、「J」を押すかで変わるだけですね。

特定の関数やクラスだけを折り畳む/展開するキーボードショートカット

上の項目では、「コード全体」に渡って関数やクラスを操作する方法でした。次、「ある特定の1つの関数やクラス」だけを選んで、折り畳んだり展開したりするキーボードショートカットを紹介します。

折り畳むキーボードショートカット

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

VSCodeキーボードショートカット

折り畳んだりしたい関数やクラスの先頭にマウスカーソルを移動させて、次のキーボードショートカット操作をします。今回は関数「judge_os」の部分を折り畳んでみます。

Windows :「Shift」と「Ctrl」を押したままで、「 [ 」を押す
Mac:「⌥」と「⌘」を押したままで、「 [ 」を押す

これを実行すると上の画面が次の画像のようになります。

VSCodeキーボードショートカット

関数「judge_os」の部分が折り畳まれてコンパクトになっていることがわかるでしょう。

展開するショートカット

折り畳んでものを展開するには、次のショートカットを使います。

Windows :「Shift」と「Ctrl」を押したままで、「 ] 」を押す
Mac:「⌥」と「⌘」を押したままで、「 ] 」を押す

このようなキーボードショートカットを含めてVisual Studio Codeの使い方に慣れれば慣れるほど開発効率・作業効率がドンドン上がるでしょう。

これ1冊でできる! Visual Studio Code 超入門 単行本(ソフトカバー)

発売日:2023/3/14

Visual Studio Code完全入門 Webクリエイター&エンジニアの作業がはかどる新世代エディターの操り方 単行本(ソフトカバー)

発売日:2022/3/10

改訂新版 Visual Studio Code実践ガイド —— 定番コードエディタを使い倒すテクニック 単行本(ソフトカバー)

発売日:2024/1/25

愛を分かち合いましょう