「Visual Studio Code（通称：VS Code／VSコード）」について、これまで3回に渡って基本的な使い方を学んできました。これからたくさん使ううえで、最初のうちに知っておいた方が良い便利機能ってあるのかなと調べてみたところ、オススメがけっこうありそうなので、こちらをご紹介していきます😃
これだけ知ってれば当面困らない便利機能
VSコード、ようやく慣れてきたけど、もっと使いやすくなるような便利な機能ってないかな？
あとから「もっと早く知っておけばよかったーっ」って後悔したくないもんね。初心者でもすぐ使えるようなものが知りたいけど、先生あるかな？
オススメは全部で６個あります。いずれも便利な機能なので、ぜひ使ってみてください！
※本記事は主に Mac（macOS）環境で確認しています。
Windows環境での動作は未検証ですが、公式ドキュメントでは同様の操作が可能とされています。
Windows版の詳細については、以下の公式ドキュメントを参考にしてください。
（Visual Studio Code 公式：Windows用キーボードショートカット一覧）
https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf
① ファイルを一気に探せる「クイックオープン」
操作
Ctrl + P （Windows） ／Cmd + P （Mac）
→開きたいファイル名を入力。候補が表示されたら開きたいファイルを選択してEnterを押すと、該当ファイルを開ける
主な用途
- ファイル名を少し打つと、すぐに開きたいファイルが探せる
- エクスプローラー（Finder）からファイルを探す必要なし
おお、手軽そうでいいじゃん😄
お、ライ太来たね！ これは確かにスピーディーに作業できそうだね〜。
エクスプローラー（Finder）とVSコードを、行ったり来たりしなくていいのは助かるなぁ。
② 文字を一括で直せる「検索と置換」
操作
- （検索）
Ctrl + F （Windows） ／Cmd + F （Mac）
→検索すると該当箇所に色がつき、検索結果でEnterを押すごとに次の箇所にジャンプできる - （置換）
Ctrl ＋ H （Windows） ／Cmd+option ＋ F （Mac)
→検索と置換のボックスが表示され、検索語句を任意の語句に置換できる。入力後Enterを押すことで置換できる
主な用途
- class名・id名の一括変更
- 手作業の修正ミスを防げる
これだけ文字量多いと、どこに何があるかわからなくなっちゃうから助かるなぁ〜。
フン……ニンゲンのコードは長すぎるんだよ。まとめて一気に変えられないと、オイラでも迷子になるわ😤
目で探しながら1つずつ修正すると、直しもれが多そうだし、こっちで確実に変更していきたいね。
その通りですね。人の目で追う作業はミスの原因になりがちです。だからこそ、検索や一括置換のような“道具”を上手に使うことが大切ですよ。
③ 実行すると自動で整えてくれる「フォーマット」
⬇️
操作
- 右クリック →「ドキュメントのフォーマット」
- ショートカット「
Shift + Alt + F （Windows） ／ Shift ＋ option ＋F（Mac)
主な用途
- インデントを自動で揃える
- 見た目が一気にキレイ
うわっ！ スゴッ！！！ こんなグチャグチャなのが、あっという間にそろうんだ！
これはさすがにオイラでもビックリしたぜ！ 適当に書いていても一発でキレイになるんだな。
細かいインデントの調整とか、手動でやると大変だからこれはありがたいなぁ。一発で整理整頓できる感じだね。
そうですね。見た目が整うだけでなく、“正しい構造”に自動で直してくれるのがポイントです。こまめに整形するクセをつけると、あとから読む自分も楽になりますよ。
④ タグの対応が一瞬で分かる「対応タグの強調表示」
操作
- 開始タグ or 終了タグをクリック
主な用途
- 対応するタグがハイライトされる
- div地獄（※）で迷子にならない（※どのdivがどこで終わっているのかわからない状態のことです）
👉 初心者あるある救済ポイント
これは地味にありがたいなぁ。同じようなタグがたくさんあると、どことどこが対応しているか、よくわからないもんね。
フン……この機能がなかったら、オイラもう div の迷宮から帰ってこれなかったかもしれんぞ。初心者だけじゃなく、ベテランにも必要だな😤
えっ、ベテランでも迷うんだ……。じゃあこれ、最初から“使って当たり前”の機能って思っていいんだね。
その通りです。便利な機能は“慣れてから使うもの”ではありません。最初から使って、迷わない時間を増やす――それが上達への近道ですよ。
⑤ コメントアウト（消さずに一時的に無効化）
⬇️
操作
Ctrl + /（Windows） ／Cmd + /（Mac)
主な用途
- 一時的にコードを止める
- 実験・比較がしやすい
フン……消さずに止められるってのがミソだな。直す前に試せるし、戻すのも一瞬。下手に消して迷子になるより、よっぽど賢いやり方だぜ。
大幅に直さなくても、変化を確認できるってのはいいね。
なるほど〜。いきなり全部直さなくても、まず“止めて比べる”でいいんだ。失敗が怖くなくなるの、ありがたいね。
その理解で正解です。コメントアウトは“安全に試すためのブレーキ”。慣れてくるほど、手放せなくなる基本機能ですよ。
⑥ タブの分割表示（HTMLとCSSを同時に見る）
操作
- ファイル名上で右クリックして「横に並べて開く」
- タブを右にドラッグ（具体的は手順は以下動画を参照ください）
主な用途
- HTML と CSS を見比べながら作業
- 画面切り替えが減る
個人的には一番うれしい機能だよ！ HTMLとCSSを毎回表示を切り替えるのは面倒すぎるので、いっぺんにまとめて見られるのは、本当に助かる。
フン……。画面行ったり来たりしなくていいのは助かるな。ムダな動きが減るだけで、作業って一気にラクになるもんだ。
たしかに！ HTMLとCSSを並べて見られると、“ここがこう効いてるんだ”って分かりやすいね。
その通りです。分割表示は“考える時間を増やして、切り替えの疲れを減らす”ための機能。作業効率を底上げしてくれますよ。
まとめ：全部使わなくていい
VS Codeにはたくさんの機能がありますが、最初からすべてを覚える必要はありません。
最初のうちは、
- ファイルを開く
- コードを書く
- ブラウザで表示を確認する
この流れができていれば十分です。
今回紹介した便利機能も、「今すぐ全部使おう」と思わなくてOK。作業をしていて、
「これ、毎回ちょっと面倒だな」
と感じたときに、この記事を思い出して1つ試してみる。それくらいの距離感でちょうどいいです。
VS Codeは、使い込むほど少しずつ助けてくれるツールです。焦らず、自分のペースで、必要な機能を1つずつ増やしていきましょう。
そうだね〜。いっぺんに覚えると頭がパンクしそうだし、少しづつ使って覚えていけばいいかなぁ。
……まぁ、その通りだな。使わねぇ機能をムリに覚えるより、困ったときに思い出せりゃ十分だ。
うんうん。最初から完璧を目指さなくていいし、“あ、これ前に見たな”くらいでOKだよね。必要になったタイミングで、少しずつ使えるようになれば十分かな。
ということで、今回はVSコードのオススメ便利機能をご紹介してきました。けっこう効率よくなって、ミスも減るかと思いますので、必要に応じてご利用いただければと思います。ではでは😀
