WebStorm 2024.2 Help

Use AI in editor

Generate code in the editor using prompts

Generate code and use prompts right in the editor.

Generate code in editor using prompts

  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 anywhere in the editor to open the context menu, select AI Actions and then Generate Code.

  2. In the input field, write your prompt and press Enter.

    Input field in the editor
  3. Wait for the generation to complete. The generated code will be shown in the same editor tab where you have invoked the input field.

    Generated code in the editor tab

    All suggested changes are marked with different colors.

  4. If you want to improve the generated code, in the same input field, write a follow-up message with the new requirements and press Enter.

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

    New requirement to update the generated code

    If you want to regenerate the answer, click Regenerate or press Ctrl+F5.

  5. Click Accept to insert the generated fragment.

    If you want to revert some of the suggested changes, in the gutter, click Revert.

    To discard all the suggested changes, click Discard in the input popup.

Get help with 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 AI-powered code completion

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

Work with cloud completion in the editor

  1. The suggestions are shown in the editor as you type.

    You can also trigger the code completion by pressing Alt+Shift+\.

    AI-generated code suggestion
  2. To apply the suggestion:

    • Press Tab to accept the entire suggestion. You can configure a different shortcut for this action.

    • Press Ctrl+Right to accept a suggestion word by word.

    • Press End to accept a suggestion line by line.

    To reject the suggestion, press Escape. Alternatively, just continue to write your own code or change the caret position either with the arrow keys or by a mouse click.

Configure cloud completion

The cloud completion option is enabled by default. You can configure the way it works in the settings.

  1. Press Ctrl+Alt+S to open settings and select Editor | General | Inline Completion.

  2. Available options to configure:

    • Under the Enable cloud completion suggestions checkbox, select the languages that you want to use cloud completion with.

    • Clear the Enable multi-line suggestions checkbox to leave only single-line suggestions.

    • To disable this option completely, clear the Enable cloud completion suggestions checkbox on the same settings page or in Settings | Tools | AI Assistant.

Change the cloud completion shortcut

You can change the default cloud completion shortcut that you use to accept suggestions.

  1. Hover over the suggestion.

  2. In the popup that appears, click and select the key that you want to use for accepting suggestions, for example, Right.

    To assign your own shortcut, select Custom.

    Code completion popup

You can also change any code completion shortcuts in the Settings | Keymap anytime.

Last modified: 21 October 2024