WebStorm 2024.3 ヘルプ

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

プロンプトを使用してエディターでコードを生成する

コードを生成し、エディターでプロンプトを直接使用します。

プロンプトを使用してエディターでコードを生成する

  1. 変更したいコードの一部を選択するか、エディター内の任意の場所にキャレットを置いて、Ctrl+\ を押します。

    または、エディター内の任意の場所を右クリックしてコンテキストメニューを開き、AI アクションを選択してからコードの生成を選択します。

  2. 入力フィールドにプロンプトを入力し、Enter を押します。

    Input field in the editor
  3. 生成が完了するまで待ちます。生成されたコードは、入力フィールドを呼び出したのと同じエディタータブに表示されます。

    Generated code in the editor tab

    提案された変更はすべて異なる色でマークされます。

  4. 生成されたコードを改善する場合は、同じ入力フィールドに新しい要件を含むフォローアップメッセージを入力し、Enter を押します。

    AI Assistant は新しい仕様を考慮してコードを再生成します。

    New requirement to update the generated code

    回答を再生成する場合は、 再生するをクリックするか、Ctrl+F5 を押します。

  5. 生成されたフラグメントを挿入するには、受諾をクリックします。

    提案された変更の一部を元に戻したい場合は、ガターで 前回保存した状態に戻すをクリックします。

    提案された変更をすべて破棄するには、入力ポップアップで破棄をクリックします。

名前の提案に関するヘルプを取得する

シンボルの名前を変更 (Shift+F6) すると、AI Assistant はその内容に基づいて名前のオプションを提案します。

WebStorm: AI Assistant suggests new names

この機能はデフォルトで有効になっています。オンとオフを切り替えるには、AI Assistant の設定を確認してください。

  1. Ctrl+Alt+S を押して設定を開き、ツール | AI Assistant を選択します。

  2. AI が生成した名前の提案を提供するチェックボックスを使用します。

    AI Assistant settings: suggest name

AI 搭載コード補完を呼び出す

AI Assistant を搭載したクラウド補完機能は、プロジェクトのコンテキストに基づいて、単一の行、コードブロック、さらには関数全体をリアルタイムで自動補完できます。生成されたコードは、ユーザーのスタイルや命名規則に合わせて、ユーザーがコードを記述する方法に似ています。

エディターでクラウド補完を使用する

  1. 入力すると、エディターに候補が表示されます。

    Alt+Shift+\ を押してコード補完をトリガーすることもできます。

    AI-generated code suggestion
  2. 提案を適用するには:

    • 提案全体を受け入れるには、Tab を押します。このアクションに別のショートカットを設定できます。

    • 提案を単語ごとに受け入れるには、Ctrl+Right を押します。

    • 提案を 1 行ずつ受け入れるには、End を押します。

    提案を拒否するには、Escape を押します。または、独自のコードを書き続けるか、矢印キーまたはマウスクリックでキャレットの位置を変更します。

クラウド補完を構成する

クラウド補完オプションはデフォルトで有効になっています。設定で動作方法を構成できます。

  1. Ctrl+Alt+S を押して設定を開き、エディター | 一般 | インライン補完を選択します。

  2. 設定可能なオプション:

    • クラウド補完候補を有効にするチェックボックスで、クラウド補完を使用する言語を選択します。

    • 単一行の提案のみを残すには、複数行の候補を有効にするチェックボックスをオフにします。

    • このオプションを完全に無効にするには、同じ設定ページまたは設定 | ツール | AI Assistantクラウド補完候補を有効にするチェックボックスをオフにします。

クラウド補完ショートカットを変更する

提案を受け入れるために使用するデフォルトのクラウド補完ショートカットを変更できます。

  1. 提案の上にマウスを移動します。

  2. 表示されるポップアップで、 をクリックし、提案を受け入れるために使用するキー(例: Right)を選択します。

    独自のショートカットを割り当てるには、カスタムを選択します。

    Code completion popup

設定 | キーマップ内のコード補完ショートカットはいつでも変更できます。

AI でエラーを修正

WebStorm は、プリコンパイルエラーを生成するコードを検出すると、エディター内で直接クイックフィックスを提案します。

AI Assistant は、コンテキスト認識機能により、特定のケースに適用可能なより正確な修正を提案できます。

  1. 変更するコード要素にキャレットを置きます。次に、赤いバルブアイコン the Quick-fix icon をクリックするか、Alt+Enter を押して候補リストを開きます。

  2. AI で修正をクリックします。

    Fix with AI

    AI Assistant は、ファイル全体を関連ファイルとともにコンテキストとして LLM に送信し、この特定のケースに最も適した修正方法を決定します。

    その後、コードはエディター内で直接更新されます。

関連ページ:

ファイル、フォルダー、テキストソースを比較する

WebStorm を使用すると、任意のファイル、フォルダー、テキストソース間の違い、ローカルファイルとそれらのリポジトリバージョン間の違いを確認できます。ファイルを比較:2 つまたは 3 つのファイルを比較するプロジェクトツールウィンドウで、比較するファイルを選択してを選択するか、を押します。または、1 つのファイルを選択し、コンテキストメニューから比較を選択して、プロジェクトの外部にあるファイルを選択します。アクティブなエディターをクリップボードと比較するエディターの任意の場所を右クリック...

コードリファクタリング

リファクタリングとは、アプリケーションの動作を変更せずにソースコードを更新することを意味します。リファクタリングは、コードを安定した dry に保ち、保守を容易にできます。WebStorm は、影響を受けるコード参照を自動的に追跡して修正する、さまざまなコードリファクタリングを提供します。ゴールとワークフローの違いにもかかわらず、すべての WebStorm リファクタリングにはいくつかの必須ステップが必要です。以下は、コードのリファクタリング時に実行する主な手順の概要です。リファクタリングの呼び出し...

インテンションアクション

エディターで作業するときに、WebStorm はコードを分析し、コードを最適化する方法を検索し、潜在的な問題と実際の問題を検出します。IDE がコードを改善する方法を見つけるとすぐに、エディターの現在の行の横に黄色のバルブアイコンが表示されます。このアイコンをクリックすると、現在のコンテキストで使用可能なインテンションアクションを表示できます。インテンションアクションは、警告から最適化の提案まで、さまざまな状況をカバーします。黄色いバルブのアイコンは、WebStorm が問題を検出したことを示し...

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

事前に作成されたプロンプトを使用して、コードの説明、リファクタリング、コード内の問題の検出を行います。WebStorm は、プロジェクトで使用される言語やテクノロジーなど、プロジェクト固有のコンテキストを提供します。独自のカスタムプロンプトを定義して、AI アクションメニューに追加することもできます。コードの説明:コードフラグメントを選択し、右クリックしてコンテキストメニューを開きます。AI アクションを選択し、次にコードの説明を選択します。AI Assistant ツールウィンドウが開き、説明...

VCS 統合のための AI 支援を受ける

コミットメッセージの生成:AI Assistant は、差分を LLM (大規模言語モデル) に送信し、変更を説明するコミットメッセージを生成します。を押して、コミットツールウィンドウを開きます。コミットメッセージを AI Assistant で生成をクリックします。必要に応じてメッセージを編集します。コミットメッセージ生成プロンプトをカスタマイズするを押して設定を開き、を選択します。組み込みアクションセクションで、コミットメッセージの生成を選択します。