VSCode プロファイル機能活用ガイド - 用途別に設定・拡張機能を切り替える

VSCodeのプロファイル機能を使えば、Web開発、Python開発、ドキュメント執筆など、用途に応じて設定・拡張機能・スニペットをワンクリックで切り替えられます。本記事では、プロファイルの作成から環境共有までを初心者にも分かりやすく解説します。

VSCode プロファイル機能とは

VSCode プロファイル機能は、エディタのカスタマイズ設定を「プロファイル」という単位でまとめて管理できる機能です。VSCode 1.75以降で利用可能となり、用途別に最適化された開発環境を瞬時に切り替えられます。

プロファイルで管理できる要素

プロファイルには以下の要素が含まれます。

要素	説明
設定（Settings）	`settings.json`の全設定
キーボードショートカット	`keybindings.json`のカスタムバインド
スニペット	ユーザー定義のコードスニペット
タスク	`tasks.json`のタスク定義
拡張機能	インストールされている拡張機能一覧
UIレイアウト	サイドバー、パネルの配置状態
MCPサーバー	Model Context Protocolサーバー設定

プロファイル機能の活用シーン

プロファイル機能が効果を発揮する典型的なシーンを紹介します。

graph LR
    A[開発者] --> B[Web開発プロファイル]
    A --> C[Python開発プロファイル]
    A --> D[執筆プロファイル]
    A --> E[プレゼンプロファイル]
    
    B --> B1[ESLint/Prettier]
    B --> B2[React拡張機能]
    
    C --> C1[Python/Pylance]
    C --> C2[Jupyter]
    
    D --> D1[Markdown拡張機能]
    D --> D2[軽量設定]
    
    E --> E1[大きいフォント]
    E --> E2[高コントラスト]

実行環境と前提条件

本記事の手順を実行するための環境と前提条件を確認しましょう。

動作環境

項目	要件
VSCode バージョン	1.75以降（2023年1月リリース）
OS	Windows / macOS / Linux
インターネット接続	プロファイルテンプレート使用時に必要

バージョン確認方法

VSCodeのバージョンは以下の手順で確認できます。

メニューバーから「ヘルプ」→「バージョン情報」を選択
または Ctrl + Shift + P（macOSはCmd + Shift + P）でコマンドパレットを開き「About」と入力

期待される結果

本記事の手順を完了すると、以下の状態を実現できます。

用途別に最適化された複数のプロファイルを作成
ワンクリックでプロファイルを切り替え
チームメンバーとプロファイルを共有
フォルダごとに自動でプロファイルを切り替え

プロファイルエディタへのアクセス

プロファイル機能の操作は「プロファイルエディタ」から行います。アクセス方法は2通りあります。

方法1: メニューからアクセス

メニューバーから「ファイル」→「基本設定」→「プロファイル」を選択

方法2: 管理ボタンからアクセス

画面左下のギアアイコン（管理ボタン）をクリック
「プロファイル」を選択

プロファイルエディタでは、すべてのプロファイルの一覧表示、作成、編集、削除、エクスポート、インポートが可能です。

プロファイルの作成

新しいプロファイルを作成する手順を解説します。

基本的な作成手順

プロファイルエディタを開く
「新しいプロファイル」ボタンをクリック
プロファイル名を入力
アイコンを選択（任意）
コピー元を選択
含める要素を選択
「作成」をクリック

コピー元の選択肢

新規プロファイル作成時に、コピー元として以下を選択できます。

オプション	説明
空のプロファイル	何も含まない状態から開始
既存プロファイル	指定したプロファイルの設定をコピー
プロファイルテンプレート	VSCodeが提供する用途別テンプレート
Defaultプロファイル	現在のデフォルト設定をコピー

含める要素の選択

プロファイル作成時に、以下の要素を個別に選択できます。未選択の要素はDefaultプロファイルの設定が適用されます。

1
2
3
4
5
6
7
8


