WebStorm 2023.3 Help

Use AI prompts to explain and refactor your code

Use pre-written prompts to explain code, find problems, and refactor your code. WebStorm provides project-specific context, such as the languages and technologies used in your project.

You can also define your own custom prompts and add them to the AI Actions menu.

Explain code

  1. Select a code fragment and right-click it to open the context menu.

  2. Select AI Actions and then Explain Code.

    AI Assistant actions - Explain Code

    The AI Assistant tool window will open to provide you with an explanation.

    WebStorm AI Assistant explains code

    Click Attached elements to see the list of files that provided the necessary context for generating the answer.

    Attached files that were analyzed to generate the answer

    Besides JavaScript or TypeScript code, AI Assistant can detect and explain injected language fragments like RegExp, SQL, or cron expressions. The detected fragment type is indicated in the context menu option (Explain JSRegExp fragment for regular expressions and so on).

    Explain RegExp option in the context menu

Suggest refactoring

  1. Select a code fragment and right-click it to open the context menu.

  2. Select AI Actions and then Suggest Refactoring.

    AI Assistant suggests refactoring, context menu

    The AI chat will open to offer you refactoring suggestions.

    WebStorm: AI Assistant suggests refactoring
  3. In the field with the refactored code, click See Diff and Apply to open the diff viewer. To skip the diff viewing step, expand the list next to See Diff and Apply and select Apply Immediately.

    In the diff viewer, use Unified or Two-Side view to review the suggested changes.

    Diff tab with refactored code
  4. If you like the result, click Accept in the gutter to move the selected AI-generated code snippets to the source file, or click Accept all to fully replace the originally selected code fragment. Otherwise, close the diff viewer to skip the suggested refactoring.

Find problems

  1. Select a code fragment and right-click it to open the context menu.

  2. Select AI Actions and then Find Problems.

    AI Assistant finds potential problems, context menu

    The AI chat will open to show the potential issues you may want to look into.

    WebStorm: AI Assistant finds potential problems in the selected code

Add your own prompts to prompts library

You can add your own prompts to the prompts library and use them via the AI Actions menu.

  1. Do one of the following:

    • Right-click anywhere in the editor to open the context menu, then go to AI Actions | Add Your Prompts.

      Add your prompt context menu
    • Press Ctrl+Alt+S to open the IDE settings and then select Tools | AI Assistant | User Prompts Library.

  2. Click to create a new prompt.

    WebStorm: User prompts library settings
  3. In the text field, write the prompt.

    If needed, click the $SELECTION variable to add a Markdown-formatted code block with current code selection and language name to the new prompt.

  4. Edit the new prompt name.

    Select the first checkbox if you want AI Assistant to wait for you to make additional input in the chat after invoking the prompt.

    Keep the second checkbox if you want your new prompt to be listed in the AI Actions menu.

    WebStorm: Custom prompt parameters
  5. Click Apply.

Once you create a prompt, you can edit or delete it at any time.

Last modified: 20 February 2024