エディター

【コーディング倍速化】Visual Studio Codeのショートカットキー・補完機能一覧

生徒さん
生徒さん
コーディングをもっと早くするショートカットキーはないのかな・・・

このような疑問の解決記事です。

コーディングに慣れてきたら、次にぶつかる壁として、工数削減があります。
Visual Studio Code(以下VS Code)には、時短化できるショートカットキーや補完機能が数多くあります。

本記事では、エンジニアとして現場でよく使用するものを記載しましたので、時短化にお役立てください。

なぜVS Codeを使用するようになったか?

最初はSublimeTextを使用していましたが、
以下の観点からVS Codeを使用するようになりました。

  • フォルダ・ファイル作成が容易
  • プラグインが豊富
  • ターミナル機能が使える

他にもありますが、後に制作→開発に携わるつもりであれば、VS Codeが便利なので使えるようにすると良いと思います。

 

ショートカットキー・補完機能一覧

実務現場で使っているものをまとめました。

ショートカットキー

コメントアウト 行を選択後、 command + /
 同じコードの複数選択 テキストを選択後、 command + d
行移動 option + カーソルキー(↑ or ↓)
行コピー option + shift + カーソルキー(↑ or ↓)
指定行に飛ぶ Control + g + 行数
(※devツールで行数確認後に使用)
行先頭・末尾移動 command + カーソルキー(← or →)
ファイル名で検索 command + p

 

補完機能

ここでお伝えしているのは一例ですが、入力方法によって、補完してくれる機能はまだあります。
以下をヒントに、どんなものがあるか試してみてください。

font-size: 22px; f + z + 22 + p + tabキー
font-weight: bold; f + w + b + tabキー
text-align: center; t + a + c + tabキー
width: 960px; w + 960 + tabキー
width: 50%; w + 50 + p + tabキー
margin: 40px; m + 40 + tabキー
margin-bottom: 40px; m + b + 40 + tabキー
padding: 40px; p + 40 + tabキー
padding-bottom: 40px; p + b + 40 + tabキー
background-color: #fff; b + g + c + tabキー

 

その他便利機能

VS Codeのみの機能ではなく、他のエディターにもある機能です。

折り畳み 行数の隣にある、矢印マークをクリック
(※閉じタグまでの範囲が即分かる)

 

 

まとめ

本記事では以下のことをお伝えしました。

  • なぜVS Codeを使用するようになったか?
  • ショートカットキー・補完機能一覧

VS Codeには、コーディングを倍速化できるショートカットキーや補完機能が多くあります。普段の作業で使えそうなものは取り入れ、時短化すると良いでしょう。

ABOUT ME
大城ゆう
エンジニア歴5年。 大学卒業後、フィールドエンジニア職に就くがその後のキャリアに不安を感じ、ゼロスキルからWEBデザイナーに転職。 その後WEB制作会社、東証一部上場企業のECサイト担当を経て、現在は自社開発企業のWEBエンジニアとして仕事をしている。