{
  "settings": true,
  "keybindings": true,
  "snippets": true,
  "tasks": true,
  "extensions": true,
  "uiState": false
}

実践: Web開発プロファイルの作成

フロントエンド開発用のプロファイルを作成する例を示します。

手順:

プロファイルエディタで「新しいプロファイル」をクリック
名前に「Web Development」と入力
アイコンに地球儀マークを選択
コピー元で「空のプロファイル」を選択
すべての要素にチェックを入れる
「作成」をクリック

プロファイル作成後の設定:

作成したプロファイルに以下の拡張機能をインストールします。

拡張機能	用途
ESLint	JavaScriptリンター
Prettier	コードフォーマッター
Auto Rename Tag	HTMLタグ自動リネーム
Live Server	ローカルサーバー起動
GitLens	Git履歴の可視化

プロファイルテンプレートの活用

VSCodeには用途別に最適化されたプロファイルテンプレートが用意されています。

利用可能なテンプレート一覧

テンプレート名	対象ユーザー	主な拡張機能
Python	Python開発者	Python、Pylance、Ruff
Data Science	データサイエンティスト	Jupyter、Data Wrangler
Doc Writer	ドキュメント執筆者	markdownlint、Word Count
Node.js	Node.js開発者	ESLint、Prettier、Jest
Angular	Angular開発者	Angular Language Service
Java General	Java開発者	Extension Pack for Java
Java Spring	Spring開発者	Spring Boot Extension Pack

Pythonテンプレートの内容

Pythonテンプレートには以下が含まれます。

拡張機能:

Python（IntelliSense、デバッグ、リファクタリング）
Pylance（高速な言語サーバー）
Ruff（リンター＆フォーマッター）
autoDocstring（docstring自動生成）
Container Tools（Docker連携）

設定:

1
2
3
4
5


{
  "python.analysis.autoImportCompletions": true,
  "python.analysis.fixAll": ["source.unusedImports"],
  "editor.defaultFormatter": "charliermarsh.ruff"
}

Doc Writerテンプレートの内容

執筆作業に特化したテンプレートです。

拡張機能:

Code Spell Checker（スペルチェック）
markdownlint（Markdownリンター）
Markdown Preview GitHub Styling（GitHubスタイルプレビュー）
Word Count（文字数カウント）
Read Time（読了時間表示）

設定:

1
2
3
4
5
6
7


{
  "workbench.colorTheme": "Default Light Modern",
  "editor.minimap.enabled": false,
  "editor.fontLigatures": true,
  "files.autoSave": "afterDelay",
  "markdown.validate.enabled": true
}

テンプレートからプロファイルを作成

プロファイルエディタで「新しいプロファイル」をクリック
コピー元のドロップダウンから目的のテンプレートを選択
「Contents」セクションで含まれる内容をプレビュー
必要に応じて名前やアイコンをカスタマイズ
「プレビュー」で新しいウィンドウで確認（任意）
「作成」をクリック

プロファイルの切り替え

作成したプロファイルを切り替える方法を解説します。

コマンドパレットからの切り替え

最も素早い切り替え方法です。

Ctrl + Shift + P（macOSはCmd + Shift + P）でコマンドパレットを開く
「Profiles: Switch Profile」と入力
切り替え先のプロファイルを選択

プロファイルエディタからの切り替え

プロファイルエディタを開く
目的のプロファイルの「このプロファイルを現在のウィンドウで使用」ボタンをクリック

現在のプロファイルの確認方法

現在使用中のプロファイルは以下の場所で確認できます。

確認場所	表示内容
タイトルバー	プロファイル名が表示
管理ボタン（左下のギアアイコン）	ホバーでプロファイル名が表示
プロファイルエディタ	「使用中」バッジが表示

プロファイルにアイコンを設定している場合、管理ボタンがそのアイコンに変わります。

フォルダとプロファイルの関連付け

