はじめに
これまで 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"
}
]