どうも音又です。
今回はAI補助が強力なコードエディタ、CursorをVisual Studio Code(VSCode)っぽく使う方法を紹介したいと思います。
Cursorとは
最初にCursorについてサクッと紹介します。
Cursorは最近流行りのAIを搭載したコードエディタで、実はというか見るとわかるのですが、VSCodeをベースに開発されたコードエディタになります。
Corsorが強力な点はChatGPTのようなプロンプトを元に文を生成出来るだけでなく、
- プロジェクトのファイルやコードを参照・把握して会話の前提とする
- エディタ内でコードの推測を表示する
- エディタ内で命令を書いてそれに準じたコードを生成させる
と言ったようなChatGPTよりも更に開発向けな機能が満載しています。
また、対話式のチャット内でCLIのコマンドを実行して確認してくれたりもするので、
- AIの提案を元にコードを変更→CLIで操作して動くか確認
のような流れが必要な開発ではかなりありがたい機能です。
また、VSCodeベースのおかげで今までVSCodeを使っていたユーザーであればすぐに使えてしまうお手軽感も人気な理由の1つでしょう。
VSCodeとの違い
VSCodeベースのCursorですが、いくつか違いがあります。
- UIが若干違う
- たまに拡張機能で使えないものがある
- 日本語UIに対応してない部分がある
等です。UIが若干違う点に関しては、例えばデフォルトだとVSCodeにあるサイドバー表示の切り替え部分(エクスプローラーや検索)が縦列ではなくサイドバー上部に横列で並んでいます。
また、ウィンドウ上部にある検索バーが常時表示されません。たまに拡張機能で使えないものがある点に関しては、いくらVSCodeベースといえどベースにしているだけであくまでも違うエディタなので、どうしても完全対応してない拡張機能などが出てきてしまいます。日本語UIに対応してない部分がある点に関しては、上記2つの違いに関連しますが、VSCodeを日本語化する拡張機能Japanese Language Pack for Visual Studio Codeを導入してもUIが違う為に英語表示のままの部分が出てしまいます。
上記のような違いから、普段VSCodeで拡張機能モリモリでカスタマイズしているユーザーにとっては少し歯がゆいシーンも出てくるかと思います。
CorsorをVSCodeっぽく使う
そんなCursorですが、先述した違いを踏まえてもAIによる補助やリファクタリング機能はかなりメリットがあるため、出来るだけVSCodeに近づけた使い方を紹介します。
ウィンドウ上部の検索バーを使用する
VSCodeのように、ウィンドウ上部の検索バー(コマンドパレット)を使用する場合、
ショートカットですぐに表示することができます。
これらのコマンドはVSCodeを頻繁に使用するユーザーは既に知っているかもしれませんが、そのショートカットは以下になります。
| 用途 | コマンド |
|---|---|
| 検索バーの表示 | WIn: Ctrl + P / Mac: Cmd + P |
| コマンドパレット | Win: Ctrl + Shift + P Mac: Cmd + Shift + P |
これらのショートカットを使用することで簡単に検索バーやコマンドパレットを表示することができます。
ここで「いや、常に表示しときたいんだけど」といった意見もあるかと思いますが、残念ながら記事執筆時にはまだ検索バーを常時表示する機能がCursorにはないのが現状です。
ショートカット自体は覚えると効率もあがりますので、いろいろ覚えておくと良いかと思います。
サイドバーの切り替えを縦列にする
先ほどVSCodeとの違いで紹介したサイドバーの切り替え部分、デフォルトでは横列ですがこちらは簡単に縦列にすることができます。
コマンドパレットでtoggle secondary side bar visibilityと検索して出てきた項目の1番上を選択すると設定画面の該当項目が表示されます。
デフォルトだとここのActivity Bar: Orientation項目がhorizontal(横)になっているのでこれをvertival(縦)に変更します。
するとVSCodeのように切り替え部分が縦に表示されるようになります。これだけでもだいぶVSCodeの感覚と近くなるので良いですね。
フォントのカスタマイズ
VSCode等で既にフォントのカスタマイズをしている方はそちらも変更することで、今までのような感覚で使うことが出来るかと思います。
コマンドパレットでPreferences: Open User Settings (JSON)と入力して1番上に出てきた項目を選択するとエディタ設定のsettings.jsonが開くのでそこに以下のような記述をすると変更できます。
"editor.fontSize": 14,// フォントサイズ
"editor.tabSize": 2 // タブを押した時の空ける文字数他にも様々な設定があるので、調べたり既に記述のある設定部分を見てみてください。
おわり
以上になります。今回はCursorをVSCodeっぽく使う方法を紹介していきました。
他にもいろいろな方法があるかと思うのでぜひコメントなどで教えていただけると幸いです。
では今回はこの辺で。
コメント