WebStorm 2024.1 ヘルプ

AI プロンプトを使用してコードの説明とリファクタリングを行う

事前に作成されたプロンプトを使用して、コードの説明リファクタリング、コード内の問題の検出を行います。WebStorm は、プロジェクトで使用される言語やテクノロジーなど、プロジェクト固有のコンテキストを提供する

独自のカスタムプロンプトを定義してAI アクションメニューに追加することもできます。

コードの説明

  1. コードフラグメントを選択し、右クリックしてコンテキストメニューを開きます。

  2. AI アクションを選択し、次にコードの説明をするを選択します。

    AI Assistant actions - Explain Code

    AI Assistant ツールウィンドウが開き、説明が表示されます。

    WebStorm AI Assistant explains code

    付属要素をクリックすると、回答を生成するために必要なコンテキストを提供するファイルのリストが表示されます。

    Attached files that were analyzed to generate the answer

    AI Assistant は、JavaScript や TypeScript コードに加えて、RegExp、SQL、cron 式などの挿入された言語フラグメントを検出して説明できます。検出されたフラグメントのタイプは、コンテキストメニューオプション (正規表現の場合は JSRegExp フラグメントの説明など) に示されます。

    Explain RegExp option in the context menu

リファクタリングの提案

  1. コードフラグメントを選択し、右クリックしてコンテキストメニューを開きます。

  2. AI アクションを選択し、次にリファクタリングの提案を選択します。

    AI Assistant suggests refactoring, context menu

    AI チャットが開き、リファクタリングの提案が提供されます。

    WebStorm: AI Assistant suggests refactoring
  3. リファクタリングされたコードが含まれるフィールドで、「差分と適用」を参照してくださいをクリックして差分ビューアーを開きます。差分表示の手順をスキップするには、「差分と適用」を参照してくださいの横にあるリストを展開し、すぐに申し込むを選択します。

    差分ビューアーで、統合ビューまたは両面ビューを使用して、提案された変更を確認します。

    Diff tab with refactored code
  4. 結果が気に入った場合は、ガターの 受諾をクリックして、選択した AI 生成のコードスニペットをソースファイルに移動するか、すべて受諾をクリックして、最初に選択したコードフラグメントを完全に置き換えます。それ以外の場合は、差分ビューアーを閉じて、提案されたリファクタリングをスキップします。

問題の検索

  1. コードフラグメントを選択し、右クリックしてコンテキストメニューを開きます。

  2. AI アクションを選択し、次に問題の検索を選択します。

    AI Assistant finds potential problems, context menu

    AI チャットが開き、調査が必要な潜在的な問題が表示されます。

    WebStorm: AI Assistant finds potential problems in the selected code

実行時エラーの説明

WebStorm を使用すると、テスト、スクリプト、コマンドの実行中に発生したエラーの AI 説明を取得できます。

  1. 明確にするエラーを選択し、コンテキストメニューからエラーメッセージを AI で解説を選択します。

    Explain error message with AI

    AI Assistant ツールウィンドウが開き、エラーの説明と修正方法が提案されます。

  2. 提案された修正を使用する場合は、リファクタリングされたコードが含まれるフィールドで Insert Snippet at Caret をクリックして、AI によって生成されたコードをエディターに入力します。

    Insert the corrected code in the editor

独自のプロンプトをプロンプトライブラリに追加する

独自のプロンプトをプロンプトライブラリに追加し、 AI アクションメニューから使用できます。

  1. 以下のいずれか 1 つを実行します:

    • エディター内の任意の場所を右クリックしてコンテキストメニューを開き、AI アクション | プロンプトを追加するに移動します。

      Add your prompt context menu
    • Ctrl+Alt+S を押して設定を開き、ツール | AI Assistant | プロンプトライブラリを選択します。

  2. 」をクリックして新しいプロンプトを作成します。

    WebStorm: User prompts library settings
  3. テキストフィールドにプロンプトを入力します。

    必要に応じて、$SELECTION 変数をクリックして、現在のコード選択と言語名を含む Markdown 形式のコードブロックを新しいプロンプトに追加します。

  4. 新しいプロンプト名を編集します。

    プロンプトを呼び出した後、AI Assistant がチャットで追加入力を行うまで待機する場合は、最初のチェックボックスを選択します。

    新しいプロンプトを AI アクションメニューにリストする場合は、2 番目のチェックボックスをオンのままにします。

    WebStorm: Custom prompt parameters
  5. 適用をクリックします。

プロンプトを作成したら、いつでも編集または削除できます。

リストからプロンプトを選択し、それを上または下に移動して、プロンプトの表示順序を変更することもできます。

関連ページ:

言語インジェクション

言語インジェクションを使用すると、ファイルのメイン言語とは異なるプログラミング言語のコードを操作できます。WebStorm は、HTML、CSS、XML、JSON、RegExp、文字列とテンプレートリテラル内、XML に似た言語のタグと属性内の他のコードフラグメントを編集するための包括的な言語支援を提供します。始める前に:プラグインのインストールの説明に従って、設定 | プラグインページのインストール済みタブで IntelliLang バンドルプラグインが有効になっていることを確認します。一時的に...

AI とチャットする

AI Assistant ツールウィンドウを使用して、LLM (大規模言語モデル) と会話したり、プロジェクトについて質問したり、タスクを反復したりできます。AI Assistant は、プロジェクトで使用されている言語とテクノロジー、ローカルの変更、バージョン管理システムのコミットを考慮します。ファイル、クラス、要素の使用状況を検索できます。新しいチャットを始める右側のツールバーで AI Assistant をクリックして AI Assistant を開きます。入力フィールドに質問を入力し、を押し...

エディターで AI を使用する

エディターでコードを生成する:コードを生成し、エディターでプロンプトを直接使用します。変更したいコードの一部を選択するか、エディター内の任意の場所にキャレットを置いて、を押します。または、右クリックしてコンテキストメニューを開き、AI アクションを選択してからコードの生成を選択します。入力フィールドにプロンプトを入力し、を押します。生成されたコードは別の AI の差分タブで開きます。生成が完了するまで待ちます。右上隅で、提案された変更を確認する方法を選択します。統合ビューでは、結果が 1 つ...