VSCodeはプロファイルをフォルダやワークスペースに関連付けて記憶します。

自動関連付けの仕組み

プロファイルAでフォルダXを開く
VSCodeがフォルダXとプロファイルAの関連を記憶
次回フォルダXを開くと自動的にプロファイルAがアクティブに

flowchart TD
    A[フォルダを開く] --> B{関連付け済み?}
    B -->|はい| C[関連付けられたプロファイルをアクティブ化]
    B -->|いいえ| D[現在のプロファイルを維持]
    C --> E[開発開始]
    D --> F[手動でプロファイル切り替え]
    F --> G[関連付けを保存]
    G --> E

新しいウィンドウでプロファイルを指定

特定のプロファイルで新しいウィンドウを開く方法を解説します。

メニューから開く

「ファイル」→「プロファイル付きで新しいウィンドウを開く」を選択
使用するプロファイルを選択

デフォルトプロファイルの設定

新しいウィンドウで常に特定のプロファイルを使用したい場合は、以下の手順で設定します。

プロファイルエディタで対象のプロファイルを選択
「プロファイルの内容」セクションで「新しいウィンドウで使用」オプションを有効化

コマンドラインからの起動

ターミナルから特定のプロファイルでVSCodeを起動できます。

1
2
3
4
5


# Windows / macOS / Linux共通
code ~/projects/my-app --profile "Web Development"

# 存在しないプロファイル名を指定すると新規作成される
code . --profile "New Profile"

プロファイルのエクスポート

作成したプロファイルをファイルやGitHub Gistとしてエクスポートできます。

GitHub Gistへのエクスポート

チームでの共有に最適な方法です。

プロファイルエディタで対象のプロファイルを選択
オーバーフローメニュー（…）から「エクスポート…」を選択
「GitHub Gist」を選択
GitHubにサインイン（初回のみ）
共有用URLが生成される

生成されるURL形式:

1

https://vscode.dev/editor/profile/github/{GUID}

このURLを共有することで、他のユーザーがプロファイルをインポートできます。

ローカルファイルへのエクスポート

オフライン環境やバックアップ用にローカルファイルとして保存できます。

プロファイルエディタで対象のプロファイルを選択
オーバーフローメニュー（…）から「エクスポート…」を選択
「ローカルファイル」を選択
保存先を指定

ファイルは .code-profile という拡張子で保存されます。

エクスポート時の注意点

以下の設定はエクスポートに含まれません。

除外される設定	理由
ローカルパスを含む設定	他のマシンでは無効になるため
マシン固有の設定	環境依存性があるため
認証情報	セキュリティ上の理由

プロファイルのインポート

共有されたプロファイルをインポートする手順を解説します。

GitHub GistからのURLインポート

共有されたURLをブラウザで開く
vscode.devでプロファイルエディタが表示される
「Visual Studio Codeでプロファイルをインポート」をクリック
デスクトップ版VSCodeが起動し、インポート画面が表示される
内容を確認して「作成」をクリック

ローカルファイルからのインポート

プロファイルエディタを開く
「新しいプロファイル」ボタンのドロップダウンから「プロファイルをインポート…」を選択
.code-profile ファイルを選択
内容を確認して「作成」をクリック

インポート時のカスタマイズ

インポート時に以下のカスタマイズが可能です。

プロファイル名の変更
アイコンの変更
含める要素の選択（一部の要素のみインポート）

プロファイルの同期

Settings Syncを使用すると、複数のマシン間でプロファイルを同期できます。

Settings Syncの有効化

左下のギアアイコンから「設定の同期をオンにする」を選択
同期する項目で「プロファイル」にチェックを入れる
GitHubまたはMicrosoftアカウントでサインイン

同期される内容

Settings Syncを有効にすると、以下が自動的に同期されます。

すべてのプロファイル
プロファイル内の設定、拡張機能、スニペット
プロファイルのアイコンと名前

リモート環境での制限

