💻
Cursor, VS Codeのおすすめ設定

2025/02/18に公開
VS Code
設定
Cursor
tech
エディター"Cursor"のおすすめ設定（＆個人的な好み）です。

元はVSCodeの設定で、Cursorインストール時にそのまま引き継いでますので共通で使用できます。

 Cursorをインストール&初期設定公式サイトダウンロードからインストールできます。

Homebrew経由でのインストール手順は1・2を参照↓
ターミナルでコマンドbrew install --cask cursorを実行

cursor was successfully installed!メッセージが表示されインストールできたら、Cursorを起動する
初期設定を行う（お好みで）
Keyword → DefaultはVSCode
Language for AI → 日本語
Codebase-wide → Enabled
Add Terminal Command → Install "cursor"を選択

※ターミナルからCursorを起動するコマンドでcursorを使用する。

VSCodeの拡張機能を引き継ぐ → Use Extensionsを選択
Cursorにデータ収集させない → Privacy Modeを選択
ログイン → Google / GitHubどちらかでログイン。Cursorアカウント作成も可能。
VSCode設定をインポートする

右上の歯車マークから「Cursor SettingsのGeneral > VS Code Import > Confirm」をクリック



 Cursorおすすめ設定
 日本語化するShift+Command(Ctrl)+Pまたはメニューバーの「View > Command Palette」でCommand Palette開く


「Configure Display Language」を検索してクリック

※キャプチャは既に日本語化した後なので日本語表示になってます


「日本語」を選択


再起動する

 アクティビティバーをVSCodeライクにするCursorのアクティビティバーはデフォルトで横向き設定です。



VSCodeのように垂直にしたい場合は、
メニューバーの「Cursor > 基本設定 > 設定」をクリック


「workbench.activityBar.orientation」を検索し、「Vertical」を選択



再起動後、垂直に変更できます！



 キーバインドの割り当てVSCodeで使用していたキーバインドがCursorの割り当てと一部競合するので変更or削除しておく。

 例：Shift+Command+K（行を削除）をCursorに適用Command(Ctrl)+R, Command(Ctrl)+Sまたはアクティビティバーの歯車マークから「キーボードショートカット」をクリック


キーを入力して一覧から検索（例：shift cmd k）


競合しているコマンドに異なるキーバインドを指定するか、右クリックで「キーバインドの削除」を選択



 AIの返信を日本語化する右上の歯車マークから「Cursor SettingsのGeneral > Rules for AI > Always respond in 日本語」に設定。


 プライバシー設定インストール時に初期設定でPrivacy Modeを選択している場合は不要ですが、もし設定していなければここから行います。

右上の歯車マークから「Cursor SettingsのGeneral > Privacy mode > enabled」に設定。


 AI Modelsデフォルトでclaude-3.5-sonnetやgpt-4oなどにチェックが入っているので、自分が使用するものに切り替えます。


 モデルの違い使用料金がモデルによって異なります↓

https://docs.cursor.com/settings/models
主要モデルの特徴はこちら↓
Claude 3.5 Sonnet

Anthropicから2024年6月リリース。ベンチマークを見るとGPT-4oを上回る高性能ぶり。

https://www.anthropic.com/claude/sonnet
GPT-4o

OpenAIから2024年5月にリリース。コンテキストの理解力が高い。

https://openai.com/index/hello-gpt-4o/
o1

OpenAIから2024年12月にリリース。コーディング、数学の複雑な問題解決能力が高い。

https://openai.com/o1/

 Cursor,VSCode共通おすすめ設定ここからVSCodeと共通設定です。

 カラーテーマVSCodeではDefault Dark Modern（ダークモダン）を設定



Cursorはデフォルト配色Anysphere Darkが結構良いなと思いそのままにしましたが、VSCodeと同じカラーテーマも選べます。


 ステータスバーの配色下部のステータスバーの色をカスタマイズ

settings.json
{
    "workbench.colorCustomizations": {
        "statusBar.background": "#53208c"
    },
}

 アクティブタブの配色アクティブなタブの視認性を良くするために、背景色と文字色をカスタマイズ

settings.json
{
    "workbench.colorCustomizations": {
        "tab.activeBackground": "#7442ad",
        "tab.activeForeground": "#d3d2d4",
    },
}

 インデントの配色現在は拡張機能indent-rainbow無しで配色設定できるとのことで、適当な色を設定。

acriveBackgroundはカーソルがあたりアクティブな範囲に適用するカラーです。

