VSCode（Visual Studio Code）は、無料かつ多機能で、Web制作やプログラミングに欠かせないエディタです。
でも、ただ使っているだけではもったいない！
この記事では、コーディングスピードを劇的に上げる「ショートカットキー」と「おすすめ拡張機能」を厳選して10個ご紹介します。
覚えておきたいVSCodeショートカット5選
複数行の同時編集（Shift + Alt + 矢印 ↓↑）
複数行に同じ操作をしたいときに便利！
例：複数の行に一括で<div>タグを追加したいときなど。
コマンドパレットを開く（Ctrl + Shift + P / Cmd + Shift + P）
VSCodeの全機能を呼び出せるパワーコマンド。
拡張機能の実行や設定変更もここから！
行の移動（Alt + ↑↓）
今書いている行をサクッと上下に移動できる。
リファクタリング時にかなり使えます。
行の複製（Shift + Alt + ↓）
現在の行を一発でコピー！
定型文やリストの連続作成に便利です。
全コード整形（Shift + Alt + F）
書き散らしたコードを一発でキレイに整形してくれます（Prettierが入っているとより強力）。
おすすめVSCode拡張機能5選
Prettier – Code Formatter
コードを自動整形してくれる定番ツール。
保存時に自動で整えてくれる設定が便利！
Live Server
HTMLファイルをリアルタイムでブラウザ表示してくれる神拡張機能。右クリック → Open with Live Serverで即反映！
Auto Rename Tag
HTMLやJSXのタグ編集で、開始タグを変更したら自動で閉じタグも更新してくれます。
地味に神。
ESLint
JavaScriptの書き方をチェックし、バグの元になるコードを未然に防ぐ。
チーム開発ではほぼ必須！
GitLens
Git履歴を可視化できるツール。
誰が・いつ・どこを編集したかが一目でわかるので、コードレビューが超捗ります。
まとめ
| 分類 | 名称 | 効果 |
|---|---|---|
| ショートカット | 複数行編集 | 同じ操作を複数行に一括適用 |
| ショートカット | 行の移動・複製 | スピーディな構造変更 |
| ショートカット | 整形＆コマンドパレット | 作業効率アップ |
| 拡張機能 | Prettier / ESLint | コード整形＆品質チェック |
| 拡張機能 | Live Server / Auto Rename Tag | 実装と確認がリアルタイムで進む |
| 拡張機能 | GitLens | バージョン管理の視認性UP |
おわりに
VSCodeは、使いこなすほど生産性が爆上がりするツールです。
今回紹介したショートカットと拡張機能をまずは一つずつ取り入れて、効率的なコーディングライフを送りましょう！
コメント