話題のCursorを使ってみる
おっび
これを見るに満足に使う分には課金をしたほうがいいのかなと思ったけど、OpenAIのAPI Keyをつかうこともできるみたいなのでそちらの方向で試してみる
おっび
インストールして言われるがまま設定しておく
codeと共存させたいので cursor コマンドをインストールしておく
おっび
VSCodeから設定をインポートできるみたいだけどCursorをカスタマイズしていきたいので一旦今回はインポートせずにスタートする
おっび
データプライバシーモードに関する設定らしい。
とりあえず再学習に食われても問題ないので一旦デフォルトの方を選んでおく
おっびこのあとGithubアカウントでログインして開いた。
おっび今回はとりあえずAstroの新規プロジェクトを作ってそれを使って遊んでみる
$ npm create astro@latest
Need to install the following packages:
create-astro@4.7.3
Ok to proceed? (y) y
astro Launch sequence initiated.
dir Where should we create your new project?
./cursor-test
tmpl How would you like to start your new project?
Include sample files
ts Do you plan to write TypeScript?
Yes
use How strict should TypeScript be?
Strict
deps Install dependencies?
Yes
git Initialize a new git repository?
Yes
✔ Project initialized!
■ Template copied
■ TypeScript customized
■ Dependencies installed
■ Git initialized
next Liftoff confirmed. Explore your project!
Enter your project directory using cd ./cursor-test
Run npm run dev to start the dev server. CTRL+C to stop.
Add frameworks like react or tailwind using astro add.
Stuck? Join us at https://astro.build/chat
╭─────╮ Houston:
│ ◠ ◡ ◠ Good luck out there, astronaut! 🚀
╰─────╯
npm notice
npm notice New minor version of npm available! 10.2.4 -> 10.4.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.4.0
npm notice Run npm install -g npm@10.4.0 to update!
npm notice
WSLがうまく行かないのでここからはmacで進める
おっびmacにインストールして起動
なんかミスってVSCodeの拡張機能をインポートしてしまったので見た目が変わっている。
おっびそしてAstroじゃなくてそんなに詳しくないNext.jsを使うことにする。
$ npx create-next-app@latest
Need to install the following packages:
create-next-app@14.1.0
Ok to proceed? (y) y
✔ What is your project named? … cursor-test
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes
Creating a new Next.js app in /Users/syotaro2122/dev/cursor-test.
Using npm.
Initializing project with template: app-tw
Installing dependencies:
- react
- react-dom
- next
Installing devDependencies:
- typescript
- @types/node
- @types/react
- @types/react-dom
- autoprefixer
- postcss
- tailwindcss
- eslint
- eslint-config-next
added 365 packages, and audited 366 packages in 20s
131 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
Initialized a git repository.
Success! Created cursor-test at /Users/syotaro2122/dev/cursor-test
まずはCopilot Chat的な機能のChatを試す。
こんな感じのことを聞いてみたらいい感じに教えてもらえた
おっび
実際に.prittierrcを追加して Command+Kでインラインチャットを開始して聞くと勝手に生成してくれる。
Command + Enterで適用できる
おっびDocsという機能でNext.jsのドキュメントを読み込ませてその中から探ってくることもできるらしい
おっび実際に学習させて使ってみる。
これはどうやら学習させた公式ドキュメントから引っ張ってきているらしい？
おっび@ でメンションできるのは色々あるらしい
おっび特定のファイルを開いてなくても、Codebase全体で必要なものを勝手に見に行ってくれるみたい。
何もファイルを開いていない状態でプロジェクトの説明を求めたらREADME.mdを読みに行って、一番トップのpage.tsxを読んで簡単に解説をしてくれた
おっびエラーに対しても修正のアドバイスをくれる
おっびなんとなく簡単に触ってみたけどGithub Copilotでも同じような機能はあるのでCursorじゃなくてもいいのかな？
って気はした。
DocsとかもCopilotでできるみたいだけどやり方がわからない。
ここまで触ってみて今Cursorに乗り換える必要はないのかなぁと思った。
もっと使いこなすことができればまた違うのかもしれない
おっび完