VSCodeの基本設定とおすすめ拡張機能10選｜開発効率を上げる初期セットアップ

2026年4月20日

VSCodeの基本設定とおすすめ拡張機能10選｜開発効率を上げる初期セットアップ

VSCodeは、インストール直後のままでも使えます。ただし実務で毎日使うなら、最初に整えるべき場所ははっきりしています。

まず設定すべきなのは「保存時の整形」「プロジェクト単位の設定」「設定同期」「最低限の拡張機能」です。 ここを押さえると、コード整形の手作業、環境差によるレビュー指摘、拡張機能の入れ忘れを減らせます。

この記事では、2026年4月時点のVSCode公式ドキュメントとVisual Studio Marketplaceの情報を前提に、初期セットアップで使いやすい設定例と拡張機能10個を整理します。

対象: VSCodeをこれから実務で使う初心者から実務初級者
想定環境: Windows / macOS / Linux のVSCode Stable版
扱う内容: 基本設定、settings.json例、拡張機能10選、よくある失敗
対象外: 特定企業の開発標準、Vim風キーバインドなど好みが強い設定

最初に押さえるVSCode設定の考え方

VSCodeの設定は、どこに保存するかで意味が変わります。ここを理解せずに拡張機能だけ増やすと、別のPCやチーム開発で設定がずれやすくなります。

User SettingsとWorkspace Settingsを分ける

VSCodeには大きく分けて2種類の設定があります。

User Settings: 自分のPC上のVSCode全体に効く個人設定
Workspace Settings: 開いているプロジェクトだけに効く設定

公式ドキュメントでも、Workspace SettingsはUser Settingsを上書きすると説明されています。つまり、個人の見た目やフォントはUser Settings、チームで合わせたい整形ルールや保存時動作はWorkspace Settingsに置くのが基本です。

たとえば、次のように分けると管理しやすくなります。

User Settings向き: テーマ、フォントサイズ、ミニマップ表示、個人のショートカット
Workspace Settings向き: formatter指定、lint設定、テスト設定、プロジェクト固有の除外ファイル

`.vscode/settings.json`は共有する前提で書く

単一フォルダのワークスペースでは、プロジェクト設定は通常 .vscode/settings.json に保存されます。リポジトリで共有するなら、誰が開いても同じ整形や補完が動く内容に絞ります。

個人の好みを入れすぎると、チームメンバーの環境を勝手に変えてしまいます。たとえばフォントサイズやテーマは共有設定に入れない方が無難です。

ここがポイント: 個人の快適さはUser Settings、チームで再現したい動作はWorkspace Settingsに置くと、設定の衝突が減ります。

まず入れておきたい基本設定例

ここでは、実務の初期セットアップで使いやすい最小構成を示します。必要に応じてUser SettingsまたはWorkspace Settingsに貼り付けて調整してください。

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "editor.wordWrap": "on",
  "editor.bracketPairColorization.enabled": true,
  "files.autoSave": "afterDelay",
  "files.autoSaveDelay": 1000,
  "files.trimTrailingWhitespace": true,
  "files.insertFinalNewline": true,
  "explorer.confirmDelete": true,
  "workbench.editor.enablePreview": false
}

この設定でできることはシンプルです。

保存時にコードを整形する
タブ幅とスペース利用をそろえる
長い行を折り返して読みやすくする
行末スペースを削除する
ファイル末尾に改行を入れる
プレビュータブでファイルが上書き表示される動きを避ける

言語別にformatterを指定する

JavaScriptやTypeScriptではPrettier、PythonではBlackやautopep8など、言語ごとにformatterを変えたい場面があります。その場合は言語IDごとに指定します。

{
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[python]": {
    "editor.formatOnSave": true
  }
}

Prettier拡張機能の説明では、[javascript][typescript] のように複数言語をまとめた指定は使えず、言語ごとに分ける必要があると案内されています。ここは初心者がつまずきやすい点です。

おすすめ拡張機能10選

拡張機能は多く入れるほど便利になるわけではありません。まずは、整形、診断、Git、言語サポート、共同作業、環境再現に関わるものから選ぶと効果が出やすくなります。

1. Prettier – Code formatter

Prettierは、JavaScript、TypeScript、JSON、CSS、HTML、Markdownなどを整形するformatterです。保存時整形と組み合わせると、インデントや改行位置の手直しが減ります。

実務では、個人の好みよりも「レビューで整形の話をしない」ことが重要です。プロジェクトに .prettierrc を置けば、チームで同じ整形ルールを使えます。

code --install-extension esbenp.prettier-vscode

2. ESLint

ESLintは、JavaScriptやTypeScriptのコード品質を確認するための定番ツールです。未使用変数、危険な書き方、プロジェクトで禁止したパターンをエディタ上で検出できます。

Prettierが「見た目の整形」を担当するのに対し、ESLintは「コードのルール違反」を見つける役割です。両方を入れる場合は、どちらで整形するかをプロジェクト側で決めておくと衝突を避けやすくなります。