SSH、Dev Containers、WSLなどのリモート環境では、拡張機能の同期に制限があります。リモートホストには拡張機能が個別にインストールされるため、プロファイルの拡張機能は自動同期されません。

全プロファイル共通の設定

特定の設定や拡張機能を全プロファイルで共有する方法を解説します。

設定の共有

設定エディタを開く（Ctrl + ,）
共有したい設定を見つける
設定の横にあるギアアイコンをクリック
「すべてのプロファイルに設定を適用」を選択

共有された設定は、どのプロファイルから変更しても全プロファイルに反映されます。

拡張機能の共有

拡張機能ビューを開く（Ctrl + Shift + X）
共有したい拡張機能を右クリック
「すべてのプロファイルに拡張機能を適用」を選択

共有に適した項目の例

項目	共有推奨度	理由
GitLens	高	全プロジェクトで有用
GitHub Copilot	高	言語を問わず活用可能
カラーテーマ	中	好みの問題
フォントサイズ	高	視認性に影響
言語固有の拡張機能	低	プロファイルごとに分けるべき

一時プロファイルの活用

一時プロファイルは、VSCodeセッション終了時に自動削除される特殊なプロファイルです。

一時プロファイルの作成

Ctrl + Shift + Pでコマンドパレットを開く
「Profiles: Create a Temporary Profile」と入力して実行
空のプロファイルが「Temp 1」などの名前で作成される

活用シーン

シーン	メリット
新しい拡張機能のテスト	通常環境を汚さない
設定変更の検証	失敗しても影響なし
問題の切り分け	最小構成でデバッグ可能
一時的なデモ	セッション終了で自動クリーンアップ

トラブルシューティング用の空プロファイル

VSCodeで問題が発生した際、空プロファイルを使って原因を切り分けられます。

空プロファイルでの問題切り分け手順

空のプロファイルを作成（全ての要素のチェックを外す）
空プロファイルに切り替え
問題が再現するか確認
再現しない場合、拡張機能または設定が原因
拡張機能を1つずつ有効化して原因を特定

flowchart TD
    A[問題発生] --> B[空プロファイルを作成]
    B --> C[空プロファイルに切り替え]
    C --> D{問題が再現?}
    D -->|はい| E[VSCode本体の問題]
    D -->|いいえ| F[拡張機能/設定が原因]
    F --> G[拡張機能を1つずつ有効化]
    G --> H{問題が再現?}
    H -->|はい| I[原因の拡張機能を特定]
    H -->|いいえ| G
    E --> J[VSCodeを再インストール or GitHub Issue報告]
    I --> K[拡張機能を無効化/アンインストール]

実践的なプロファイル構成例

具体的なプロファイル構成例を紹介します。

フロントエンド開発プロファイル

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


{
  "name": "Frontend",
  "icon": "globe",
  "extensions": [
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "formulahendry.auto-rename-tag",
    "ritwickdey.LiveServer",
    "dsznajder.es7-react-js-snippets",
    "bradlc.vscode-tailwindcss"
  ],
  "settings": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": "explicit"
    },
    "emmet.includeLanguages": {
      "javascript": "javascriptreact"
    }
  }
}

バックエンド開発プロファイル（Node.js）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


{
  "name": "Backend Node.js",
  "icon": "server",
  "extensions": [
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "humao.rest-client",
    "christian-kohler.npm-intellisense",
    "ms-azuretools.vscode-containers",
    "cweijan.vscode-database-client2"
  ],
  "settings": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,
    "debug.javascript.autoAttachFilter": "smart"
  }
}

データ分析プロファイル

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


{
  "name": "Data Analysis",
  "icon": "beaker",
  "extensions": [
    "ms-python.python",
    "ms-toolsai.jupyter",
    "ms-toolsai.datawrangler",
    "charliermarsh.ruff",
    "GitHub.copilot"
  ],
  "settings": {
    "jupyter.themeMatplotlibPlots": true,
    "notebook.output.scrolling": true,
    "python.analysis.autoImportCompletions": true,
    "[python]": {
      "editor.defaultFormatter": "charliermarsh.ruff",
      "editor.formatOnSave": true
    }
  }
}

