[Cursorエディター導入/第一歩] Cursorエディターを触ってみました

## はじめに
これまで GitHub Copilot を使ってきましたが、最近はコーディング領域でも AI エージェントが話題になっており、私も業務で導入してみました。

ちなみに、プライベートでも14日間のProトライアルが無料で利用できますのでありがたいですね

**4月19日更新**
私が導入を検討していた当時、ClineやWindsurfなどもすでに話題になっていましたが、Cursor は VSCodeベースでありながら独自のカスタマイズがされていますので、使ってみたいと思っていました。
あとCursorはある程度定額で利用できるため、安心して使えるのも魅力です。

最近はGitHub Copilotにもエージェントモードが追加され、さらにWindsurfがOpenAIに買収されたこともあり、初心者にとってはどれを選ぶべきか悩ましいところですね。

## 日本語化

Shift+Command+P > 「Configure Display Language」入力

日本語を検索、右側の「インフォメーションアイコン ℹ️ をクリック」、「Japanese Language Pack for Visual Studio Code」をインストール

## エディター基本設定

エディター設定画面での操作ではなく、settings.json に直接に記入方法

Command + , で設定画面を開き、右上にあるアイコンをクリックして settings.json を開く

自分はこのように設定しています
```
{
    "workbench.colorTheme": "Default Dark+",
    // 拡張子インストールの際に署名検証無効化
    "extensions.verifySignature": false,
    // 新規ウィンドウを最後に開いたウィンドウと同じサイズで開く
    "window.newWindowDimensions": "inherit",
    // ヘッダーにコマンドセンター表示
    "window.commandCenter": true,
    // エメットをtabキーで展開する
    "emmet.triggerExpansionOnTab": true,
    // 検索結果に行番号表示
    "search.showLineNumbers": true,
    // ファイル保存時、最終行に改行を挿入する
    "files.insertFinalNewline": true,
    // ファイル保存時、最終行以降の空行を削除する
    "files.trimFinalNewlines": true,
    // ファイル保存時、末尾の空白をトリミングする
    "files.trimTrailingWhitespace": true,
    // 保存時に自動整形する
    "editor.formatOnSave": true,
    // minimapを表示
    "editor.minimap.enabled": true,
    // ファイルのパンくずリストを表示する
    "breadcrumbs.enabled": true,
    // タブ幅指定
    "editor.tabSize": 2,
    // インデントガイドを表示する 拡張機能のindent-rainbowを導入
    "editor.guides.indentation": true,
    // 括弧（ブラケット）の水平方向のペアガイドを表示する
    "editor.guides.bracketPairsHorizontal": true,
    // 括弧（ブラケット）のペアごとに色を分ける
    "editor.bracketPairColorization.independentColorPoolPerBracketType": true,
    // 選択範囲のハイライトに角丸を適用する
    "editor.roundedSelection": true,
    // 空白文字を可視化。none, all, boundary：単語間の単一スペースは可視化しない。
    "editor.renderWhitespace": "all",
    // テキストを折り返して表示する
    "editor.wordWrap": "on",
    // 折り返す幅
    "editor.wordWrapColumn": 140,
    // "same"は元の行と同じインデントを付けることを意味する
    "editor.wrappingIndent": "same",
    // スニペット接頭辞を入力し、tabキーで挿入する
    "editor.tabCompletion": "on",
    // スニペットを他の修正候補より優先して表示する
    "editor.snippetSuggestions": "top",
    "editor.formatOnType": true,
    "editor.formatOnPaste": true,
    // 入力中にクイックサジェストを表示する（コメント、文字列リテラル内）
    "editor.quickSuggestions": {
        "comments": "on",
        "strings": "on"
    },
    // ファイルオープン時のエンコードの自動判別を有効化
    "files.autoGuessEncoding": true,
    // フォント指定
    "editor.fontFamily": "'Fira Code', 'Cica', 'monospace'",
    // フォントの太さ
    "editor.fontWeight": "500",
    // フォントサイズ指定
    "editor.fontSize": 13,
    // 文字間隔
    "editor.letterSpacing": -0.4,
    // 行間
    "editor.lineHeight": 1.4,
    // 数字や文字列、関数などのカラー設定が可能。ここではコメントのテキストカラーを指定。
    "editor.tokenColorCustomizations": {
        "comments": "#5da33c",
    },
    // Cursorのアクティビティバーの向きを垂直にする
    "workbench.activityBar.orientation": "vertical",
    // ファイルアイコンテーマを設定
    "workbench.iconTheme": "vscode-icons",
    // ファイルツリーのインデント幅を指定
    "workbench.tree.indent": 16,
    // ツリーのインデントガイドを表示する
    "workbench.tree.renderIndentGuides": "always",
    // アニメーションを減らす
    "workbench.reduceMotion": "on",
    // インデント、アクティブタブ、ステータスバーのカラー指定
    "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": "#563b90",
        "tab.activeForeground": "#d3d2d4",
        "statusBar.background": "#53208c"
    },
    // ファイル拡張子を言語に関連付ける
    "files.associations": {
        "*.py": "python",
        "*.md": "markdown",
        "*.toml": "toml",
        "*.html": "html",
        "*.txt": "text",
        "*.tsx": "typescriptreact",
        "Makefile": "makefile",
    },
    // デフォルトフォーマッター指定
    "[python]": {
        "editor.formatOnSave": true,
        "editor.codeActionsOnSave": {
            "source.fixAll": "explicit",
            "source.organizeImports": "explicit"
        },
        "editor.defaultFormatter": "charliermarsh.ruff",
        "editor.suggestSelection": "first",
        "editor.snippetSuggestions": "top",
        "editor.suggest.localityBonus": true,
        "editor.suggest.shareSuggestSelections": true,
        "editor.suggest.preview": true,
    },
    "[json]": {
        "editor.defaultFormatter": "vscode.json-language-features"
    },
    "[markdown]": {
        "editor.defaultFormatter": "vscode.markdown-language-features"
    },
    "[html]": {
        "editor.defaultFormatter": "vscode.html-language-features"
    },
    "[javascript, typescript, typescriptreact, json]": {
        "editor.defaultFormatter": "vscode.typescript-language-features"
    },
    "files.exclude": {
        "**/.idea": true,
        "**/*_cache": true
    },
    // ターミナルの文字サイズ
    "terminal.integrated.fontSize": 15,
    // ターミナルの行間
    "terminal.integrated.lineHeight": 1.25,
    // 新規ターミナル画面の表示位置
    "terminal.integrated.defaultLocation": "editor",
}
```

## キーバインド変更

Command+R > Command+S で、「キーボードショートカット」を開き、

好きなショートカットキーを設定

自分はこのように設定しています

```
[
  // Go To Declaration/定義へ移動（Jetbrains=CMD+B）
  {
    "key": "cmd+b",
    "command": "-workbench.action.toggleSidebarVisibility"
  },
  {
    "key": "cmd+b",
    "command": "editor.action.revealDefinition",
    "when": "editorHasDefinitionProvider && editorTextFocus"
  },
  {
    "key": "f12",
    "command": "-editor.action.revealDefinition",
    "when": "editorHasDefinitionProvider && editorTextFocus"
  },
  // Search Everywhere/どこでも検索（Jetbrains=Double Shift）
  {
    "key": "shift shift",
    "command": "workbench.action.showAllSymbols"
  }
]
```