code --install-extension dbaeumer.vscode-eslint

3. Python

Python拡張機能は、Python開発の入口になる拡張機能です。IntelliSense、デバッグ、テスト、環境管理、Jupyter関連機能への導線がまとまっています。

VSCodeはエディタなので、Python本体や仮想環境まで自動で完全に用意するわけではありません。venv、conda、pyenvなど、プロジェクトで使う実行環境を先に確認してから使うと混乱しにくくなります。

code --install-extension ms-python.python

4. GitLens

GitLensは、Gitの履歴や変更者をVSCode上で見やすくする拡張機能です。行ごとの変更履歴、コミットの確認、ブランチ操作の補助などに使えます。

「この処理はいつ、なぜ変わったのか」を調べる時間は、保守作業でよく発生します。GitLensを入れておくと、ターミナルで毎回 git blame や git log を打たなくても、エディタ内で手がかりを追えます。

code --install-extension eamodio.gitlens

5. Error Lens

Error Lensは、VSCodeの診断メッセージを行内に目立つ形で表示する拡張機能です。エラーや警告がProblemsパネルだけでなく、コードのすぐ横に出ます。

初心者ほど、下部パネルのエラー一覧を見落としがちです。Error Lensを入れると、どの行で何が起きているかをその場で確認できます。ただし表示が強めなので、慣れてきたら警告レベルだけ弱めるなど調整してもよいでしょう。

code --install-extension usernamehw.errorlens

6. Code Spell Checker

Code Spell Checkerは、コメント、Markdown、文字列、識別子などのスペルミスを検出する拡張機能です。英語のREADME、API名、変数名を書く機会があるなら役立ちます。

たとえば recieve と receive のようなミスは、コードが動いてもレビューで直されます。辞書にプロジェクト固有語を追加すれば、誤検知を減らしながら使えます。

code --install-extension streetsidesoftware.code-spell-checker

7. Path Intellisense

Path Intellisenseは、ファイルパスの補完を強化する拡張機能です。画像、JSON、CSS、モジュール読み込みなど、相対パスを手入力する場面で使えます。

フロントエンド開発では、../../components/Button のようなパスを何度も書きます。補完が効くと、ファイル名のタイプミスや階層の数え間違いを減らせます。

code --install-extension christian-kohler.path-intellisense

8. Auto Rename Tag

Auto Rename Tagは、HTMLやXML系の開始タグを変更したときに、対応する終了タグも自動で変更する拡張機能です。

VSCodeにはHTMLやHandlebars向けの関連機能もありますが、React、Vue、PHPなど複数の言語を扱う場合は拡張機能で補いたい場面があります。対象言語は auto-rename-tag.activationOnLanguage で絞れます。

code --install-extension formulahendry.auto-rename-tag

9. Dev Containers

Dev Containersは、Dockerコンテナを開発環境として使うための拡張機能です。ローカルPCに直接ランタイムや依存ツールを入れず、プロジェクトごとの環境をコンテナ内に分けられます。

チームでNode.jsやPythonのバージョンをそろえたいとき、新しい技術を試したいとき、既存PCの環境を壊したくないときに便利です。利用にはDockerなどの準備が必要なので、最初から全員に必須にする場合は導入手順もリポジトリに書いておきましょう。

code --install-extension ms-vscode-remote.remote-containers

Live Shareは、VSCode上で共同編集や共同デバッグを行うためのMicrosoft製拡張機能です。参加者が同じリポジトリをcloneしていなくても、ホストの環境を使ってコードを確認できます。

ペア作業、レビュー前の相談、エラー再現の確認に向いています。セッションURLを共有する仕組みなので、社外の相手と使う場合は、共有範囲やターミナル共有の有無を事前に確認してください。

code --install-extension MS-vsliveshare.vsliveshare

拡張機能は全部入れるべきか

結論から言うと、全部を常に有効にする必要はありません。開発対象に合わせて、最初の10個から絞り込むのが現実的です。

用途	優先したい拡張機能	理由
Web制作・フロントエンド	Prettier、ESLint、Path Intellisense、Auto Rename Tag	整形、lint、パス入力、タグ編集の頻度が高い
Python開発	Python、Error Lens、GitLens、Code Spell Checker	実行環境、診断、履歴確認、ドキュメント作成を補える
チーム開発	GitLens、Live Share、Dev Containers、Prettier	履歴確認、共同作業、環境再現、整形統一に効く
学習・個人開発	Error Lens、Prettier、Code Spell Checker	エラーの見落としと整形の手間を減らせる

拡張機能が多すぎると、起動が重くなったり、同じ機能を複数の拡張機能が担当して競合したりします。まずは少なく始めて、困った作業が出たときに追加する方が管理しやすいです。

Settings SyncとProfilesで環境を持ち運ぶ

PCを変えるたびに拡張機能を入れ直すのは手間です。VSCodeにはSettings Syncがあり、設定、キーボードショートカット、ユーザースニペット、UI状態、拡張機能、Profilesなどを同期できます。