プレゼンテーションプロファイル

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


{
  "name": "Presentation",
  "icon": "broadcast",
  "extensions": [],
  "settings": {
    "editor.fontSize": 20,
    "terminal.integrated.fontSize": 18,
    "workbench.colorTheme": "Default Light Modern",
    "editor.minimap.enabled": false,
    "editor.lineNumbers": "off",
    "editor.folding": false,
    "breadcrumbs.enabled": false,
    "workbench.statusBar.visible": false
  }
}

プロファイルの保存場所

プロファイルはOSごとに以下の場所に保存されます。

OS	保存場所
Windows	`%APPDATA%\Code\User\profiles`
macOS	`$HOME/Library/Application Support/Code/User/profiles`
Linux	`$HOME/.config/Code/User/profiles`

Insiders版を使用している場合は、Codeの部分がCode - Insidersになります。

まとめ

VSCode プロファイル機能を活用することで、用途別に最適化された開発環境を効率的に管理できます。

プロファイル機能の主なメリット

メリット	説明
起動時間の短縮	必要な拡張機能のみロード
集中力の向上	用途に応じたUIで作業
環境共有の簡易化	エクスポート/インポートで即座に共有
トラブルシューティング	空プロファイルで問題切り分け

推奨されるプロファイル運用

基本プロファイル: 日常的な開発作業用
言語別プロファイル: Python、Java、Web開発など
軽量プロファイル: ドキュメント執筆、設定編集用
プレゼンプロファイル: デモやペアプログラミング用

プロファイル機能を活用して、より効率的で快適な開発環境を構築しましょう。

VSCode プロファイル機能とは#

プロファイルで管理できる要素#

プロファイル機能の活用シーン#

実行環境と前提条件#

動作環境#

バージョン確認方法#

期待される結果#

プロファイルエディタへのアクセス#

方法1: メニューからアクセス#

方法2: 管理ボタンからアクセス#

プロファイルの作成#

基本的な作成手順#

コピー元の選択肢#

含める要素の選択#

実践: Web開発プロファイルの作成#

プロファイルテンプレートの活用#

利用可能なテンプレート一覧#

Pythonテンプレートの内容#

Doc Writerテンプレートの内容#

テンプレートからプロファイルを作成#

プロファイルの切り替え#

コマンドパレットからの切り替え#

プロファイルエディタからの切り替え#

現在のプロファイルの確認方法#

フォルダとプロファイルの関連付け#

自動関連付けの仕組み#

関連付けの確認と管理#

関連付けのリセット#

新しいウィンドウでプロファイルを指定#

メニューから開く#

デフォルトプロファイルの設定#

コマンドラインからの起動#

プロファイルのエクスポート#

GitHub Gistへのエクスポート#

ローカルファイルへのエクスポート#

エクスポート時の注意点#

プロファイルのインポート#

GitHub GistからのURLインポート#

ローカルファイルからのインポート#

インポート時のカスタマイズ#

プロファイルの同期#

Settings Syncの有効化#

同期される内容#

リモート環境での制限#

全プロファイル共通の設定#

設定の共有#

拡張機能の共有#

共有に適した項目の例#

一時プロファイルの活用#

一時プロファイルの作成#

活用シーン#

トラブルシューティング用の空プロファイル#

空プロファイルでの問題切り分け手順#

実践的なプロファイル構成例#

フロントエンド開発プロファイル#

バックエンド開発プロファイル（Node.js）#

データ分析プロファイル#

プレゼンテーションプロファイル#

プロファイルの保存場所#

まとめ#

プロファイル機能の主なメリット#

推奨されるプロファイル運用#

参考リンク#