オジサン、Mac版Visual Studio Codeのショートカットをカスタマイズしてみる

オジサンがHTMLをコーディングするのに使っているエディタはみんな大好きVisual Studio Code(以下vs code)である。

azure.microsoft.com

sublime TextやらAtomやらDreamWeaverやら散々エディタ沼にハマった挙句、vs codeに辿り着いた。 vs codeは無料配布とは思えぬほど多機能で、特にデフォルトで組み込まれているEmmetはHTMLやCSSを爆速で書けるのでオジサンには無くてはならぬ機能となっている。

そんな便利なvs codeであるが Macで使う場合不満点がいくつかある。

1)Windows版とショートカットが微妙に違う

オジサンは仕事ではWindowsを使っており、そちらでもvs codeを使っているのだが、 結構 Macとショートカットが違うので休み明けでMac⇨Windowsに戻った際に結構戸惑う。

例えば検索して置換するといった場合に、

WIndowsの場合:

【検索】ctrl + F 【置換】ctrl + H

Macの場合:

【検索】⌘ + F 【置換】⌥ + ⌘ + F

結構多用するショートカットなので若干混乱を覚えるのである。

2)Mac版では「行のインデント解除」のショートカットが何故か効かない

これはオジサン的に結構クリティカルな問題である。

ソースを複数行選択してまとめてインデントを入れたり、逆に解除したりといったケースは結構ある思うのだが、 Mac版のvs codeでは何故か行のインデント解除のショートカット「⌘ + [」が効いてくれない。以前は効いていたし、実際オフィシャルなショートカットとして設定されているにも関わらずだ。

とまぁ、ボヤいても仕方がない。ショートカットをカスタマイズしよう! 行動あるのみである。

vs codeのショートカットを変更する

vs codeのショートカット変更方法については以下の通り。

  1. vs codeを起動し、コマンドパレットを表示する(Shift + ⌘ + p)

  2. 一番上の検索バーに「key」と入力、入力するとサジェストに「Preferennces Open Keyboard Shortcuts」と出てくるのでクリックする。

  3. ショートカット定義が表示されるので、上の検索ボックスに「行のインデント解除(英語の場合はoutdentLine)」等のキーワード入力して検索⇨行のインデント解除が表示される
  4. 「行のインデント解除」の項目をフォーカスすると左に鉛筆アイコン?が表示されるのでクリック※項目名自体をダブルクリックでも可
  5. ダイアログ「任意のキーの組み合わせを押し、ENTERキーを押します。」が表示されるので、任意のキーの組み合わせを押し、ENTERキーをクリックする※今回はcontroキー+ [に変更 以上ショートカットの変更方法である。 ちなみに行のインデントも今回変更した行のインデント解除に合わせて contorol + ]に変更してある

置換についてもWindows版に寄せて、 ⌥ + ⌘ + F から ⌘ + H に変更した。

こういった細かい積み重ねが実際のプロの現場での効率化につながるのである。

皆さんもよろしければお試しあれ。