settings.json
{
    "workbench.colorCustomizations": {
        "editorIndentGuide.background1": "#cb997e",
        "editorIndentGuide.background2": "#ddbea9",
        "editorIndentGuide.background3": "#ffe8d6",
        "editorIndentGuide.background4": "#b7b7a4",
        "editorIndentGuide.background5": "#a5a58d",
        "editorIndentGuide.background6": "#6b705c",
        "editorIndentGuide.activeBackground1": "#06d6a0",
        "editorIndentGuide.activeBackground2": "#06d6a0",
        "editorIndentGuide.activeBackground3": "#06d6a0",
        "editorIndentGuide.activeBackground4": "#06d6a0",
        "editorIndentGuide.activeBackground5": "#06d6a0",
        "editorIndentGuide.activeBackground6": "#06d6a0",
    },
}

 フォントPlemolJPかHackGenを使っています。見た目はこんな感じ↓

 PlemolJPhttps://github.com/yuru7/PlemolJP

settings.json
{
    "editor.fontFamily": "PlemolJP35 Console NF, monospace",
}

 HackGenhttps://github.com/yuru7/HackGen

settings.json
{
    "editor.fontFamily": "HackGen35 Console NF",
}

 アイコンMaterial Iconを指定。各ファイルのアイコンが分かりやすくなります。

settings.json
{
    "workbench.iconTheme": "material-icon-theme",
}

 フォーマッターPrettierpackageをインストールしコマンドでのコード整形も行いますが、拡張機能Prettier - Code formatterも併用。保存時に自動でフォーマットされるようformatOnSaveもtrueにしています。

settings.jsonには言語ごとにフォーマッターを指定するか、フォーマット除外指定しておく。
settings.json
{
    "[html]": {
        "editor.defaultFormatter": "vscode.html-language-features"
    },
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[typescriptreact]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "editor.formatOnSave": true,
}
settings.json
{
// markdownはフォーマットさせない
    "[markdown]": {
        "editor.formatOnSave": false
    },
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,
}

 その他もろもろ設定その他の設定も含め、全体のsettings.jsonです。
{
// ファイルアイコンテーマを設定
    "workbench.iconTheme": "material-icon-theme",
// 新規ウィンドウを最後に開いたウィンドウと同じサイズで開く
    "window.newWindowDimensions": "inherit",
// タブ幅指定
    "editor.tabSize": 2,
// カーソル移動の動きを滑らかなアニメーションにする
    "editor.cursorSmoothCaretAnimation": "on",
// フォント指定
    "editor.fontFamily": "PlemolJP35 Console NF, monospace",
// テキストを折り返して表示する
    "editor.wordWrap": "on",
// フォントサイズ指定
    "editor.fontSize": 14,
// 入力中にクイックサジェストを表示する（コメント、文字列リテラル内）
    "editor.quickSuggestions": {
        "comments": "on",
        "strings": "on"
    },
// スニペット接頭辞を入力し、tabキーで挿入する
    "editor.tabCompletion": "on",
// エメットをtabキーで展開する
    "emmet.triggerExpansionOnTab": true,
// ファイルツリーのインデント幅を指定
    "workbench.tree.indent": 16,
// 保存時に自動整形する
    "editor.formatOnSave": true,
// ファイル拡張子を言語に関連付ける
    "files.associations": {
        "*.tsx": "typescriptreact"
    },
// デフォルトフォーマッター指定
    "[html]": {
        "editor.defaultFormatter": "vscode.html-language-features"
    },
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[typescriptreact]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
// 数字や文字列、関数などのカラー設定が可能。ここではコメントのテキストカラーを指定。
    "editor.tokenColorCustomizations": {
        "comments": "#c0c0c0"
    },
// 空白文字を可視化。none, all, boundary：単語間の単一スペースは可視化しない。
    "editor.renderWhitespace": "boundary",
// インデント、アクティブタブ、ステータスバーのカラー指定
    "workbench.colorCustomizations": {
        "editorIndentGuide.background1": "#cb997e",
        "editorIndentGuide.background2": "#ddbea9",
        "editorIndentGuide.background3": "#ffe8d6",
        "editorIndentGuide.background4": "#b7b7a4",
        "editorIndentGuide.background5": "#a5a58d",
        "editorIndentGuide.background6": "#6b705c",
        "editorIndentGuide.activeBackground1": "#06d6a0",
        "editorIndentGuide.activeBackground2": "#06d6a0",
        "editorIndentGuide.activeBackground3": "#06d6a0",
        "editorIndentGuide.activeBackground4": "#06d6a0",
        "editorIndentGuide.activeBackground5": "#06d6a0",
        "editorIndentGuide.activeBackground6": "#06d6a0",
        "tab.activeBackground": "#7442ad",
        "tab.activeForeground": "#d3d2d4",
        "statusBar.background": "#53208c"
    },
// Cursorのアクティビティバーの向きを垂直にする
    "workbench.activityBar.orientation": "vertical",
// minimapを表示
    "editor.minimap.enabled": true
}

 参考URLhttps://zenn.dev/chot/articles/ae03134c3b9c12

https://zenn.dev/gamuprog/articles/53e7adee04b337

https://qiita.com/k1mu0419/items/2d903660d1f571abb8f2

https://qiita.com/htcd/items/21266f6472ac2c39933e