プログラミングや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で最初に覚えるべきは、個別のショートカットではなくコマンドパレットです。Ctrl + Shift + P（MacはCommand + Shift + P）を押すと、やりたいことを日本語で検索して実行できます。
これを知っていると、「あの機能はどのメニューにあったか」を探す時間がゼロになります。
| やりたいこと | パレットに入力する語 |
|---|---|
| 設定画面を開く | 設定 |
| ファイルの文字コードを変える | エンコード |
| 改行コードを変える | 改行 |
| コードを自動整形する | フォーマット |
| テーマ（配色）を変える | 配色テーマ |
| ターミナルを開く | ターミナル |
| 拡張機能を探す | 拡張機能 |
関連して覚えたいのが「クイックオープン」（Ctrl + P）です。ファイル名の一部を入力するだけで、フォルダをたどらずにファイルを開けます。プロジェクトのファイル数が増えるほど効きます。この2つだけで、マウス操作の大半が不要になります。
マルチカーソル｜同じ編集を、一度に済ませる
VS Codeで作業速度が最も変わる機能がこれです。カーソルを複数同時に置いて、同じ編集を一括で行えます。
| 操作 | キー | 使う場面 |
|---|---|---|
| 同じ語を次々に選択して追加 | Ctrl + D を繰り返す | 変数名の一括変更。最も使う |
| 同じ語をすべて選択 | Ctrl + Shift + L | ファイル内の全出現箇所を一度に変える |
| 上下にカーソルを増やす | Alt + クリック、または Ctrl + Alt + ↑↓ | 複数行の行頭に同じ文字を足す |
| 行を上下に移動 | Alt + ↑↓ | 切り取って貼り付ける必要がなくなる |
| 行を複製 | Shift + Alt + ↓ | 似た行を書き足すとき |
| 選択範囲をコメント化 | Ctrl + / | 一時的に無効化して切り分ける |
Ctrl + D は特に覚える価値があります。置換機能を使うより安全で、意図しない箇所まで書き換えてしまう事故を防げます。1つずつ確認しながら選択範囲を広げられるからです。
拡張機能は、増やしすぎると遅くなる
便利そうな拡張機能を次々入れると、起動が遅くなり、機能が競合します。入れる基準と、減らす方法を持っておいてください。
| 種類 | 判断 |
|---|---|
| 使っている言語の公式拡張 | 入れる。補完とエラー表示の質が変わる |
| コード整形ツール | 入れる。1つだけ。複数入れると競合する |
| 日本語化 | 入れる |
| Git連携の強化 | 好みで。標準機能でも足りる |
| 見た目のテーマ・アイコン | 好みで。動作への影響は小さい |
| 「なんとなく便利そう」で入れたもの | 削除する。月1回、使っていないものを見直す |
動作が重くなったときは、コマンドパレットで「拡張機能の実行時間」を確認できます。起動にかかった時間が拡張機能ごとに表示されるので、犯人を特定できます。推測で削除する必要はありません。
プロジェクトごとに設定を分ける
設定には2種類あり、これを使い分けられると、複数のプロジェクトを扱うときに楽になります。
| 種類 | 適用範囲 | 保存場所 | 使いどころ |
|---|---|---|---|
| ユーザー設定 | すべてのプロジェクト | 自分のPC内 | フォントサイズ、配色、自動保存など、自分の好み |
| ワークスペース設定 | そのフォルダのみ | プロジェクト内の.vscodeフォルダ | インデント幅、文字コード、整形ルールなど、プロジェクトの決まりごと |
チームで開発する場合、ワークスペース設定をプロジェクトに含めておくと、全員のエディタ設定が自動的に揃います。「インデントがタブとスペースで混ざる」といった問題が起きなくなります。
1人で開発している場合も、言語ごとにインデント幅が違うことはよくあるので、プロジェクト側に設定を置いておく価値があります。
エディタの中で完結させる
VS Codeはエディタですが、ターミナルもGitも内蔵しています。ウィンドウを切り替える回数が減るほど、集中は途切れにくくなります。
| 機能 | 開き方 | できること |
|---|---|---|
| ターミナル | Ctrl + Shift + @ | コマンド実行。複数タブに分割できる |
| Git（ソース管理） | 左側のアイコン | 変更箇所の確認、コミット、履歴の閲覧 |
| 差分表示 | 変更ファイルをクリック | 変更前と後を左右に並べて確認できる |
| 検索・置換（全ファイル） | Ctrl + Shift + F | プロジェクト全体を横断して検索 |
| WSL連携 | 拡張機能を入れる | Linux側のファイルを直接編集できる。WSLの導入手順 |
とくに差分表示は、コミット前に必ず確認する習慣をつけてください。意図しない変更が混ざっていないかを、目で見て確認できます。Gitの基本操作はGitとはにまとめています。
設定を持ち運ぶ・同期する
複数のPCを使う場合や、環境を作り直したときに、毎回設定し直すのは無駄です。VS Codeには設定を同期する機能があります。
| 同期される内容 | 含まれるもの | 注意 |
|---|---|---|
| 設定 | settings.jsonの内容 | — |
| キーボードショートカット | 独自に割り当てたキー | OSごとに分けて保存される |
| 拡張機能 | 導入済みの一覧 | 再インストールされる |
| UIの状態 | パネルの配置など | — |
| スニペット | 登録した定型文 | — |
- 左下の歯車アイコンをクリック
- 「設定の同期をオンにする」を選ぶ
- 同期する項目にチェックを入れる
- アカウントでサインインする
- 別のPCでも同じアカウントでサインインする
環境を作り直すことになっても、サインインするだけで元の状態に戻せます。拡張機能の一覧まで復元されるため、導入し直す手間もかかりません。
業務用の環境では、設定に社内固有の情報が含まれる場合があります。同期の対象に何が含まれるかを確認してから有効にしてください。
最初に覚える操作
設定を整えたら、次は操作です。この5つだけで作業速度が変わります。
| 操作 | キー | 使いどころ |
|---|---|---|
| コマンドパレット | Ctrl+Shift+P | 機能名を忘れてもここから探せる |
| ファイルを開く | Ctrl+P | ファイル名の一部を入力して移動 |
| 全体を検索 | Ctrl+Shift+F | プロジェクト内をまとめて検索 |
| 行を複製 | Shift+Alt+↓ | 同じ行をすぐ下にコピー |
| 同じ語を一括選択 | Ctrl+D（繰り返し） | 同じ変数名をまとめて編集 |
| ターミナルを開く | Ctrl+Shift+@ | エディタ内でコマンドを実行 |
| コメントの切り替え | Ctrl+/ | 選択範囲をまとめてコメントに |
とくにコマンドパレット（Ctrl+Shift+P）は、他のすべての機能への入口です。メニューの場所を覚えなくても、やりたいことを日本語で入力すれば候補が出ます。
エラーで詰まったときの調べ方はエラーが解決できないときの調べ方にまとめています。
エディタを開くまでもない細かい処理には、テキスト整形や大文字小文字・全角半角変換がその場で使えます。テスト用の識別子が必要な場合はUUID生成です。
まとめ
VS Codeは「日本語化→自動保存→テーマ」の5分セットアップと、用途に合う拡張2〜3個で十分戦えます。道具を整えたら、あとは書くだけ。HTML/CSS入門やPython自動化の記事で、さっそく最初のファイルを作ってみてください。