GeminiCLI.net

Gemini CLIでVS Codeのワークフローをスーパーチャージする方法

blog.postMeta

Visual Studio Codeは、その柔軟性と強力な統合ターミナルで高く評価され、何百万人もの開発者にとって定番のエディターです。いつでも別のターミナルウィンドウでGemini CLIを使用することはできますが、真の生産性向上は、コーディングワークフローに直接統合することによってもたらされます。

このガイドでは、VS Code内でGemini CLIを使用して、シームレスでAIを活用した開発体験を構築する方法を紹介します。

基礎：統合ターミナルの使用

Gemini CLIを使用する最も簡単な方法は、VS Codeの統合ターミナル内です。Ctrl+`（Control + バッククォート）を押すことで開くことができます。

ここから、エディターを離れることなく、CLIのすべてのファイルベースの機能を使用できます。

ユースケース1：複雑なファイルを説明する

レガシーなコードベースを継承したり、新しいライブラリを調査したりしていますか？開いているファイルの概要説明を取得します。

  1. 理解したいファイルを開きます（例：src/utils/complex-logic.js）。
  2. 統合ターミナルで、以下を実行します：
gemini -f src/utils/complex-logic.js "このファイルの目的とその主な機能の概要を説明してください。"

ユースケース2：現在のファイルをリファクタリングする

動作はするものの、整理されていないコードがありますか？Geminiに改善案を提案させましょう。

gemini -f src/components/old-component.jsx "このReactコンポーネントを、フックを含む現代のベストプラクティスを使用するようにリファクタリングしてください。生の更新されたコードのみを出力してください。"

その後、出力をコピーして古いコードを置き換えるか、VS Codeの差分ビューを使用して変更を比較できます。

究極の統合：VS Codeタスク

コマンドを手動で実行するのも便利ですが、真のパワーはカスタムのVS Code「タスク」を作成することにあります。これにより、単一のコマンドまたはキーボードショートカットで、現在アクティブなファイルに対して複雑なGemini CLIコマンドを実行できます。

ステップ1：tasks.jsonファイルを作成する

  1. Ctrl+Shift+Pを押してコマンドパレットを開きます。
  2. "Tasks: Configure Task"と入力してEnterキーを押します。
  3. "Create tasks.json file from template"を選択します。
  4. "Others"を選択します。

これにより、プロジェクトのルートディレクトリに.vscode/tasks.jsonファイルが作成されます。

ステップ2：Geminiタスクを定義する

新しいtasks.jsonファイルの内容を以下の設定に置き換えます。これにより、gemini:explain、gemini:refactor、gemini:docsという3つの便利なタスクが定義されます。

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "gemini:explain",
      "type": "shell",
      "command": "gemini -f ${file} \"Explain this code to me. Focus on the core logic and any potential edge cases.\"",
      "problemMatcher": [],
      "presentation": {
        "reveal": "always",
        "panel": "new"
      },
      "group": "gemini"
    },
    {
      "label": "gemini:refactor",
      "type": "shell",
      "command": "gemini -f ${file} \"Refactor this code to improve readability, efficiency, and adherence to best practices. Only output the raw code.\"",
      "problemMatcher": [],
      "presentation": {
        "reveal": "always",
        "panel": "new"
      },
      "group": "gemini"
    },
    {
      "label": "gemini:docs",
      "type": "shell",
      "command": "gemini -f ${file} \"Generate professional documentation for this file in Markdown format. Include a description of the file's purpose, its functions/classes, their parameters, and what they return.\"",
      "problemMatcher": [],
      "presentation": {
        "reveal": "always",
        "panel": "new"
      },
      "group": "gemini"
    }
  ]
}

キーマジック： ${file}変数は、エディターで現在開いているファイルのパスに自動的に置き換えられる特別なVS Code変数です。

ステップ3：タスクを実行する

さて、任意のコードファイルを開いた状態で：

  1. Ctrl+Shift+Pを押してコマンドパレットを開きます。
  2. "Tasks: Run Task"と入力してEnterキーを押します。
  3. gemini:explain、gemini:refactor、gemini:docsの3つのGeminiタスクが表示されます。
  4. 1つ選択します。新しいターミナルパネルが開き、アクティブなファイルでコマンドが実行されます！

ビジュアルガイド：実際の動作を見る

VS Codeでターミナルを最大限に活用する方法のビジュアルウォークスルーについては、この優れたチュートリアルをご覧ください：

Video Tutorial: Master VS Code Terminal: PowerShell, Git Bash, and Command Line Tips for Developers

さらに高速にアクセスするために、これらの各タスクにキーボードショートカットを割り当てることができます。

Gemini CLIをエディターに直接取り込むことで、個人のワークフローに適応する、強力でカスタマイズされた、深く統合されたAIアシスタントを作成できます。VS Codeタスクの作成は素晴らしい第一歩です。次のレベルは、さらに複雑なジョブのためにスタンドアロンのシェルスクリプトを構築することです。究極の自動化ガイド：スクリプトでGemini CLIを使用するでその方法を学びましょう。この同じ原則は、例えば、ターミナルから直接Google Workspaceのタスクを自動化するなど、さらに拡張できます。

SocialShare.shareArticle