ChatGPT✖️VSCodeのAI搭載エディター「Cursor」のわかりやすい使い方
Cursorとは
AI（ChatGPT）を活用したコードエディターで、ブラウザを開かなくてもエディター内でChatGPTを使用した修正や質問ができます。
現在のVSCodeの設定や拡張などをそのまま引き継げるので、VSCodeを使用してる人はChatGPTの拡張が追加されたような感じで使用できます！
プライバシーモード
ChatGPTを使用するので、プライバシーモードの設定をしておきましょう。このモードを有効にするとAIの学習にも使用されないため、ユーザーのプライバシー保護が強化されます。
コマンドパレットでsettingsと入力し検索、
下へスクロールし、Privacy Modeをenabledへ変更してプライバシーモードを有効にしてください。
ダウンロードと初期設定
ダウンロードが済んでいる方は目次から操作の項目に飛んでください。🙇
まずはCursor(https://cursor.sh/)からダウンロードしてください。
Download for Macを選択してZipファイルをダウンロードします。
ダウンロードしたZipファイルを選択します。
Install Cursorが表示されると思うのでダブルクリックで開いてください。
開くを選択してください。
インストールが始まります。
インストールが終わると、アプリが開くと思います。
私はVSCodeを使用しているので、Default（VSCode）、言語設定のみを日本語と入力してContinueを選択しました。
この設定によって、ChatGPTを使用する際に日本語で会話できるようになります。
現在のVSCodeの設定や拡張などをそのまま使用するためにUse Extensionsを選択し、
Log inを選択
私はGitHubを選択しました。
Authorize getcursorを選択
これで初期設定は完了しました！
ちなみに
アプリケーションにアプリが入っていると思います。
確認できたら先ほどのZipファイルとInstall Cursorは使用しないので削除してください。
チャットエリアを表示する
⌘+Shift+Lでチャットエリアを表示することができます。
エラー修正
最初にエディターで表示されているチュートリアル用と思われる.cursor-tutorのコードを使用して色々と試してみたいと思います。
.cursor-tutor/projects/javascript/src/index.jsの24行目のheaderをheadeとタイポしてみます。
エラーの下線が出ているのでエラー箇所をホバーして、AI Fix In Chatをクリックしてください。
以下のように修正方法を教えてくれます。
また、赤枠の部分を押すと
自動でコードを修正してくれます。選択するか⌘Yで修正したコードに変更することができます。
ターミナルのエラー修正
ターミナルでエラーが出た際にDebug with AIを押すと先ほどのように修正方法を教えてくれます。
チャット欄にコードをペーストする
ペーストしたいコードを範囲選択して、⌘Lでチャット欄に範囲選択した部分のコードだけがペーストされます。
コードを選択して質問
範囲を選択して⌘Kを押すと、チャット欄を使用せず、押した場所で質問を入力することができます。
Submit Editで質問を送信してください。
Acceptを選択するとすべてのコードが修正されます。
headerのタイポも一緒に修正されていますね。
すべてのコードが修正されました。
Web上のドキュメントを学習(Docs機能)
チャットエリアで@を入力またはAttachを選択します。
Docsを選択
S3のドキュメントなど色々出ていますが、一番下のAdd New Docsを選択してください。
学習させたいURLを入力してください。
今回はTailwind cssのドキュメントを学習させてみたいと思います。
入力が終わったらreturnキーを押します
あれ、すでに名前がついている...? Confirmを選択してみます。
既に存在するようです。
ありました。
登録がなかった https://cva.style/docs/examples/react/css-modules で試してみます。
好きな名前をつけて Confirmを選択してください。
今回はReact with CSS Modulesとしました。以下が表示され読み込みが完了しました。
次回以降も出てくるようになっていますね。
特定のコードや依存関係を学習させる(Symbols機能)
先ほどのDocs機能と同じで@を入力し、ドロップダウンからファイルやコードのシンボルを選択することで特定のコードや依存関係を学習させることができます。
プロジェクトを一から作成してもらう
FileからNew AI Projectを選択
作成してほしいプロジェクトの内容を記述してください。
今回は簡単に記述してみます。
プロジェクトを作成するフォルダを選択、プロジェクト名を入力してDoneを押してください。
作成されています。
内容を確認してみます。
FileからOpen Folderで作成されたプロジェクトを選択
下記のような内容でした。
アクティビティーバーの表示
デフォルトでは、水平になっていると思います。VSCodeと同じにしたいので縦並びに変更したいと思います。
設定を選択、
Editor > Open editer settingsを選択、
activityBarと入力、Orientationの値をverticalに選択して、
Restartを選択して、再起動してください。
縦並びに変更されていると思います！
料金について
| Basic(無料) | Pro($20／月) | Business（1人につき$40／月） | |
|---|---|---|---|
| GPT-3.5の使用回数 | 200回／月 | 無制限 | 無制限 |
| GPT-4の使用回数 | 基本的なチャット機能 50回（毎月リセットされません） | 基本的なチャット機能 無制限 / 優先的なアクセス、高速で高精度のチャット機能 500回 |
無制限 |
OpenAIのAPIキー設定
右上の歯車からAPIキーを入力できます。
チュートリアル 開発サーバーの起動
projects/javascript/src/に移動して依存関係をインストールします。
npm install
開発サーバーを起動します。
npm start
下記が表示されると思うので、OKを選択してください。
http://localhost:3000 にアクセスすると下記が表示されているかと思います。
参考にさせていただきました
終わりに
何かありましたらお気軽にコメント等いただけると助かります。
ここまでお読みいただきありがとうございます🎉
Discussion