VSCodeのショートカットを覚えて開発効率を高めましょう！

この記事では、公式ドキュメントに記載されている効率化できるVSCodeのショートカットをまとめていますので、覚えて開発効率を高めましょう！ ！

Visual Studio Code は、最も人気があり、よく使用されるコード エディターの 1 つであり、オープン ソースであり、無料で使用できます。複数の言語とフレームワークのサポートも提供します。 [推奨学習: 「vscode Getting Started Tutorial」]

これらの Visual Studio Code のショートカットは、VS Code の公式ドキュメントから引用されていることに注意してください。一部のショートカットが機能しない場合は、ショートカットのエディターまたはファイル形式が変更されたか、ショートカットに影響を与える拡張機能がインストールされていることが考えられます。

1. クイック ナビゲーション

1. ファイルの検索

特定のファイルを検索する必要がある場合、およびプロジェクトが大きい場合は、時間がかかります。 。ファイルの場所がわかっている場合でも、このショートカット キーを使用すると、プロジェクト内のファイルを簡単に開くことができて非常に便利です。

• Windows/Linux: ctrl P
• macOS: command P

2. 設定を開く

Visual Studio Code には、必要に応じて変更できる多くの機能と設定があります。このショートカットを使用すると、必要なときに簡単に設定を開くことができます。

• Windows/Linux: ctrl ,
• macOS: command ,

3. スイッチ側サイドバー

多くの場合、処理する必要があるファイルを配置するために、より多くのスペースが必要になります。したがって、このショートカット キーを使用すると、サイドバーを表示または非表示にすることができて便利です。

• Windows/Linux: Ctrl B
• macOS: コマンド B

4. ナビゲーション タブ

多数のタブを開いてタブ間を切り替える必要がある場合、このショートカット キーを使用できます。タブ リストが表示され、タブ間を移動して、開くタブを選択できます。

• Windows/Linux: Ctrl シフト タブ
• macOS: コントロール シフト タブ

5.ナビゲーション タブ グループ

Visual Studio Code は、タブ グループを作成する機能を提供します。タブ グループを使用すると、タブをグループ化して、それぞれが画面の一部を占めることができます。このショートカット キーを使用して、さまざまなタブ グループを切り替えます。ショートカットで選択したタブ グループが現在開いているグループの数より大きい場合、このショートカットは新しいグループを作成します。

• #Windows/Linux : Ctrl 1 または 2 または 3
• macOS: コマンド 1 または 2 または 3

6. ターミナルを開く

開発プロセス中、ターミナルは頻繁に使用されます。 Visual Studio Code を使用すると、エディター内でターミナル ウィンドウを開くことができます。これにより、エディタとターミナルの間で切り替える必要がなくなり、エディタとコードに集中できるようになります。

• Windows/Linux: Ctrl J
• macOS: コマンド J

7. コマンド パネルを開く

Visual Studio Code では多くのコマンドを実行できます。このショートカット キーを使用すると、コマンド パレットを簡単に開くことができます。コマンド パレットを使用すると、使用可能なコマンドを検索して実行できます。

#Windows/Linux
• : Ctrl シフト P
macOS
• : コマンド シフト P

##2. 素早い選択

開発プロセス中、コピー、切り取り、その他の操作を含むコード内で選択を行うことが必要になることがよくあります。マウスを使用する代わりに、キーボードを使用すると時間を節約できます。これらのショートカット キーは、選択を迅速に行うことに重点を置いています。

1. 現在の行を選択します

このショートカット キーを使用すると、カーソルがある行のコード行全体をすばやく選択できます。

Windows/Linux

: Ctrl L
• macOS
: コマンド L
• 2. 現在の選択内容

このショートカット キーを使用すると、検索するテキストを 1 回選択するだけで、ファイル内のすべてのテキストを選択できるため、これらのテキストを同時に編集できます。

Windows/Linux

: Ctrl シフト L
• macOS
: コマンド シフト L
• 3.現在の Word

このショートカットは、何も選択せずに、上記のショートカットと同じアクションを実行します。カーソルが単語の上に置かれているときにこのショートカット キーを押すと、現在のファイル内のこの単語のすべての位置が選択されます。

Windows/Linux

: Ctrl F2
• macOS
: コマンド F2 fn

4. 単語の最後まで選択します

コードの一部を選択すると、このショートカットの選択範囲を移動および展開できます。右矢印または左矢印を使用して、希望の方向に進むことができます。

• #Windows/Linux : シフト alt → または ←
• macOS : シフト オプション → または ←

5. マウスをドラッグしてコードの複数行を選択します。

##コード上でカーソルをドラッグして、最初から最後まで各行を選択します。ただし、このショートカットを使用して、コードの一部の行を選択することもできますが、ドラッグするコードの複数行のみを選択できます。

#Windows/Linux

: shift alt カーソルをドラッグ
• macOS
: shift オプションでカーソルをドラッグ
• 6. 矢印キーを使用してコードの複数行を選択する

このショートカット キーを使用して上記の操作を実行することもできますが、マウスを使用する代わりにキーボードの矢印キーを使用します。

