WebStorm 2024.1 Help

Use AI in editor

Generate code in editor

Generate code and use prompts right in the editor.

  1. Select a piece of code that you want to modify or place the caret anywhere in the editor and press Ctrl+\.

    Alternatively, right-click to open the context menu, select AI Actions and then Generate code.

    AI Actions: Generate Code
  2. In the input field, write your prompt and press Enter.

    Input field in the editor
  3. The generated code opens in a separate AI Diff tab. Wait for the generation to complete. In the upper-right corner, select the way you want to review the suggested changes:

    • The Unified view shows the results in one editor.

    • The Two-Side view shows the results in two editors. The left side displays the original code. The right side displays the code with the suggested changes.

    Generated code in diff tab

    All changes are marked with different colors. Read more on how WebStorm displays the changes in Compare files, folders, and text sources.

  4. If you want to improve the generated code, click Specify, add new requirements, and press Enter.

    New requirement to update the generated code

    AI Assistant will regenerate the code while taking into account the new specifications.

    If you want to regenerate the answer, click Regenerate.

  5. Click Accept all to insert the generated fragment to the rest of the code.

    To accept only part of the suggested changes, click the Accept button Accept in the Two-Side view or the Checkmark icon Accept in the Unified view on the line with the desired changes.

    Otherwise, close the AI Diff tab to discard all changes.

Enable name suggestions

When you rename (Shift+F6) a symbol, AI Assistant suggests name options for it based on its contents.

WebStorm: AI Assistant suggests new names

This feature is enabled by default. To switch it on and off, check the AI Assistant settings.

  1. Press Ctrl+Alt+S to open settings and then select Tools | AI Assistant.

  2. Use the Provide AI-generated name suggestions checkbox.

    AI Assistant settings: suggest name

Invoke inline code completion

AI Assistant can autocomplete single lines, entire functions, and even blocks of code in real time based on the project's context. The generated code is similar to how you would write code, matching your style and naming conventions.

  1. While working on your code, press Enter to start a new line and wait for a few seconds to get a suggestion.

    The suggested code will be shown in gray font.

    AI-generated code suggestion
  2. To apply the suggested code, press Tab.

    To reject the suggestion, press Escape. Alternatively, just continue to write your own code.

To disable the inline code completion, go to Settings | Tools | AI Assistant and clear the Enable automatic inline code completion as you type checkbox.

Last modified: 21 June 2024