プログラミングやWeb制作を始めるとき、最初に手に入れるべき道具がVS Code(Visual Studio Code)です。無料・軽快・全言語対応で、いまや世界標準のコードエディタ。ただし初期状態は英語表示のそっけない画面で、ここで戸惑う初心者が少なくありません。
この記事では、インストール直後にやるべき設定5つ、覚えるべきショートカット、用途別の拡張機能を「最小限」に絞って解説します。
インストール
公式サイト(code.visualstudio.com)からダウンロードします。Windowsはインストール時に「PATHへの追加」にチェック(既定でオン)、「エクスプローラーのコンテキストメニューに追加」もオンにしておくと、右クリックからフォルダを開けて便利です。Macはアプリケーションフォルダに移動するだけ。
最初にやる設定5つ
① 日本語化
左端のブロックのアイコン(拡張機能)から「Japanese Language Pack」を検索してインストール→再起動でメニューが日本語になります。
② 自動保存
「ファイル」→「自動保存」にチェック(または設定でAuto Save=afterDelay)。「変更したのに反映されない!」という初心者の詰まりの多くは保存忘れです。これで根絶できます。
③〜⑤ 見た目と同期
フォントサイズはCtrl(Cmd)+「+」「-」で調整。配色テーマは「基本設定→テーマ」からお好みで。そして「設定の同期」をオンにすれば、PCを買い替えても環境が数分で復元されます。
まず覚えるショートカット5つ
| キー | 働き |
|---|---|
| Ctrl + P | ファイル名で瞬間ジャンプ(最重要) |
| Ctrl + Shift + P | コマンドパレット。全機能をここから呼べる |
| Ctrl + / | 選択行をコメント化/解除 |
| Alt + ↑/↓ | 行を上下に移動 |
| Ctrl + D | 同じ単語を次々選択して一括編集 |
※MacはCtrlをCmdに読み替えてください。ショートカットの覚え方のコツはWindows編の記事と同じく「週に3個ずつ」です。
用途別・最初の拡張機能
Web制作を始める人はLive Serverが感動もの。HTMLを保存した瞬間にブラウザへ反映されるので、HTML/CSS学習の効率が倍増します。Pythonを学ぶ人は公式のPython拡張だけでOK。実行ボタン・補完・エラー表示が一式そろいます。
ターミナルとGitもVS Codeの中で
- 統合ターミナル(Ctrl + @):エディタ内でコマンドが打てます。Pythonの実行もGit操作もここで完結
- Git連携は標準搭載:左のソース管理アイコンから、コミットなどの基本操作が画面ボタンでできます(仕組みの理解はGit入門で)
- WSLとの連携:Windowsの人は「WSL」拡張を入れると、Linux環境のファイルを直接編集できます(WSLの記事参照)
よくある質問
Q. Visual StudioとVS Codeは同じものですか?
A. 別物です。Visual Studioは主にWindows/.NET開発向けの重量級IDE、VS Codeは軽量で汎用のエディタ。初心者・Web系・Python学習ならVS Codeを選べば間違いありません。
Q. 無料でどこまで使えますか?
A. エディタ本体と主要拡張はすべて無料です。有料なのはGitHub CopilotなどのAI補完サービスくらいで、学習段階では不要です。
Q. 動作が重くなってきました。
A. 拡張機能の入れすぎが典型原因です。拡張機能一覧から使っていないものを無効化してください。「拡張機能なしで再起動」コマンドで犯人の切り分けもできます。
まとめ
VS Codeは「日本語化→自動保存→テーマ」の5分セットアップと、用途に合う拡張2〜3個で十分戦えます。道具を整えたら、あとは書くだけ。HTML/CSS入門やPython自動化の記事で、さっそく最初のファイルを作ってみてください。