【2026年最新版】VS Codeの設定・拡張機能完全ガイド

公開日：2026/03/11　更新日：2026/03/11　

※本ページにはプロモーション(広告)が含まれています

【2026年最新版】VS Codeの設定・拡張機能完全ガイド

「VS Codeって聞いたことはあるけど、設定が多くて何から始めればいいかわからない」「おすすめの拡張機能を教えてほしい」という方に向けて、この記事ではVisual Studio Code（以下VS Code）の基本的なインストールから、快適な作業環境の構築まで丁寧に解説します。

VS Codeは現在、世界で最も使われているコードエディタの一つです。無料で使えて、拡張機能が豊富で、WindowsでもMacでも快適に動作します。適切に設定すれば、プログラミング初心者からプロのエンジニアまで幅広く対応できます。

この記事でわかること

VS Codeのインストールと日本語化の手順
基本設定（フォント・テーマ・インデント）の最適化
カテゴリ別おすすめ拡張機能の紹介
作業効率を上げるショートカットキー一覧
スニペットとワークスペース設定の活用法
よくあるトラブルと解決策

VS Codeのインストールと日本語化

Step1: VS Codeをダウンロードする

まずは公式サイトからVS Codeをダウンロードします。

ブラウザで code.visualstudio.com にアクセスします
自分のOS（Windows / macOS / Linux）に合ったボタンをクリックします
ダウンロードが完了したらインストーラーを実行します

Windowsの場合はインストーラー（.exe）を実行して指示に従ってインストールします。macOSの場合はダウンロードした.zipを展開して、VS Codeをアプリケーションフォルダに移動するだけです。

Step2: 日本語化する

デフォルトでは英語表示ですが、日本語化することができます。

VS Codeを起動します
左側のアクティビティバーから「拡張機能」アイコン（四角が4つのアイコン）をクリックします
検索バーに「Japanese Language Pack」と入力します
「Japanese Language Pack for Visual Studio Code」を見つけて「Install」をクリックします
インストール後、右下に「Restart to apply language change」ダイアログが表示されたら「Restart」をクリックします

再起動後、VS Codeが日本語表示になります。

Step3: 設定画面を開く

VS Codeの設定は「settings.json」というファイルで管理されています。設定を変更するには主に2つの方法があります。

GUIで設定: メニューバーの「ファイル」→「ユーザー設定」→「設定」（Macは「Code」→「設定」→「設定」）
settings.jsonを直接編集: 設定画面右上の「{}」アイコンをクリック

基本設定を最適化する

フォントの設定

コードを読みやすくするために、等幅フォント（コーディング用フォント）の設定をおすすめします。

人気の無料コーディングフォント：

Fira Code: リガチャ（記号の合字）対応で見やすい
JetBrains Mono: JetBrains社製の高品質フォント
Hack: プログラミング向けに最適化されたフォント

フォントをダウンロードしてインストール後、settings.jsonに以下を追記します。

{
  "editor.fontFamily": "Fira Code, 'Courier New', monospace",
  "editor.fontSize": 14,
  "editor.fontLigatures": true
}

テーマの設定

VS Codeには最初からいくつかのテーマが含まれています。テーマを変更するには「Ctrl+K Ctrl+T」（Macは「Cmd+K Cmd+T」）を押すとテーマ選択画面が開きます。

おすすめのテーマ：

One Dark Pro: 目に優しいダークテーマ（拡張機能として追加可能）
Material Theme: カラフルで見やすい
Night Owl: 夜間作業に最適な暗めのテーマ
GitHub Theme: GitHubのUIと似た見慣れたデザイン

インデントの設定

インデントはコードの可読性に直結します。プロジェクトのルールに合わせて設定します。

{
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "editor.detectIndentation": true
}

「tabSize」は1インデントのスペース数（2か4が一般的）、「insertSpaces」をtrueにするとTabキーを押した際にスペースが挿入されます。「detectIndentation」はファイルを開いた際に自動でインデント形式を検出します。

その他の便利な基本設定

{
  "editor.wordWrap": "on",
  "editor.minimap.enabled": false,
  "editor.formatOnSave": true,
  "files.autoSave": "afterDelay",
  "files.autoSaveDelay": 1000,
  "editor.bracketPairColorization.enabled": true,
  "editor.renderWhitespace": "boundary"
}

各設定の意味：

wordWrap: 長い行を折り返して表示
minimap.enabled: 右端のミニマップを非表示（画面を広く使える）
formatOnSave: 保存時に自動フォーマット
autoSave: 1秒後に自動保存
bracketPairColorization: 対応する括弧を同じ色で表示

ショートカットキー一覧（よく使うもの）

編集操作

操作	Windows	Mac
コピー	Ctrl+C	Cmd+C
切り取り	Ctrl+X	Cmd+X
貼り付け	Ctrl+V	Cmd+V
元に戻す	Ctrl+Z	Cmd+Z
行を上下に移動	Alt+↑/↓	Option+↑/↓
行を複製	Shift+Alt+↓	Shift+Option+↓
行を削除	Ctrl+Shift+K	Cmd+Shift+K
コメントアウト/解除	Ctrl+/	Cmd+/
フォーマット	Shift+Alt+F	Shift+Option+F
複数カーソル追加	Alt+クリック	Option+クリック

