CursorとVSCodeの拡張機能を同期する方法

採用はこちら

CursorとVSCodeは見た目や操作方法がよく似ているため、同じ拡張機能や設定を使いたいと考える人も多いでしょう。

ただし、CursorとVSCodeの間には、VSCodeの「Settings Sync」のような完全な双方向同期機能はありません。

そのため、実際には「VSCodeからCursorへ環境をインポートする」「推奨拡張機能を共通管理する」「設定ファイルをGitで共有する」といった方法を組み合わせるのが基本です。

この記事では、CursorとVSCodeの拡張機能をできるだけ同じ状態に保つ方法を詳しく解説します。

目次

CursorとVSCodeの拡張機能は完全には同期できない

まず理解しておきたいのは、CursorとVSCodeの拡張機能をリアルタイムで完全同期する仕組みは基本的に存在しないという点です。

VSCodeにはSettings Syncがある

VSCodeには「Settings Sync」という公式機能があります。

Settings Syncを利用すると、複数のVSCode環境間で次のような情報を同期できます。

  • 設定
  • キーボードショートカット
  • ユーザースニペット
  • ユーザータスク
  • UIの状態
  • 拡張機能
  • Profiles

そのため、複数のパソコンでVSCodeを使う場合は、Settings Syncを利用すれば環境を揃えやすくなります。

一方で、VSCodeのSettings Syncは基本的にVSCode同士で利用する仕組みです。

VSCode側で新しい拡張機能をインストールしたからといって、自動的にCursorにもインストールされるわけではありません。

Cursorとの連携は「同期」より「移行」に近い

Cursorには、VSCodeの設定や拡張機能を取り込む機能があります。

ただし、これは常時同期ではなく、VSCodeからCursorへ環境を移すための機能と考えるほうが正確です。

イメージとしては、次のようになります。

VSCode
↓
VSCode環境をインポート
↓
Cursor

一度インポートしたあとにVSCode側で拡張機能を追加しても、その変更が自動的にCursorへ反映され続けるわけではありません。

VSCodeからCursorへ拡張機能をインポートする

すでにVSCodeを利用している場合は、Cursorの「VS Code Import」を利用する方法が手軽です。

CursorのVS Code Importを利用する

CursorにはVSCode環境をインポートする機能があります。

バージョンによって画面構成が多少異なる場合がありますが、Cursorの設定画面からVS Code Importを実行できます。

一般的には、次のような情報を取り込めます。

  • 拡張機能
  • テーマ
  • Settings
  • Keybindings

VSCodeからCursorへ移行するときは、最初にこの機能を使うと効率的です。

インポート後は拡張機能を確認する

VS Code Importを実行したからといって、すべての拡張機能が必ず同じ状態になるとは限りません。

CursorではVSCodeと拡張機能の配布環境が完全には同じではないため、一部の拡張機能がインポートされない可能性があります。

また、Cursorのバージョンによっては、VS Code Importで拡張機能が正常に取り込まれない事例も報告されています。

そのため、インポート完了後はExtensions画面を開き、不足している拡張機能がないか確認すると安心です。

Windowsでは、次のショートカットでExtensions画面を開けます。

Ctrl + Shift + X

参考サイト

【Cursor】VSCodeの設定をimportする方法 – masavoid

CursorとVSCodeでは拡張機能の配布元が異なる

CursorとVSCodeの環境を揃えるうえで特に重要なのが、拡張機能の配布元の違いです。

VSCodeはVisual Studio Marketplaceを利用する

VSCodeでは、拡張機能の配布に主にVisual Studio Marketplaceが利用されています。

たとえば、次のような拡張機能を検索してインストールできます。

Prettier
ESLint
GitLens
PHP Intelephense
Python

CursorはOpen VSXを中心に利用する

Cursorは、サードパーティー拡張機能についてOpen VSXを中心とした仕組みを利用しています。

そのため、Visual Studio Marketplaceに存在する拡張機能が、必ずCursorでも利用できるとは限りません。

たとえば、

VSCode
○ インストール可能

Cursor
× 見つからない

というケースがあります。

特に、Microsoft独自のライセンス条件が設定されている拡張機能などは、Cursor側では利用できない場合があります。

同じ拡張機能IDでも注意する

