Intention actions

Last modified: 15 April 2025

Open settings by pressing and navigate to Editor | Intentions.

Display available actions:

As you work in the editor, WebStorm analyzes your code and searches for ways to optimize it. Intention actions cover a wide range of situations from errors and warnings to optimization suggestions.

As soon as the IDE finds a way to improve your code, it displays a yellow bulb icon yellow bulb icon in the editor next to the current line. By clicking this icon, you can view the intention actions available in the current context.

A yellow bulb icon yellow bulb icon also indicates that WebStorm has detected a problem and prompts you with a quick-fix for it. For severe problems, WebStorm displays a red bulb with an exclamation mark red bulb icon instead of a light yellow one yellow bulb icon. WebStorm suggests the first available quick-fix in an inspection tooltip, which appears every time you hover over a warning or an error.

For more information, refer to Configuring Inspection Severities and Code inspections.

You can open a full list of intention actions in the Settings, view their descriptions, and disable or enable them as described in View all intention actions below.

Apply intention actions

  1. Place the caret at the code element that you want to modify. Then click the light bulb icon (or press ) to open the list of suggestions.

    Intention preview opens automatically. If an intention is complex, and the preview cannot be generated, you will see the intention description. Hover over available intentions on the suggestion list to preview them.

  2. Press or click an intention on the list to apply it.

    For example, you can use an intention action to flip an if...else statement:

You can toggle the preview off and on by pressing or by enabling Show preview for intention actions when available in Settings () | Editor | General | Appearance.

Apply quick-fixes

  1. Hover over an error or a warning in the code. WebStorm displays an inspection tooltip and shows the first available fix right next to the description of the problem.

    Apply a quick-fix from a tooltip

  2. To apply the suggested fix, press .

  3. To see the usual popup with all the available quick fixes and intention actions, press .

    Auto import with quick-fix, multiple choices: suggestion list

Assign shortcuts to context actions

If you want to apply intention actions quicker, you can assign shortcuts to them. Currently, you cannot assign shortcuts to fixes that belong to code inspections.

  1. In the editor, place the caret at the code that triggers the intention action for which you want to assign a shortcut, and click the bulb icon or press .

    A list of available suggestions opens.

  2. In the list, click next to the necessary intention action and, from the menu that opens, select Assign shortcut.

  3. When the Keyboard Shortcut dialog opens, press the shortcut that you want to use for this action and click OK.

After that you won't need to open the list of suggestions to apply this intention action in the editor; you will be able to do it right away by pressing the configured shortcut.

You can find all your custom intention action shortcuts in settings: press , click Keymap, and locate the Intentions category.

View all intention actions

You can view the full list of available intention actions, and disable actions that you don't need at the moment. To open the list of intention actions:

  1. Press to open settings and then select Editor | Intentions.

  2. For each intention action, you can see a description and an example. To disable an intention, clear the checkbox next to it.

    View all intentions on the Intentions page (Settings)

  3. Apply the changes and close the dialog.

Disable intention actions on the fly

  1. Place the caret at the code element that you want to modify. Then click the light bulb icon (or press ) to open the list of suggestions.

  2. Select the action you want to disable, click the right arrow next to it, and then click Disable <intention action name>.

    Disable an intention action on the fly from the context menu

Disable the intention action bulb icon

Do the following to hide the intention action icon Intention action icon and the quick-fix icon the quick-fix icon in the editor:

  1. Press to open settings and then select Editor | General | Appearance.

  2. Clear the Show intention bulb checkbox.

  3. Apply the changes and close the dialog.

Intentions vs. inspections

Code inspections also provide quick-fixes, but they have a different purpose.

Intention actions help improve your code or make it more efficient. These are not necessarily errors or warnings but rather improvements, optimizations, or helpful transformations.

Inspections detect problems and suggest fixes based on coding standards, performance concerns, or best practices. For more information, refer to Code inspections.

See also

Concepts