【Mac】VSCodeでステップイン(F11)させるショートカットキーの設定方法

最近試しにVSCodeを使っていて、Atomとどちらか良いか悩み中です。VSCodeはプログラムを手軽にデバッグできるので、良い感じです。

しかし、デバッグ時にステップイン（今いる行の関数の中に入る）をしようとしてショートカットのF11キーを押すと、設定によりますが以下のようなMacOSの機能が実行されてしまう場合があります。

• Macのスピーカーの音量を下げる
• デスクトップを表示する（開かれているウィンドウが四隅に寄る）

これはMacOSのデフォルトのショートカットキーがVSCodeのものと重複して、別の機能に設定されていることが原因です。対処法として以下の2つがありますが、どちらか片方で十分です。

1. MacOS側の設定で対処する方法
2. VSCode側の設定で対処する方法

私はVSCodeが上手く動かなくなって、再インストールしても設定が変わらない前者を採用しています。

私の環境は以下の通りです。

どちらにしてもやっておいた方が良い共通設定

Macのデフォルトの状態だと、各ファンクションキーを押すとそれぞれに印字されている機能（特殊機能）を使用できるようになっています。F11だとMacのスピーカーの音量を下げます。

この状態だとfnキーを押さないと標準のファンクションキーとして使用できません。以下で述べるfnの押下を不要にした設定にすると、MacOS側 or VSCode側のどちらで対処するにしてもファンクションキー単体で操作できるので、作業が楽になります。

fnキーの押下を不要にする

[メニューバーのリンゴマーク] > [システム環境設定…] > [キーボード]を選択してキーボード設定画面を表示します。

[キーボード]タブの[F1、F2などのキーを標準のファンクションキーとして使用]を有効にします。

F11を例にすると、この設定によって押下時に以下のような挙動になります。

1. MacOS側の設定で対処する

MacOSのデフォルトでF11押下は「デスクトップ表示」と設定されています。これが優先して採用されることがVSCodeのデバッグ時にショートカットキー経由でステップイン出来ない原因なので、この設定を変更します。（冒頭の画像のようにメニューバーからの実行は常時可能）

F11キーでMacOSが反応しないようにする

前述したキーボード設定画面の[ショートカット]タブ > [Mission Control]を選択した状態で、[デスクトップを表示]の右端にある[F11]をクリックします。

するとショートカットキーが編集できる状態になるので、好きなキーの組み合わせを押すとショートカットキーを変更できます。

私の場合は、以下のようにcommand + dに設定しています。

これでショートカットキーの重複が無くなったので、F11を押せばステップインができるようになりました。

他のショートカットキーを設定したい場合

以下のMacのショートカットキーの一覧を参考にして、よく利用するショートカットと重複しないように設定するのがオススメです。

Mac のキーボードショートカット - Apple サポート (日本)

特定のキーを組み合わせて押すだけで、通常ならマウスやトラックパッドなどの入力デバイスが必要な操作を実行できます。

support.apple.com

2. VSCode側の設定で対処する

• 「デスクトップ表示はF11じゃないと気持ち悪い！」
• 「ステップインのキーはこれと決めている！」

という方は、以下をお試しください。

ステップインのショートカットキーを変更する

VSCodeを起動して、[左下の歯車アイコン] > [キーボード ショートカット]を選択します。

検索欄から「f11」で検索すると以下のようにF11を含むショートカットキーの一覧が表示されます。

「ステップインする」の左端にマウスポインタを置くと[鉛筆アイコン]が表示されるので、それをクリックするとショートカットキーを変更できます。

私が変更するとしたら、以下のようにChromeのデベロッパーツールのショートカットに合わせた設定にすると思います。

まとめ

MacのVSCodeでステップインするショートカット周りの設定を変更する方法をまとめました。

ショートカットが使えるようになると日々の作業効率が上がります。小さな積み重ねですが割と重要です。