VSCode拡張機能には、次のようなIDが付けられています。

publisher.extension

たとえば、

dbaeumer.vscode-eslint
esbenp.prettier-vscode

といった形式です。

ただし、Visual Studio MarketplaceとOpen VSXでは、同じような名前の拡張機能であっても配布元や内容が異なる可能性があります。

Cursorへ拡張機能をインストールするときは、拡張機能名だけでなくPublisherも確認すると安全です。

VSCodeの拡張機能一覧を取得する

大量の拡張機能を利用している場合は、VSCodeのCLIから一覧を取得すると便利です。

code –list-extensionsを使う

VSCodeのターミナルやPowerShellで次のコマンドを実行します。

code --list-extensions

すると、インストール済みの拡張機能が一覧表示されます。

例としては、次のようになります。

dbaeumer.vscode-eslint
esbenp.prettier-vscode
eamodio.gitlens
bmewburn.vscode-intelephense-client

この一覧とCursor側のExtensions画面を比較すれば、不足している拡張機能を確認できます。

拡張機能一覧をファイルに保存する

拡張機能一覧を保存したい場合は、次のように実行できます。

code --list-extensions > extensions.txt

すると、現在利用している拡張機能一覧がextensions.txtに保存されます。

パソコンを買い替える場合や、開発環境を再構築するときにも便利です。

cursor –list-extensionsは環境によって使えない場合がある

CursorもVSCodeをベースとしているため、環境によってはEditor用のShell Commandを利用できます。

その場合、

cursor --list-extensions

が動作することがあります。

ただし、このコマンドは環境によって挙動が異なります。

OSやインストール方法によっては利用できない場合があるため、必ず使えるコマンドとして紹介するのは適切ではありません。

Cursorの公式AI CLIとは別物

また、Cursorが提供しているAIエージェント用の公式CLIと、Cursor EditorのShell Commandは別物です。

AI用CLIでは、基本的に次のコマンドを利用します。

agent

そのため、

cursor

と

agent

は用途が異なるものとして理解しておきましょう。

.vscode/extensions.jsonで推奨拡張機能を共有する

CursorとVSCodeを併用する場合に便利なのが、.vscode/extensions.jsonです。

ただし、このファイルは拡張機能を直接同期するためのファイルではありません。

extensions.jsonは推奨拡張機能を指定するファイル

たとえば、プロジェクト内に次のようなファイルを作成します。

project/
├─ .vscode/
│  └─ extensions.json
├─ src/
└─ package.json

extensions.jsonには、次のように記述します。

{
    "recommendations": [
        "dbaeumer.vscode-eslint",
        "esbenp.prettier-vscode",
        "eamodio.gitlens"
    ]
}

これにより、

このプロジェクトでは
ESLint
Prettier
GitLens
の利用を推奨する

という情報をプロジェクト側に保存できます。

extensions.jsonは自動同期ではない

注意したいのは、extensions.jsonをGitで取得したからといって、拡張機能が必ず自動インストールされるわけではないことです。

あくまで「このプロジェクトで使用を推奨する拡張機能」を定義する仕組みです。

そのため、「拡張機能を同期する」というより、

VSCodeとCursorで使用する拡張機能の一覧を共通管理する

と考えるほうが正確です。

.vscode/settings.jsonで設定も揃える

拡張機能だけ同じにしても、設定が異なればVSCodeとCursorの操作感に差が出ます。

そこで活用できるのが、

.vscode/settings.json

です。

Workspace Settingsを共有する

たとえば、次のような設定を記述できます。

{
    "editor.formatOnSave": true,
    "editor.tabSize": 2,
    "files.trimTrailingWhitespace": true
}

このファイルをGitで管理すれば、同じプロジェクトを開いたときにVSCodeとCursorで共通の設定を利用しやすくなります。

特に、

  • 保存時の自動整形
  • インデント幅
  • 改行コード
  • ファイル末尾の改行
  • 特定拡張機能の設定

などを揃えたい場合に便利です。

すべての設定が共通化できるわけではない

CursorはVSCodeをベースにしているため、多くの設定を共有できます。

ただし、すべての設定を完全に共通化できるわけではありません。

たとえば、

Cursor固有の設定
VSCode固有の設定
特定拡張機能専用の設定

