しとちゃぶろぐ

しとちゃぶろぐ

しとちゃのぶろぐなん~!

😊Reclineという庶民の味方!!GitHub CopilotでClineが使えるww

Reclineの構築手順

本記事では、Reclineの構築手順について解説します。Reclineは、CLIおよびエディタ内で動作し、コードの作成、編集、実行を支援します。このプロジェクトはClineをフォークしたものであり、Claude 3.5 Sonnetによって真価が発揮されます。。

これ何がすごいって、VSCodeのLanguageModelAPIとCopilotを使用するため、実質月額10ドル払えば無限にClaudeがClineで使えちゃうんですよね!!!!!!!!!!(ついでにcopilotも使えちゃう)

ということで、下記構築手順まとめます。

本記事を作成するにあたり、以下の情報を参考にしました。

動作環境

・Windows11

・CPU:Ryzen 7 9750X3D

・RAM:64GB

・GPU:RTX4060TI 16GB

手順

  1. 前提ソフトウェアのインストール
  2. Reclineリポジトリのクローン
    • ターミナルまたはコマンドプロンプトを開き、以下のコマンドを実行してReclineリポジトリをクローンします。

      git clone https://github.com/julesmons/recline.git
      cd ./recline

      Image in a image block

  3. 依存関係のインストール
    • Reclineはpnpmを使用して依存関係を管理します。まだインストールしていない場合は、以下のコマンドでインストールしてください。

      npm install -g pnpm

    • 次に、リポジトリのルートディレクトリで以下のコマンドを実行して依存関係をインストールします。

      pnpm install

      Image in a image block

      重要: ReclineはClineのnpm run install:allを使用せず、pnpmが必要です。

  4. VSIXパッケージの作成
    • VSIXパッケージを作成するために、@vscode/vsceがグローバルにインストールされている必要があります。まだインストールしていない場合は、以下のコマンドでインストールしてください。

      npm install -g @vscode/vsce

    • 次に、リポジトリのルートディレクトリで以下のコマンドを実行してVSIXパッケージを作成します。

      pnpm run package

      Image in a image block

      Image in a image block

      ルートフォルダにvisixが生成されてればOK!!

  5. VSCodeへの拡張機能のインストール
    • VSCodeを開き、作成されたVSIXファイルをインストールします。ターミナルから直接インストールする場合は、以下のコマンドを実行します。

      code --install-extension ./recline-0.2.11.vsix

      注: バージョン番号は./package.jsonの実際のバージョンによって異なります。

  6. GitHub Copilot拡張機能のインストール
    • 重要: Reclineは、VSCodeのLanguage Model APIを介してAI機能を提供するために、GitHub Copilot拡張機能に依存しています。そのため、Reclineを利用するためにはGitHub Copilot拡張機能のインストールが必須となります。
    Image in a image block
    • VSCodeのアクティビティバーにある拡張機能アイコンをクリックするか、Ctrl+Shift+X(またはCmd+Shift+X)を押して拡張機能ビューを開きます。
    • 検索バーに「GitHub Copilot」と入力し、表示されたGitHub Copilot拡張機能をインストールします。
    • インストール後、VSCodeの再起動が必要となる場合があります。
    • Github Copilotをインストール後Githubにログインする必要があります。
    • 画面右上のCopilotアイコンからチャットを開きます。
      Image in a image block
    • 開いた画面のチャット欄でClaude 3.5 SonnetをEnableにしないとReclineでもClaudeが使用できないため注意。
    Image in a image block
  7. Reclineの利用開始
  • 画面左の拡張機能のアイコンからこちらをクリック。
Image in a image block
  • すると見慣れた画面が立ち上がります。
    Image in a image block
  • 左上の歯車マークから設定を開き、API ProviderをVScode Language Model APIとして、モデルをClaude3.5sonnet、お好みのカスタムインストラクション(システムプロンプト)を設定する。
    Image in a image block
  • あとは楽しむだけ!!!
Image in a image block

※今回は今度執筆予定のCode-serverについての環境構築をClineにお願いしてみました!

まとめ

VSCodeにReclineを構築し、利用を開始することができます。Reclineは、VSCode Language Model APIを利用し、GitHub Copilotが提供するClaude 3.5 Sonnetの強力なAIを活用して、単にコードの生成や編集を効率化するだけでなく、環境構築の際のコマンド生成支援、ドキュメントや記事の修正、さらには執筆のサポートなど、幅広い用途で活用できます。日々の開発業務から、ドキュメント作成、情報整理まで、Reclineはあなたの作業をよりスマートに進める強力なアシスタントとなるでしょう。ぜひ様々な場面でReclineの可能性を体験してみてください。

追記(問題点と対応策)

①送信プロンプトから日本語がすべて削除されて送信されてしまう問題があります。

対応策としてパッケージ化前のReclineの

@/src/extension/utils/sanitize.ts

下記該当箇所を以下の様に書き換える事で、対応可能。

Image in a image block

再度パッケージ化してリプライで日本語になってればオッケー!

Image in a image block

②Reclineがフォルダ構造を取得しようとしても失敗する。

 Clineがファイル取得にfd.exeを使用しているため、これを環境変数パスを通す必要がある。

下記URLからfdをダウンロード。しとちゃ環境の場合これ~

https://github.com/sharkdp/fd/releases/tag/v10.2.0

Image in a image block

パス通すのめんどちかったので、しとちゃはC:\Windows\System32に配置しました。

純粋パス通すなら

Win+Iキーからシステム

Image in a image block
Image in a image block

システムの詳細設定をクリック。

Image in a image block

環境変数をクリック

Image in a image block

このPathにfd.exeのパスを書き加えるでOK!

Cline上で@からAdd fileでファイルが表示されれば完了!

Image in a image block

ちなみに本問題点はうみゆきさんのツイートを参照しました。(すごく助かりましたありがとうです!!!)