VSCode（Visual Studio Code）では、対応する括弧の位置へショートカットキーで素早く移動できます。
プログラムでは、()、[]、{}などの括弧が何重にも入れ子になることがあります。
特に関数や条件分岐、ループ処理などが長くなると、「この開始括弧に対応している終了括弧はどこか」を探すだけでも時間がかかります。
VSCodeには「Go to Bracket」という機能が標準搭載されているため、拡張機能を追加しなくても対応する括弧へ移動できます。
VSCodeで対応する括弧へ移動するショートカット
Windowsで括弧へ移動する
Windows版VSCodeでは、次のショートカットキーで対応する括弧へ移動できます。
Ctrl + Shift + \たとえば、次のようなコードがあるとします。
function hello() {
console.log("Hello");
}{の付近にカーソルを置いてCtrl + Shift + \を押すと、対応する}の位置へ移動できます。
もう一度同じショートカットを実行すれば、反対側の括弧へ移動できます。
長い関数や条件分岐の終了位置を確認するときに便利な操作です。
Linuxで括弧へ移動する
Linux版VSCodeでも、基本的にはWindowsと同じショートカットキーを使用します。
Ctrl + Shift + \WindowsとLinuxの両方を使用している場合でも、同じ操作で対応する括弧へ移動できるため覚えやすいでしょう。
macOSで括弧へ移動する
macOS版VSCodeでは、標準のキーバインドとして次の操作が設定されています。
Shift + Command + \キーボードレイアウトや独自のキーバインド設定によっては、実際のキー操作が異なる場合があります。
ショートカットが機能しない場合は、VSCodeの「Keyboard Shortcuts」画面で現在の設定を確認すると確実です。
VSCodeで移動できる主な括弧
丸括弧・角括弧・波括弧に対応している
一般的なプログラミング言語では、主に次のような括弧の対応関係をVSCodeが認識します。
( )
[ ]
{ }たとえばJavaScriptでは、次のようなコードがあります。
if (user.isLoggedIn) {
const items = [
"apple",
"orange",
"banana"
];
}この場合、
( ↔ )
{ ↔ }
[ ↔ ]のように、それぞれ対応する括弧へ移動できます。
ただし、厳密にはどの文字を括弧として扱うかは、使用しているプログラミング言語の設定にも依存します。
括弧付近にカーソルを置いて操作する
必ず括弧そのものにカーソルを置く必要はない
括弧移動を使用するときは、基本的に対象となる括弧の付近へカーソルを移動してからショートカットを実行します。
たとえば、
function calculateTotal() {というコードで{付近にカーソルを置き、
Ctrl + Shift + \を押すと、対応する終了側の}へ移動できます。
ただし、VSCodeでは必ずしもカーソルを括弧そのものに合わせる必要はありません。
カーソル位置で対応する括弧が見つからない場合には、カーソルを囲んでいる括弧などをVSCodeが探索することがあります。
そのため、「括弧付近で操作する」と覚えておくとよいでしょう。
コマンドパレットから括弧へ移動する方法
Go to Bracketを実行する
ショートカットキーを覚えていない場合は、コマンドパレットから括弧移動を実行できます。
Windows・Linuxでは、
Ctrl + Shift + PmacOSでは、
Command + Shift + Pを押してコマンドパレットを開きます。
続いて、
Go to Bracketと入力してコマンドを実行します。
これで対応する括弧へ移動できます。
なお、VSCodeの公式ショートカット一覧では、この機能が「Jump to matching bracket」と表記されることがあります。
内部的なコマンドIDは次のとおりです。
editor.action.jumpToBracket記事や設定ファイルを確認するときは、
- Go to Bracket
- Jump to matching bracket
- editor.action.jumpToBracket
の3つが同じ括弧移動機能を指していると考えると分かりやすいでしょう。
括弧移動のショートカットを変更する方法
Keyboard Shortcutsを開く
標準のショートカットが押しにくい場合は、自分が使いやすいキーに変更できます。
Windows・Linuxでは、
Ctrl + K
Ctrl + Sを順番に押します。
macOSでは、
Command + K
Command + Sを使用します。
Keyboard Shortcuts画面が表示されたら、
Go to Bracketまたは、
bracketなどで検索します。
対象のコマンドを見つけたら、任意のショートカットキーへ変更できます。
keybindings.jsonから変更する
VSCodeでは、keybindings.jsonを直接編集してキーバインドを設定することもできます。
たとえば、WindowsでCtrl + Alt + Bを括弧移動に割り当てる場合は、次のように設定できます。
{
"key": "ctrl+alt+b",
"command": "editor.action.jumpToBracket",
"when": "editorTextFocus"
}重要なのは、次のコマンドIDです。
editor.action.jumpToBracketこのコマンドを任意のキーへ割り当てることで、自分に合った操作方法へ変更できます。
ただし、すでに同じキーが別のコマンドに割り当てられている場合は、キーバインドが競合する可能性があります。
Bracket Pair Colorizationで括弧を見やすくする
VSCodeでは括弧の色分けが標準機能になっている
VSCodeには「Bracket Pair Colorization」という機能が標準搭載されています。
これは、入れ子になった括弧を階層ごとに異なる色で表示する機能です。
たとえば、
if (condition) {
items.forEach((item) => {
console.log(item);
});
}のように括弧が何重にも重なっている場合でも、それぞれの括弧ペアを視覚的に判別しやすくなります。
現在のVSCodeではBracket Pair Colorizationは標準で有効になっているため、多くの場合は特別な設定をしなくても利用できます。
Bracket Pair Colorizationを設定する
設定ファイルでは、次の項目で有効・無効を切り替えられます。
"editor.bracketPairColorization.enabled": true無効にする場合は、
"editor.bracketPairColorization.enabled": falseと設定します。
以前は「Bracket Pair Colorizer」などの拡張機能がよく利用されていましたが、現在はVSCode本体に括弧の色分け機能が搭載されています。
そのため、括弧を色分けする目的だけで同種の拡張機能を追加する必要は基本的にありません。
Bracket Pair Guidesで括弧の範囲を確認する
括弧ペアをガイド線で表示できる
括弧が多いコードでは、「Bracket Pair Guides」も便利です。
Bracket Pair Guidesを使用すると、対応する括弧の範囲をガイド線で確認できます。
設定ファイルでは、たとえば次のように指定できます。
"editor.guides.bracketPairs": trueJavaScriptやTypeScript、Java、C#などで長い条件分岐や関数を書く場合、どの括弧がどの処理範囲に対応しているのか把握しやすくなります。
Bracket Pair Colorizationと組み合わせて使用すると、複雑なコードの構造をさらに追いやすくなります。
VSCodeで括弧へ移動できない原因と対処法
カーソル位置を確認する
ショートカットを押しても期待した括弧へ移動できない場合は、まずカーソル位置を確認します。
対象となる、
(
[
{などの近くにカーソルを移動してから、もう一度ショートカットを実行してみてください。
VSCodeは周辺の括弧を探索する場合もありますが、目的の括弧付近で操作するほうが確実です。
括弧が正しく閉じられているか確認する
開始括弧に対応する終了括弧が存在しない場合、期待どおりに移動できないことがあります。
たとえば、
function test() {
console.log("test");では、関数を閉じる}がありません。
このような状態では括弧ペアが成立していないため、まず括弧の閉じ忘れや構文エラーがないか確認しましょう。
ショートカットキーの競合を確認する
拡張機能や独自のキーバインドによって、
Ctrl + Shift + \が別の機能に割り当てられている場合があります。
WindowsやLinuxでは、
Ctrl + K
Ctrl + SからKeyboard Shortcutsを開き、
Go to Bracketを検索してください。
現在どのキーが割り当てられているか確認できます。
キーボード配列を確認する
日本語配列のJISキーボードとUSキーボードでは、\などの記号キーの位置が異なります。
そのため、
Ctrl + Shift + \と表示されていても、使用しているキーボードによって押し方が分かりにくいことがあります。
うまく操作できない場合は、Keyboard Shortcuts画面で実際のキーバインドを確認し、押しやすいキーに変更するとよいでしょう。
括弧への移動とコードの折りたたみは別の機能
FoldとGo to Bracketを使い分ける
VSCodeには、括弧移動とは別にコードを折りたたむ機能があります。
Windowsでは、代表的なショートカットとして、
Ctrl + Shift + [でコードを折りたたみ、
Ctrl + Shift + ]で展開できます。
ただし、これは対応する括弧へ移動する機能とは別物です。
対応する括弧の位置へカーソルを移動したい場合は、
Ctrl + Shift + \を使用します。
一方、長い関数や条件分岐を一時的に非表示にしたい場合は、Fold・Unfoldを使用します。
目的に応じて使い分けると、コード編集が効率的になります。
VSCodeでは括弧移動を覚えておくと便利
VSCodeで対応する括弧へ移動したい場合は、「Go to Bracket」を使用します。
Windows・Linuxでは、
Ctrl + Shift + \macOSでは、
Shift + Command + \が標準的なショートカットです。
特に長い関数や条件分岐では、画面をスクロールしながら終了位置を探すよりも、括弧移動を使用したほうが素早くコードの構造を確認できます。
また、現在のVSCodeにはBracket Pair Colorizationが標準搭載されているため、対応する括弧を色で確認することもできます。
さらに、
"editor.guides.bracketPairs": trueを利用してBracket Pair Guidesを表示すれば、ネストが深いコードでも処理範囲を把握しやすくなります。
「Go to Bracket」「Bracket Pair Colorization」「Bracket Pair Guides」を組み合わせることで、VSCode上で複雑なコードを読み書きするときの効率を高められます。
以上、VSCodeで括弧の位置へ移動する方法についてでした。
最後までお読みいただき、ありがとうございました。