Settings Syncで同期できるもの

公式ドキュメントでは、Settings SyncはMicrosoftアカウントまたはGitHubアカウントでサインインして使えると説明されています。同期対象は次のような項目です。

Settings
Keyboard shortcuts
User snippets
User tasks
UI State
Extensions
Profiles

ただし、SSH、Dev Container、WSLなどのリモートウィンドウに対しては、拡張機能の同期に注意が必要です。公式ドキュメントでは、リモートウィンドウとの間で拡張機能は同期されないと案内されています。

Profilesで仕事用と学習用を分ける

Profilesを使うと、設定、拡張機能、UIレイアウトなどを用途ごとに切り替えられます。

たとえば、次のように分けるとVSCodeが散らかりにくくなります。

Work: 業務プロジェクト用。必要な拡張機能だけ有効化
Python: Python、Jupyter、テスト関連を中心にする
Frontend: Prettier、ESLint、タグ編集、パス補完を中心にする
Writing: Markdown、スペルチェック、文章確認を中心にする

拡張機能を全部入りにするより、Profilesで切り替える方が、画面も設定も軽く保てます。

よくある失敗と対処法

VSCodeの初期セットアップでは、拡張機能そのものよりも「設定の置き場所」と「役割の重複」でつまずくことが多いです。

保存時に整形されない

まず確認するのは次の3点です。

editor.formatOnSave が true になっているか
editor.defaultFormatter が対象言語に対して指定されているか
プロジェクトにformatter本体や設定ファイルが必要ではないか

Prettier拡張機能は、プロジェクト内にPrettierが入っている場合、そのローカルバージョンを使います。チームで同じ結果にしたいなら、package.json にPrettierを固定しておく方が安定します。

npm install prettier -D --save-exact

ESLintとPrettierが競合する

ESLintとPrettierを同時に使うと、同じ箇所を別々のルールで直そうとして保存のたびに差分が出ることがあります。

対処の方向性は次のどちらかです。

Prettierを整形担当、ESLintをコード品質担当に分ける
ESLint側でPrettier連携を行い、保存時の修正をESLintに寄せる

どちらが正解というより、プロジェクトの既存設定に合わせることが大切です。既存リポジトリでは、まず .eslintrc、eslint.config.js、.prettierrc、package.json を確認してください。

拡張機能を入れたのにコマンドが動かない

VSCode拡張機能は、外部ツールを同梱していない場合があります。C/C++拡張機能の説明でも、VSCodeは主にエディタであり、コンパイラやデバッガなどのコマンドラインツールが別途必要とされています。

これはPython、Docker、Node.jsでも同じです。

Python拡張機能: Python本体や仮想環境が必要
Dev Containers: Dockerなどのコンテナ実行環境が必要
ESLint: プロジェクト側にESLint設定や依存関係が必要な場合がある

拡張機能は「VSCodeから使いやすくする入口」であり、実行環境そのものではないケースがあります。

初期セットアップのチェックリスト

最後に、VSCodeを新しく入れたときの確認順をまとめます。いきなり拡張機能を大量に入れるより、この順で整えるとトラブルを追いやすくなります。

VSCode本体を最新版に更新する
User Settingsに個人の表示設定を入れる
Workspace Settingsにプロジェクト共有設定を入れる
editor.formatOnSave と editor.defaultFormatter を確認する
PrettierやESLintなど、プロジェクト側の依存関係を確認する
必要な拡張機能だけ入れる
Settings Syncを有効にする
用途が分かれるならProfilesを作る
リモート開発やDev Containersでは、拡張機能の動作場所を確認する

VSCodeの効率化は、派手な拡張機能を探すよりも、保存時整形、診断表示、Git履歴、環境再現を地道にそろえる方が効果が出ます。次に見直すべきなのは、プロジェクトの .vscode/settings.json に「チームで共有すべき設定」と「個人の好み」が混ざっていないかです。

参照リンク

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！

VSCodeの基本設定とおすすめ拡張機能10選｜開発効率を上げる初期セットアップ

VSCodeの基本設定とおすすめ拡張機能10選｜開発効率を上げる初期セットアップ

最初に押さえるVSCode設定の考え方

User SettingsとWorkspace Settingsを分ける

.vscode/settings.jsonは共有する前提で書く

まず入れておきたい基本設定例

言語別にformatterを指定する

おすすめ拡張機能10選

1. Prettier – Code formatter

2. ESLint

3. Python

4. GitLens

5. Error Lens

6. Code Spell Checker

7. Path Intellisense

8. Auto Rename Tag

9. Dev Containers

10. Live Share

拡張機能は全部入れるべきか

Settings SyncとProfilesで環境を持ち運ぶ

Settings Syncで同期できるもの

Profilesで仕事用と学習用を分ける

よくある失敗と対処法

保存時に整形されない

ESLintとPrettierが競合する

拡張機能を入れたのにコマンドが動かない

初期セットアップのチェックリスト

参照リンク

`.vscode/settings.json`は共有する前提で書く