「新しいPCを買ったけど、VSCodeの設定をまた一から…」
「会社と自宅で同じ環境にしたいのに、毎回設定が面倒」
「VSCodeを再インストールしたら、カスタマイズが全部消えちゃった！」
こんな経験、ありませんか？
せっかく時間をかけて作った自分だけの開発環境。
消えてしまったら、また一から作り直すのは本当に大変ですよね。
でも大丈夫！VSCodeの設定は簡単にエクスポート・インポートできるんです。
この記事では、設定のバックアップから複数端末での同期まで、あらゆる方法を分かりやすく解説します。
VSCodeの設定って何が保存されるの？
保存される設定の種類
VSCodeの「設定」には、実はこんなにたくさんの要素があります：
基本設定：
- エディタの見た目（テーマ、フォント、サイズ）
- 動作設定（自動保存、タブサイズ、改行コード）
- 言語別の設定（Python、JavaScript等の個別設定）
拡張機能関連：
- インストールした拡張機能のリスト
- 各拡張機能の設定
- 無効化している拡張機能の情報
カスタマイズ：
- キーボードショートカット
- ユーザースニペット
- タスク設定（tasks.json）
- デバッグ設定（launch.json）
その他：
- 最近開いたファイル・フォルダ
- 検索履歴
- ターミナルの設定
これら全部、ちゃんとバックアップできます！
方法1：Settings Sync（公式機能）で自動同期
最も簡単で確実な方法
2020年から追加された公式機能。これが一番おすすめです！
設定手順：
- サインインする
- 左下の人型アイコンをクリック
- 「Settings Syncを有効にする」を選択
- MicrosoftまたはGitHubアカウントでサインイン
- 同期する項目を選ぶ
設定 → Settings Sync → Configure ☑ 設定 ☑ キーボードショートカット ☑ 拡張機能 ☑ ユーザースニペット ☑ UIの状態 - 同期開始！
- 自動的にクラウドに保存される
- 他のPCでも同じアカウントでサインインすれば同期
便利な使い方
複数のプロファイルを作成：
1. Ctrl/Cmd + Shift + P
2. 「Profiles: Create Profile」
3. プロファイル名を入力（例：「仕事用」「個人用」）
仕事用と個人用で設定を分けられます！
同期の一時停止：
- 左下の同期アイコンをクリック
- 「Settings Sync is On」→「Turn Off」
トラブル対処法
同期の競合が発生した場合：
1. 通知バーに「Merge Conflicts」と表示
2. クリックして競合を解決
3. ローカル or リモートを選択
方法2：手動でエクスポート・インポート
settings.jsonをコピーする
設定ファイルの場所：
Windows:
%APPDATA%\Code\User\settings.json
Mac:
~/Library/Application Support/Code/User/settings.json
Linux:
~/.config/Code/User/settings.json
エクスポート手順：
- Ctrl/Cmd + Shift + P
- 「Preferences: Open Settings (JSON)」
- 全選択してコピー
- 新しいファイルに保存
インポート手順：
- 新しいVSCodeで同じくsettings.jsonを開く
- 保存した内容を貼り付け
- 保存（Ctrl/Cmd + S）
拡張機能リストのエクスポート
コマンドラインで一覧を取得：
# Windowsの場合（PowerShell）
code --list-extensions > extensions.txt
# Mac/Linuxの場合
code --list-extensions > extensions.txt
出力例（extensions.txt）：
dbaeumer.vscode-eslint
esbenp.prettier-vscode
ms-python.python
ritwickdey.LiveServer
一括インストールスクリプト：
Windows (install-extensions.bat):
@echo off
for /F "tokens=*" %%A in (extensions.txt) do (
code --install-extension %%A
)
Mac/Linux (install-extensions.sh):
#!/bin/bash
cat extensions.txt | xargs -L 1 code --install-extension
たった1行で全部インストール完了！
方法3：プロファイルのエクスポート（VSCode 1.75以降）
新機能！プロファイルごと丸ごと保存
エクスポート手順：
- コマンドパレットを開く
- Ctrl/Cmd + Shift + P
- エクスポートコマンドを実行
Profiles: Export Profile... - エクスポート形式を選択
- Local file: ファイルとして保存（.code-profile）
- GitHub Gist: GitHubに保存（共有可能）
- 含める内容を選択
☑ Settings（設定） ☑ Extensions（拡張機能） ☑ Keybindings（キーバインド） ☑ Snippets（スニペット） ☑ Tasks（タスク） ☑ UI State（UI状態）
プロファイルのインポート
ファイルからインポート：
- Ctrl/Cmd + Shift + P
- 「Profiles: Import Profile…」
- .code-profileファイルを選択
- インポート完了！
URLからインポート：
1. 共有されたGist URLをコピー
2. Profiles: Import Profile from URL
3. URLを貼り付け
4. 即座に環境構築完了
チーム全員で同じ環境を共有できます！
方法4：dotfilesで管理（上級者向け）
GitHubでバージョン管理
ディレクトリ構造：
dotfiles/
├── vscode/
│ ├── settings.json
│ ├── keybindings.json
│ ├── snippets/
│ └── extensions.txt
├── install.sh
└── README.md
シンボリックリンクで管理：
Mac/Linux:
# リポジトリをクローン
git clone https://github.com/あなたのID/dotfiles.git ~/dotfiles
# シンボリックリンクを作成
ln -s ~/dotfiles/vscode/settings.json ~/Library/Application\ Support/Code/User/settings.json
ln -s ~/dotfiles/vscode/keybindings.json ~/Library/Application\ Support/Code/User/keybindings.json
Windows (管理者権限のコマンドプロンプト):
mklink %APPDATA%\Code\User\settings.json %USERPROFILE%\dotfiles\vscode\settings.json
mklink %APPDATA%\Code\User\keybindings.json %USERPROFILE%\dotfiles\vscode\keybindings.json
自動セットアップスクリプト
install.sh の例：
#!/bin/bash
echo "🚀 VSCode設定をセットアップします..."
# VSCodeがインストールされているか確認
if ! command -v code &> /dev/null; then
echo "❌ VSCodeがインストールされていません"
exit 1
fi
# 設定ファイルのシンボリックリンク作成
VSCODE_DIR="$HOME/Library/Application Support/Code/User"
ln -sf "$HOME/dotfiles/vscode/settings.json" "$VSCODE_DIR/settings.json"
ln -sf "$HOME/dotfiles/vscode/keybindings.json" "$VSCODE_DIR/keybindings.json"
# 拡張機能をインストール
echo "📦 拡張機能をインストール中..."
cat dotfiles/vscode/extensions.txt | xargs -L 1 code --install-extension
echo "✅ 完了！"
ワークスペース設定も忘れずに
プロジェクト固有の設定
.vscode/settings.json：
{
// プロジェクト専用設定
"editor.tabSize": 2,
"files.exclude": {
"node_modules": true,
".git": true
},
"python.linting.enabled": true,
"python.formatting.provider": "black"
}
バックアップ方法：
- プロジェクトの
.vscodeフォルダごとGitにコミット - チーム全員で共有
.gitignoreに追加しない
おすすめの.vscodeフォルダ構成
.vscode/
├── settings.json # プロジェクト設定
├── launch.json # デバッグ設定
├── tasks.json # タスク設定
├── extensions.json # 推奨拡張機能
└── *.code-snippets # プロジェクト用スニペット
extensions.json の例：
{
"recommendations": [
"dbaeumer.vscode-eslint",
"esbenp.prettier-vscode",
"ms-python.python"
],
"unwantedRecommendations": [
"ms-vscode.js-debug-nightly"
]
}
設定移行時のチェックリスト
完璧な移行のために確認すること
必須項目：
- [ ] settings.json
- [ ] keybindings.json
- [ ] 拡張機能リスト
- [ ] スニペット
- [ ] テーマ設定
忘れがちな項目：
- [ ] ターミナルプロファイル
- [ ] Git設定
- [ ] 拡張機能の個別設定
- [ ] ワークスペースの信頼設定
- [ ] 最近使用したファイル
言語別設定：
- [ ] Python: インタープリターパス
- [ ] Node.js: npmスクリプト
- [ ] Java: JDKパス
- [ ] C++: コンパイラパス
トラブルシューティング
よくある問題と解決法
問題1：拡張機能が動かない
原因：依存関係やバージョンの問題
解決法：
# 拡張機能を全削除して再インストール
code --list-extensions | xargs -L 1 code --uninstall-extension
cat extensions.txt | xargs -L 1 code --install-extension
問題2：設定が反映されない
原因：ワークスペース設定が優先されている
解決法：
1. Ctrl/Cmd + Shift + P
2. 「Preferences: Open Workspace Settings」
3. 競合する設定を削除
問題3：文字化けする
原因：文字コードの違い
解決法：
// settings.jsonに追加
{
"files.encoding": "utf8",
"files.autoGuessEncoding": true
}
ベストプラクティス
定期バックアップの習慣化
週次バックアップスクリプト：
#!/bin/bash
# backup-vscode.sh
DATE=$(date +%Y%m%d)
BACKUP_DIR="$HOME/vscode-backups/$DATE"
mkdir -p "$BACKUP_DIR"
# 設定ファイルをバックアップ
cp -r "$HOME/Library/Application Support/Code/User" "$BACKUP_DIR/"
# 拡張機能リストを保存
code --list-extensions > "$BACKUP_DIR/extensions.txt"
echo "✅ バックアップ完了: $BACKUP_DIR"
チーム開発での設定共有
推奨設定の共有方法：
- プロジェクトリポジトリに含める：
.vscode/settings.json：必須設定.vscode/extensions.json：推奨拡張機能
- 別リポジトリで管理：
- チーム用の設定リポジトリを作成
- READMEにセットアップ手順を記載
- プロファイルをGistで共有：
- エクスポート時にGistを選択
- URLをチームに共有
まとめ：もう設定を失うことはありません
VSCodeの設定管理、実はこんなに簡単なんです。
方法まとめ：
- 初心者向け：Settings Syncを使う（最も簡単）
- 中級者向け：プロファイル機能でエクスポート
- 上級者向け：dotfilesでGit管理
- チーム向け：.vscodeフォルダで共有
今すぐやるべきこと：
- Settings Syncを有効にする（3分で完了）
- 拡張機能リストをエクスポート（念のため）
- 定期バックアップの仕組みを作る
- チームメンバーと設定を共有
最後に： 開発環境は、エンジニアにとって大切な「仕事道具」。
しっかりバックアップして、いつでもどこでも最高の環境で開発できるようにしましょう。
新しいPCでも、5分で完璧な環境が復元できる。
そんな安心感があれば、もっと開発に集中できますね！
コメント