などがあります。

また、Cursor側に対象の拡張機能がインストールされていなければ、その拡張機能向けの設定も有効になりません。

そのため、.vscode/settings.jsonは「完全同期」のためではなく、共通部分を揃えるために利用するとよいでしょう。

Profilesを使って環境を移行する方法もある

大量の拡張機能や設定を管理している場合は、VSCodeのProfilesを利用する方法もあります。

Profilesとは

VSCodeのProfilesでは、用途ごとに開発環境を分けて管理できます。

たとえば、

Web Development
WordPress
PHP
JavaScript
TypeScript
Python

といったProfileを作成できます。

Profileには、拡張機能や設定などをまとめられます。

VSCodeのProfileをCursorへ移行する

VSCode側でProfileをエクスポートし、Cursor側でインポートする方法もあります。

イメージとしては次のようになります。

VSCode Profile
↓
Export
↓
Cursor
↓
Import Profile

拡張機能や設定が多い場合は、個別に設定するよりProfileを利用したほうが管理しやすくなることがあります。

WordPress開発ではGitで設定を管理すると便利

WordPress開発でCursorとVSCodeを併用する場合は、プロジェクト単位で設定を管理する方法がおすすめです。

WordPressプロジェクトの構成例

たとえば、次のような構成にします。

wordpress-project/
├─ .vscode/
│  ├─ settings.json
│  └─ extensions.json
├─ wp-content/
│  └─ themes/
│      └─ my-theme/
├─ .gitignore
└─ README.md

extensions.jsonには、たとえば次のような拡張機能を登録できます。

{
    "recommendations": [
        "bmewburn.vscode-intelephense-client",
        "esbenp.prettier-vscode",
        "dbaeumer.vscode-eslint",
        "eamodio.gitlens"
    ]
}

この構成をGitで管理すれば、

自宅PC → VSCode

会社PC → Cursor

ノートPC → VSCode

といった場合でも、プロジェクトに必要な設定や推奨拡張機能を確認しやすくなります。

CursorとVSCodeを併用するときのおすすめ構成

CursorとVSCodeを同じ開発環境として使う場合は、すべてを1つの仕組みで同期しようとするより、役割を分けたほうが管理しやすくなります。

VSCode同士はSettings Syncを使う

複数のVSCode環境については、VSCode公式のSettings Syncを利用します。

VSCode
↓
Settings Sync
↓
別PCのVSCode

これにより、拡張機能や設定などを同期できます。

VSCodeからCursorへはImportを使う

最初にCursorを導入するときは、VS Code Importを利用します。

VSCode
↓
VS Code Import
↓
Cursor

必要に応じてProfilesを利用してもよいでしょう。

プロジェクト単位では.vscodeをGit管理する

日常的な開発環境は、

.vscode/settings.json
.vscode/extensions.json

をGitで管理します。

これにより、VSCodeとCursorの共通部分をプロジェクト単位で揃えやすくなります。

CursorとVSCodeを完全同期するより共通設定を管理するのがおすすめ

CursorとVSCodeは非常によく似たエディターですが、拡張機能の配布元や独自機能には違いがあります。

そのため、

VSCodeとCursorを完全に同じ状態にする

ことを目指すより、

共通して使える拡張機能
+
共通して使える設定
+
CursorまたはVSCode固有の設定

という形で管理するほうが現実的です。

特におすすめなのは、次の構成です。

VSCode同士
→ Settings Sync

VSCodeからCursorへの初期移行
→ VS Code ImportまたはProfiles

プロジェクトの共通設定
→ .vscode/settings.json

推奨拡張機能
→ .vscode/extensions.json

Cursorで不足する拡張機能
→ Extensions画面から個別に追加

この方法であれば、CursorとVSCodeの仕様差に影響されにくく、WordPressやJavaScript、TypeScript、PHPなどの開発環境も管理しやすくなります。

「CursorとVSCodeの拡張機能を同期する」というより、VSCodeからCursorへ環境を移行しつつ、プロジェクト単位で共通設定を管理すると考えるのが、最も正確で実用的な方法です。

以上、CursorとVSCodeの拡張機能を同期する方法についてでした。

最後までお読みいただき、ありがとうございました。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次