記事内に商品プロモーションを含む場合があります
生徒さん
コーディングをもっと早くするショートカットキーはないのかな・・・
このような疑問の解決記事です。
コーディングに慣れてきたら、次にぶつかる壁として、工数削減があります。
Visual Studio Code（以下VS Code）には、時短化できるショートカットキーや補完機能が数多くあります。
本記事では、エンジニアとして現場でよく使用するものを記載しましたので、時短化にお役立てください。
なぜVS Codeを使用するようになったか？
最初はSublimeTextを使用していましたが、
以下の観点からVS Codeを使用するようになりました。
- フォルダ・ファイル作成が容易
- プラグインが豊富
- ターミナル機能が使える
他にもありますが、後に制作→開発に携わるつもりであれば、VS Codeが便利なので使えるようにすると良いと思います。
ショートカットキー・補完機能一覧
実務現場で使っているものをまとめました。
ショートカットキー
| コメントアウト | 行を選択後、 command + / |
|---|---|
| 同じ単語の複数選択 | テキストを選択後、 command + d |
| 同じ単語の全選択 | テキスト上にカーソルがある状態で、command + shift + l |
| 行移動 | option + カーソルキー（↑ or ↓） |
| 行コピー | option + shift + カーソルキー（↑ or ↓） |
| 行削除 | command + shift + k |
| 指定行に飛ぶ | Control + g + 行数 （※devツールで行数確認後に使用） |
| 行先頭・末尾移動 | command + カーソルキー（← or →） |
| ファイル名で検索 | command + p |
| コードの整形 | option + shift + f |
補完機能
ここでお伝えしているのは一例ですが、入力方法によって、補完してくれる機能はまだあります。
以下をヒントに、どんなものがあるか試してみてください。
| 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には、コーディングを倍速化できるショートカットキーや補完機能が多くあります。普段の作業で使えそうなものは取り入れ、時短化すると良いでしょう。