検索・ナビゲーション

操作	Windows	Mac
ファイル内検索	Ctrl+F	Cmd+F
全ファイル横断検索	Ctrl+Shift+F	Cmd+Shift+F
ファイル名でファイルを開く	Ctrl+P	Cmd+P
コマンドパレット	Ctrl+Shift+P	Cmd+Shift+P
定義にジャンプ	F12	F12
行番号へジャンプ	Ctrl+G	Ctrl+G
最近開いたファイル	Ctrl+R	Cmd+R
前のタブ/次のタブ	Ctrl+PageUp/Down	Cmd+Option+←/→

ターミナル・表示

操作	Windows	Mac
ターミナルを開く/閉じる	Ctrl+`	Ctrl+`
サイドバーの表示/非表示	Ctrl+B	Cmd+B
エクスプローラーを開く	Ctrl+Shift+E	Cmd+Shift+E
拡張機能を開く	Ctrl+Shift+X	Cmd+Shift+X
新しいウィンドウ	Ctrl+Shift+N	Cmd+Shift+N
画面分割	Ctrl+\	Cmd+\
フォントサイズを拡大	Ctrl++	Cmd++
フォントサイズを縮小	Ctrl+-	Cmd+-

スニペットの作成・活用

スニペットとは

スニペット（Snippet）は、よく使うコードをキーワードで素早く入力できるテンプレート機能です。たとえば「forLoop」と入力してEnterを押すと、for文の雛形が展開される、といった使い方ができます。

スニペットを作成する方法

Step1: コマンドパレット（Ctrl/Cmd+Shift+P）を開き、「Configure User Snippets」と入力します。

Step2: スニペットを作成したい言語を選択します（例：「HTML」または「JavaScript」）。または「New Global Snippets file」でどの言語でも使えるスニペットを作成できます。

Step3: 開かれたJSONファイルに以下の形式でスニペットを追記します。

{
  "HTMLの基本テンプレート": {
    "prefix": "html5",
    "body": [
      "<!DOCTYPE html>",
      "<html lang=\"ja\">",
      "<head>",
      "  <meta charset=\"UTF-8\">",
      "  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
      "  <title>$1</title>",
      "</head>",
      "<body>",
      "  $2",
      "</body>",
      "</html>"
    ],
    "description": "HTML5の基本テンプレート"
  }
}

「prefix」がトリガーとなるキーワード、「body」が展開されるコード、「$1」「$2」はカーソルが移動するプレースホルダーです。

ワークスペース設定の活用

ワークスペースとは

ワークスペース設定は、プロジェクト単位でVS Codeの設定を変えることができる機能です。たとえばプロジェクトAではインデントを2スペース、プロジェクトBでは4スペースにする、といった使い分けが可能です。

ワークスペース設定ファイルを作成する

フォルダを開いた状態で「ファイル」→「ユーザー設定」→「設定」を開き、「ワークスペース」タブを選択します。設定を変更すると、プロジェクトのフォルダ内に「.vscode/settings.json」が自動作成されます。

直接ファイルを作成する場合は、プロジェクトのルートに「.vscode」フォルダを作り、「settings.json」を以下の内容で作成します。