Windows/Linux

: ctrl Shift alt → または ← または ↓ または ↑
• macOS
: コマンド Shift オプション → または ← または↓ または ↑

3. クイック検索

すべてのエディタには検索機能があり、現在のファイルまたは複数のファイルを検索できます。関数名や変数名、語句、コードブロックなどの単語。検索機能に関するショートカットキーを見てみましょう。

1. 結果のナビゲーション

このショートカット キーを使用して、ファイル内の検索結果間を移動できます。

Windows/Linux

:F3
• macOS
:F3 fn
• 2. 複数の結果を選択します

複数の検索結果を変更する場合は、このショートカット キーを使用して、ファイル内の検索結果の複数の内容を選択できます。このキーを押すたびに、結果が 1 つ選択され、その後、を押す 検索結果が順番に選択されます。

Windows/Linux

: ctrl D
• macOS
: command D
• 3. すべての結果を選択

検索機能を使用してすべての検索結果を変更する場合、このショートカット キーを使用してすべての検索結果を選択できます。

Windows/Linux

: alt enter
• macOS
: option enter
• 4. コード ナビゲーション

ファイルまたはプロジェクトが複雑になるにつれて、コードの特定の部分を見つけることがますます困難になります。手動でエラーを見つけたり、コードの特定の行に移動したりするのは難しい場合があります。次のショートカット キーを使用すると、多くの手間が省け、本当にやりたいことにもっと時間を費やすことができます。

1. 指定した行にジャンプします

指定したコード行でコンパイル エラーまたはランタイム エラーが発生した場合、このショートカット キーを使用して、このコード行にジャンプできます。このショートカット キーを押し、コードの行数を入力し、Enter キーを押してこのコード行にジャンプします。このショートカットは、ファイル内に大量のコードがある場合に非常に便利です。

Windows/Linux

: Ctrl G
• macOS
: G

2. 一致する括弧に移動

一致するコード ブロックの閉じ括弧を見つける必要がある場合があります。ファイルが長いと大変です。このショートカットを使用すると、現在のブロックに一致する右括弧を簡単に見つけることができます。 HTMLタグでは、現在のタグの末尾に移動できます。

Windows/Linux

: Ctrl シフト \
• macOS
: コマンド シフト \
• 3.コード ブロックの折りたたみ/展開

ファイルに大量のコードが含まれている場合、現在注目していない特定のコード ブロックを折りたたんで (非表示にして)、他のコンテンツに集中できるようにすることができます。このショートカット キーは、コード ブロックを折りたたんだり展開したりするために使用されます。コード ブロック内の任意の場所をクリックし、次のキーを押すだけです。

#Windows/Linux

: Ctrl Shift [または]

• macOS : コマンド オプション [または]
• 4. コード ブロックとサブコード ブロックの折りたたみ/展開##コード ブロックにサブコード ブロックが含まれている場合はどうなりますか?上記のコマンドを使用すると、親コード ブロックが折りたたまれますが、親コード ブロックが展開されても、子コード ブロックは変更されません。コード ブロックとそのサブコード ブロックを折りたたんだり展開したりする必要がある場合は、このショートカットを使用してそれを行うことができます。

Windows/Linux

: Ctrl K [または]

• macOS : コマンド K [または]
• 4. エラーと警告に移動します。コード内でエラーと警告が発生するコードを見つけることが重要です。このショートカットを使用すると、正確な問題を見つけるためにスクロールする手間が省けます。次のエラーまたは警告に直接進むことができます。
• Windows/Linux：F8
• macOS：F8 fn

5. カーソルを移動します

多くの場合、複数のカーソルをファイル内の異なる場所に配置する必要がある場合があります。これらのショートカットを使用すると、複数のカーソルを使った移動が簡単になります。

1. 特定の位置に追加のカーソルを挿入します

このキーボード ショートカットを使用すると、ファイル内の任意の場所に追加のカーソルを挿入できます。

• Windows/Linux : alt マウスのクリック位置
• macOS: オプションのマウスクリック位置

2. 追加のカーソルを上または下に挿入します。

カーソルを挿入する 2 番目の方法は、現在のカーソル位置の上または下にカーソルを挿入することです。

