Zenn
🐶

Voidへの貢献

2024/09/18に公開
VS Code 拡張機能
void
貢献
ガイド
tech

以下はvoidのCONTRIBUTING.mdの日本語訳です

はじめに

ようこそ！👋 これはVoidへの貢献方法についてのガイドです。できるだけ簡単に貢献できるようにしたいと考えていますので、質問やコメントがある場合は、メールやDiscordでお問い合わせください！

貢献する主な方法は2つあります：

  • 新機能の提案（Discord）
  • 新機能の開発（ロードマップ）

最も重要な開発すべき機能のリストはGitHub Issuesを参照するか、自由に新しい課題を作成してください。

Voidの機能のほとんどはVSCode拡張機能を使用して実装しています。スクロールダウンして、1. 拡張機能の構築/貢献方法、または2. 完全なIDEの構築/貢献方法（より低レベルな変更のため）をご覧ください。

私たちがまとめた有用なリンクについては、VOID_USEFUL_LINKS.mdをご覧ください。

拡張機能の構築

以下は、現在多くのコードが存在するVoid拡張機能に貢献を始める方法です：

  1. リポジトリをクローンします：
git clone https://github.com/voideditor/void
  1. VS Codeで拡張機能フォルダを開きます（新しいワークスペースで開き、単にcdで移動しないでください）：
/extensions/void
  1. 依存関係をインストールします：
npm install
  1. プロジェクトをビルドします。VS CodeでReactを実行できるようにするためにこのビルドコマンドを作成しました - sidebar/index.tsxをdist/内のCSS/JSバンドルに変換します。
npm run build
  1. F5キーを押してプロジェクトを実行します。

これにより、拡張機能が有効になった新しいVS Codeインスタンスが開始されます。うまくいかない場合は、Ctrl+Shift+Pを押し、"Debug: Start Debugging"を選択し、"VS Code Extension Development"を選択してください。

AI機能を使用したい場合は、APIキーを提供する必要があります。設定（Ctrl+,）に移動し、void > "Anthropic Api Key"を変更することでできます。"Which API"環境変数はプロバイダーを制御し、デフォルトは"anthropic"です。

セットアップが完了したら、Issuesページをチェックしてみてください！

完全なIDEの構築

拡張機能以外に、より多くの機能にアクセスする必要がある場合、まれにIDEを編集することがあります。完全なIDEで作業したい場合は、以下の手順に従うか、VS Codeの完全な貢献方法ページを参照してください。

  1. すべての依存関係をインストールします。yarnがインストールされていることを確認してください（npm install -g yarn）
yarn

  1. VS Codeで、Ctrl+Shift+Bを押してビルドプロセスを開始します - これには時間がかかる場合があります。VS Codeを使用していない場合は、代わりにyarn watchを実行してください。

  2. ターミナルで./scripts/code.shを実行します。

しばらくロードした後、ビルドされたIDEが開くはずです。ビルドを再起動せずに新しい変更を確認するには、Ctrl+Shift+Pを使用して"Reload Window"を実行してください。

IDEをバンドルするには、yarn gulp vscode-win32-x64を実行します。以下が完全なオプションです：vscode-{win32-ia32 | win32-x64 | darwin-x64 | darwin-arm64 | linux-ia32 | linux-x64 | linux-arm}(-min)

Windowsを使用している場合は、開発コンテナ内でプロジェクトを実行することをお勧めします。VS Codeが自動的にこれを促すはずです。

セットアップが完了したら、Issuesページをチェックしてみてください！

ロードマップ

以下は、ロードマップ上の最も重要なトピックです。⭐の数が多いほど重要度が高くなります。

⭐⭐⭐ 差分の改善

我々は「差分」を変更を示す単一の緑/赤のペアとして定義しています。以下は改善すべき点です：

  1. 削除（-）の差分を表示する。現在は挿入（+）の差分のみを表示しています。現在の差分は、新しいコードをすべて単純なテキスト装飾で緑色でハイライトすることで機能しています。代わりに、VS CodeのネイティブなdiffEditorのコードを使用して差分を表示したいと考えています（「インライン」モード）。あるいは、現在のものを保持し、削除された赤いゾーンを追加して削除差分（-）を示すこともできます。

  2. ユーザーが差分で「Accept」または「Reject」を押したときのバグを修正する。一つの問題は、差分が受け入れられた/拒否されたとき、それ以下のすべての差分が更新されるべきということです（異なる行番号になるため）。他にもさまざまな問題があります。

  3. 差分のハイライトを動的にする。現在、ユーザーがテキストを編集すると、すべての差分とそのハイライトがクリアされます。代わりに、差分のハイライトを更新する必要があります。各差分は行の範囲に存在し、その範囲内またはそれと交差するすべての変更がハイライトを更新する必要があります。

⭐⭐⭐ Cursorスタイルのクイック編集（ctrl+k）の構築

ユーザーがctrl+kを押したとき、選択していたコードとインラインで入力ボックスが表示されるべきです。これは拡張機能だけではできないため、やや困難で、IDEに新しいコンポーネントを作成する必要があります。VS Codeの組み込みの「codelens」または「zone widget」コンポーネントを変更できると考えていますが、代替案も歓迎します。

⭐⭐⭐ 履歴を適切に機能させる

ユーザーが応答を送信したり、適用/受け入れ/拒否ボタンを押したりしたとき、これらのイベントを履歴に追加し、ユーザーがそれらを元に戻したり、やり直したりできるようにする必要があります。現在、ユーザーが変更を元に戻したり、やり直したりしようとすると、予期せぬ動作が発生します。

⭐⭐⭐ Ctrl+Lバックエンドの改善

現在、モデルは全体のファイルを出力します。代わりに、プロンプトを変更して、モデルが// ... rest of fileのような部分的な変更を出力するようにする必要があります。ユーザーが「Apply」ボタンをクリックしたとき、モデルはファイルを書き直し、正しい位置に部分的な変更を適用する必要があります。

⭐⭐ Ollamaとの統合

拡張機能にOllama統合のコードがありますが、動作しません。これは、OllamaがNode.jsの依存関係（'path'や'os'など）を持っており、拡張機能で実行できないためです（拡張機能はブラウザで実行できる必要があります）。これを修正するには、VoidのIDEにネイティブに実行できるように拡張機能を移行し、Node.jsにアクセスできるようにする必要があります。

⭐⭐⭐ 創造的な機能

標準的なCursor機能以外のAI機能を自由に構築してください。例えば、より良いコード検索を作成したり、ファイル間で編集し、複数のLLM呼び出しを行うAIエージェントをサポートしたりすることができます。

最終的には、AI機能を作成するための便利なAPIを構築したいと考えています。このAPIは、UI作成（オートコンプリートの提案の表示や新しい差分の作成）、イベント変更の検出（onKeystrokeやonFileOpenなど）、ユーザーのファイルシステムの変更（各ファイルに関連付けられたインデックスの保存）のためのメソッドを提供し、独自のAIプラグインを作成しやすくします。これらの機能は時間軸の後半で構築する予定ですが、完全性のために列挙しました。

⭐ 一つ星の項目

⭐ ユーザーがctrl+Lを押したとき、サイドバーの状態をクリアする必要があります。

⭐ サイドバーを通じて、ファイル全体のすべての差分を一度に受け入れ/拒否できるようにする。

⭐ ユーザーが一度に複数のコードやファイルを選択できるようにする。

⭐ ユーザーが現在の選択をキャンセルできるようにする。

プルリクエストの提出

変更を加えて提出する準備ができたら、プルリクエストを提出してください。

リポジトリ

https://github.com/voideditor/void

Discussion