{
  "editor.tabSize": 4,
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

よくある問題と解決策

問題1: 拡張機能をインストールしても動作しない

VS Codeを再起動することで解決することが多いです。それでも動作しない場合は、拡張機能が有効になっているか確認してください（拡張機能パネルで「有効」と表示されているか確認）。

問題2: Prettierが保存時に動作しない

settings.jsonに以下が設定されているか確認します。

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

また、プロジェクトのルートに「.prettierrc」設定ファイルが必要な場合があります。

問題3: ターミナルが文字化けする

ターミナルの文字コードをUTF-8に設定します。settings.jsonに以下を追加します。

{
  "terminal.integrated.defaultEncoding": "utf8"
}

よくある質問（FAQ）

Q1. VS Codeは無料で使えますか？

はい、VS Codeは完全無料でオープンソースです。個人・商用問わず無料で使用できます。唯一有料になる可能性があるのは「GitHub Copilot」などの有料拡張機能を利用する場合です。

Q2. 拡張機能の入れすぎでVS Codeが重くなりました

拡張機能が多すぎると起動や動作が遅くなることがあります。普段使わない拡張機能は「無効にする」（アンインストールしなくてもOK）と軽くなります。また、「Workspace Extensions」として特定のプロジェクトでのみ有効にする設定もおすすめです。

Q3. 設定を誤って変更してしまった場合、リセットできますか？

settings.jsonを開いて、変更した行を削除すれば元に戻ります。全部デフォルトに戻したい場合は、settings.jsonの内容をすべて削除（空の{}にする）してください。

Q4. VS CodeとVS（Visual Studio）の違いは何ですか？

Visual Studio Code（VS Code）は軽量なコードエディタで、ほとんどの言語に対応しています。Visual Studio（VS）はMicrosoftが提供するより大規模な統合開発環境（IDE）で、主にWindows向けの.NETやC++開発向けです。VS Codeのほうが軽く、クロスプラットフォーム対応のため、一般的にはVS Codeがおすすめです。

Q5. 設定を複数のPCで同期したいです

VS Codeには「設定の同期」機能があります。「ファイル」→「ユーザー設定」→「設定の同期を有効にする」からGitHubまたはMicrosoftアカウントでサインインすると、設定・拡張機能・スニペットが複数PCで同期されます。

Q6. コマンドパレットでできることを教えてください

コマンドパレット（Ctrl/Cmd+Shift+P）はVS Codeの全機能にアクセスできる「魔法のコマンドライン」です。テーマの変更、設定ファイルを開く、Gitコマンドの実行、言語モードの変更など、メニューから探すのが面倒な操作もここから素早く実行できます。

Q7. ショートカットキーをカスタマイズできますか？

できます。コマンドパレットで「キーボードショートカット」と入力するか「Ctrl/Cmd+K Ctrl/Cmd+S」で設定画面が開きます。変更したいコマンドを検索してダブルクリックし、新しいキーの組み合わせを入力すれば変更完了です。

まとめ

VS Codeは設定次第で作業効率が大幅に向上します。この記事で紹介した設定と拡張機能を参考に、自分好みの環境を構築してみてください。

まずは日本語化とフォント設定から始め、その後Prettier・ESLintなどのコード品質ツールを入れるのが王道の手順です。GitLensやLive Serverなど、自分の使用言語やプロジェクトに合わせて拡張機能を追加していきましょう。

ショートカットキーは最初から全部覚えようとせず、1週間に3〜5個ずつ習得していくのがコツです。使い込むほど作業が快適になるVS Codeをぜひ活用してみてください。

拡張機能名	機能	対応言語
Prettier – Code formatter	コードを自動で整形・フォーマット	JS/TS/HTML/CSS/JSON等
ESLint	JavaScriptのコード品質チェック	JavaScript/TypeScript
EditorConfig for VS Code	チーム共通のインデント設定を適用	全言語
Markdownlint	Markdownの記述ルールチェック	Markdown

拡張機能名	機能	おすすめ度
GitLens	Gitの履歴・変更者を行ごとに表示	★★★★★
Git History	コミット履歴をグラフィカルに表示	★★★★☆
Git Graph	ブランチの分岐をツリー表示	★★★★☆

拡張機能名	機能	備考
GitHub Copilot	AIによるコード補完・生成	有料（月額10ドル〜）
GitHub Copilot Chat	Copilotとチャットでコード相談	Copilotのサブスク必要
Tabnine	AIコード補完（無料プランあり）	無料でも基本機能使用可

拡張機能名	機能	おすすめ度
Live Server	HTMLをリアルタイムでブラウザプレビュー	★★★★★
Auto Rename Tag	開始タグ変更時に終了タグも自動変更	★★★★★
CSS Peek	CSSのクラス定義元にジャンプ	★★★★☆
Color Highlight	カラーコードを実際の色で表示	★★★★☆
HTML CSS Support	CSS クラス名をHTMLで補完	★★★★☆

拡張機能名	機能	備考
indent-rainbow	インデントレベルをカラーで表示	ネストが深いコードに効果的
Bracket Pair Colorizer 2	対応する括弧を色分け表示	VS Code 1.60以降は標準機能に統合
Path Intellisense	ファイルパスを自動補完	importのパス入力が快適に
Todo Tree	TODO/FIXMEコメントをツリー表示	タスク管理に便利
REST Client	VS Code内でHTTPリクエストを送信	API開発・テストに最適

【2026年最新版】VS Codeの設定・拡張機能完全ガイド

【2026年最新版】VS Codeの設定・拡張機能完全ガイド

この記事でわかること

VS Codeのインストールと日本語化

Step1: VS Codeをダウンロードする

Step2: 日本語化する

Step3: 設定画面を開く

基本設定を最適化する

フォントの設定

テーマの設定

インデントの設定

その他の便利な基本設定

おすすめ拡張機能カテゴリ別一覧

コード品質・フォーマット

Git・バージョン管理

AI・コード補完

HTML/CSS/Web開発

その他の便利な拡張機能

ショートカットキー一覧（よく使うもの）

編集操作

検索・ナビゲーション

ターミナル・表示

スニペットの作成・活用

スニペットとは

スニペットを作成する方法

ワークスペース設定の活用

ワークスペースとは

ワークスペース設定ファイルを作成する

よくある問題と解決策

問題1: 拡張機能をインストールしても動作しない

問題2: Prettierが保存時に動作しない

問題3: ターミナルが文字化けする

よくある質問（FAQ）

Q1. VS Codeは無料で使えますか？

Q2. 拡張機能の入れすぎでVS Codeが重くなりました

Q3. 設定を誤って変更してしまった場合、リセットできますか？

Q4. VS CodeとVS（Visual Studio）の違いは何ですか？

Q5. 設定を複数のPCで同期したいです

Q6. コマンドパレットでできることを教えてください

Q7. ショートカットキーをカスタマイズできますか？

まとめ

Check Also