• #Windows/Linux : ctrl alt ↓ または ↑
• macOS : コマンド オプション ↓ または ↑
3. カーソルの挿入を元に戻す
カーソルが誤って挿入されたり、その位置にカーソルが不要になった場合はどうすればよいでしょうか?このショートカットは、最後に挿入したカーソルを元に戻します。このショートカット キーは、他のカーソルを所定の位置に保持し、最後に挿入したカーソルを削除するため、複数のカーソルを挿入する場合に便利です。
• Windows/Linux : ctrl U
• macOS : command U
4. [挿入] を選択します。コードの末尾にカーソルを置く
このショートカット キーを使用して、選択したコードの各行の末尾にカーソルを挿入します。
• Windows/Linux : シフト alt I
• macOS : シフト オプション I
6.クイック コーディング
1. コードの行またはブロックを移動する
多くの場合、1 行以上のコードをある場所から別の場所に移動する必要があります。コードをコピーまたはカットアンドペーストして別の場所に配置する代わりに、このショートカットを使用すると、コード行の上にカーソルを置くだけでより迅速な解決策が得られます。複数行のコードを移動する場合は、移動するコードを選択して、このショートカット キーを使用します。
• Windows/Linux : alt ↓ または ↑
• macOS: オプション ↓ または ↑
2. コードの行またはブロックをコピーします。
コードの 1 行または複数行をコピーして、下または上に貼り付ける必要がある場合はどうすればよいでしょうか。このショートカットでは、実際にコードをコピーして貼り付けるのではなく、矢印で選択した方向に応じてその下または上の行をコピーします。複数行のコードをコピーする場合は、コピーするコードを選択し、このショートカット キーを使用します。
#Windows/Linux
• : シフト alt ↓ または ↑
macOS
• : シフト オプション ↓ または ↑
3. コードのインデント

コードをある場所から別の場所にコピーするとき、またはコードを変更するとき、多くの場合、コードのインデントが正しくなくなります。このショートカットを使用すると、必要に応じてコードをインデントしたり、複数のコード行を選択してまとめて移動したりできます。

Windows/Linux
• : Ctrl [または]
macOS
• : コマンド [または]
4. コードのコメントを切り替える

このショートカット キーを使用して、カーソルがあるコード行をコメント化またはコメント解除します。複数行のコードをコメント化またはコメント解除する場合は、最初に複数行のコードを選択するだけです。

Windows/Linux
• : Ctrl /
macOS
• : コマンド /

5. コード ブロック コメントの切り替え

##上記のショートカット キーとは異なり、次のショートカット キーは、選択した複数行のコードを 1 つのコメントにコメント化します。
Windows/Linux
: シフト alt A
• macOS
: シフト オプション A

6. コード形式##読みやすさの理由から、コードで指定された形式を維持することが重要です。 Visual Studio Code には、コードをフォーマットするための 2 つのショートカット コマンドが用意されています。

次のショートカット キーを使用すると、ファイル全体のコードを書式設定できます:

Windows/Linux

: Ctrl SHIFT F
• macOS : オプション シフト F
• 次のショートカット キーで、選択したコードを書式設定できます:

Windows/Linux

: ctrl K、次に ctr l F
• macOS : コマンド K、次にコマンド F
• 7. エラーをすぐに修正する
多くの場合、一般的なエラーまたは単純なエラーの場合、 Visual Studio Code では、セミコロンの欠落などを直接修正できます。クイックフィックスが利用可能な場合、このショートカットによりエラーや警告を迅速に修正できます。
• Windows/Linux : ctrl .
• macOS : コマンド .

8.名前の変更

複数回使用される変数、関数、またはクラスの名前を手動で変更すると、間違いを犯しやすくなります。このショートカットは、シンボルの名前を変更する安全な方法を提供します。

• Windows/Linux: F2
• macOS: F2 fn

9. 空白を削除

次のショートカット キーを使用して余分な空白行を削除できます:

• Windows/Linux : ctrl K X
• macOS : コマンド K
10. プログラミング言語を変更する
デフォルトでは、Visual Studio Code は処理中のファイルのプログラミング言語を検出します。通常、これはファイルの拡張子を確認することで行われます。ただし、ファイルの拡張子がサポートされていない場合、言語が正しく検出されない可能性があります。したがって、ファイルのプログラミング言語を変更する必要がある場合は、このショートカット キーを使用できます。

#Windows/Linux

: Ctrl K を押してから M
• macOS : command K を押してから M
## を押します
• #7. より良いコーディング1. 定義に移動
多くの場合、使用しているコードの定義を理解する必要があります。たとえば、関数を呼び出したときにその関数がどのように定義されているかを知りたい場合、このショートカット キーを使用できます。
Windows/Linux

:F12

• macOS:F12 fn
• 2. ビューの定義このショートカット キーは、定義をチェックする定義を開くことができます。これにより、別のファイルやコード行に切り替えることなく、定義を簡単に表示できるようになります。
Windows/Linux

: alt F12

• macOS : オプション F12 fn
3. 提案の切り替え

コードを作成するとき、VS Code または一部の拡張機能はコードの提案を表示します。このショートカットを使用すると、コード候補の表示と非表示をすばやく切り替えることができます。

Windows/Linux

: ctrl I

• macOS : コマンド I
• VS コードは現在最高のコードエディターの 1 つ。すぐに使用できる多くの機能と豊富なサードパーティ拡張機能が提供されており、VS Code でショートカット キーを使用すると開発が容易になり、より短い時間で高品質のコードの作成に集中できます。この記事では、開発効率の向上に役立つことを願って、実用的な Visual Studio Code のショートカット キーをいくつか紹介します。 最後に、Windows、Linux、macOS システムにおける VS Code のショートカット キーを示します:



VSCode の詳細については、

vscode チュートリアル

をご覧ください。 ！

以上がVSCodeのショートカットを覚えて開発効率を高めましょう！の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。