Visual Studio Codeで覚えておくといつか必ず役に立つテクニック(ショートカット、拡張機能等)をご紹介していきます。

Visual Studio Codeは開発環境のデファクトスタンダードになりつつある今日この頃、ただ使うだけではなく使いこなすことも重要になってきます。そこで覚えておくと絶対に役立つ、「お、こいつできるやん」と思われるようなテクニックやショートカットを記述していきたいと思います。

共にVisual Studio Codeを使いこなしましょう。

新しいテクニックを覚えるたびに更新していきます。

1行を即時コメントアウトする

わざわざカーソルを当てて、1行を選択してなんて・・・なんて面倒な作業は今日で終わりです。
このコマンドを使えば一発でコメントアウトすることができます。

使用方法

Mac: cmd + /
Windows: ctrl + /

使用画面

ソース名を検索して表示

ソースコード開く時、マウスを使用してサイドバーから開きたいファイルを選んで表示する方が多いのではないでしょうか。
もしソース名がわかっているなら、もうそれをする必要はありません。ソース名を入力し、ディレクトリ全体から検索してソースコードを開く機能があります。

使用方法

Mac: cmd + P
Windows: ctrl + P

使用画面

ディレクトリ全体検索(ソース内部も含む)

入力したテキストに対して、VSCodeで開いているフォルダ内全てのファイルを検索し、その検索結果を表示してくれます。
「別ファイルで定義した定数名を変更したけど、どこでこの定数を使用したのかわからない」なんて時にこの機能を使うとすぐにどのファイルの何行目に定数が定義されているかがわかります。

使用方法

Mac: cmd + shift + F
Windows: ctrl + shift + F

使用画面

ターミナルとエディタを行き来するショートカット設定

エディタでソースを修正し、ターミナルで実行するなんて作業を何度も繰り返すと、その度にマウスを動かしてフォーカスを変えなければいけません。これは非常に面倒です。自分でショートカットを作成して効率化しましょう。

使用方法

１．「cmd(ctrl) + shift + p」でコマンドパレットを起動し、「Keyboard Shortcuts (JSON)」を開く

２．以下の内容をファイルに追加する

３．ファイルを保存する

短形選択（カーソル幅の変更）

似たような行がつらつらと並んでいる状況。同じ箇所を全く同じように変更したいだけなのに、いちいちカーソルを当てながら変更するのは面倒ですよね。
そこでこのショートーカットを使ってカーソルの幅を大きくし、一括で追加＆変更を行いましょう。

使用方法

Mac: cmd + opt + ↑(↓)
Windows: ctrl + alt + ↑(↓)

使用画面

タブで開いているファイルが別のファイルに上書きされる

タブで開いているファイルが、他のファイルを開くタイミングで勝手に上書きされて閉じる！なんてこと、VSCodeを使用していると皆さんはすでに経験済みかもしれません。
その原因は、VSCodeがファイルをPreview mode(チラ見モード)で開いているからです。

Preview modeで開かれているかどうかの判断方法

よく見ると、Preview modeで開いているファイルはタブのファイル名がイタリック（斜め文字）になっています

紛らわしい！無効にしたい！という方は以下の方法で無効化できます。

無効化方法

• ファイルをダブルクリックで開く
• 設定ファイル（User Settings）で以下の記述を追記する