WebStorm 2021.2 Help

Problems tool window

  • Inspection widget in the top-right corner of the editor

  • View | Tool Windows | Problems

The tool window shows problems detected through continuous analysis of your code. For each error, WebStorm shows a brief description and the number of the line where the error occurred.

To navigate to the code in question, double-click the corresponding error message or select it and choose Jump to Source from the context menu.

For each problem, you can see the suggested quick-fix by pressing Alt+Enter or by clicking Show Quick Fixes. You can also jump to the corresponding line in the editor by pressing F4 or by double-clicking the problem in the tool window.

Alternatively, click Open Editor Preview to be able to view and fix problems in the tool window.

Detected problems shown in the Problems tool window

Learn more from Run inspections.

The tool window also shows problems detected by linters and suggests quick-fixes for them, see JavaScript linters for details.

Problems tool window: fix a problem

When the TypeScript Language Service is activated on the TypeScript page as described in TypeScript, the tool window shows discrepancies in the code detected by the TypeScript Language Service.

The Problems tool window consists of two tabs:

  • The Current File tab shows the errors detected in the file from the active editor tab.

    Problems tool window, TypeScript. Current File tab shows syntax errors from the file in the active editor tab
  • The Project Errors tab shows the errors across the entire project (for TypeScript) or in all previously opened files in other context, with error messages grouped by files in which they were detected.

    Problems tool window, TypeScript. Project Errors tab shows syntax errors across the project
  • To open the Problems tool window, click the Inspections widget in the upper-right corner of the editor.

    Inspection widget

    Alternatively select View | Tool windows | Problems from the main menu or press Alt+6.

  • To view suggested quick-fixes for a problem, select the corresponding error message and then select Show Quick Fixes from its context menu, or click the Show Quick Fixes button on the toolbar, or just press Alt+Enter.

    To fix a problem, select the appropriate quick-fix from the list.

    Monitor TypeScript syntax errors: show and apply quick-fixes
  • Alternatively, click the Open Editor Preview button to open the Editor Preview pane and fix the problem manually there, without leaving the tool window.

    Monitor TypeScript syntax errors: fix problems in the editor preview pane
  • To navigate to the place where an error occurred, double-click the corresponding error message, or select Jump to Source from its context menu, or just press F4.

  • To filter out error messages by their severity and customize their sorting, click the View Options button and select or clear the relevant items in the list.

    Monitor TypeScript syntax errors: options button
  • To copy an error message, select Copy Problem Description from its context menu or press Ctrl+C.

Toolbar

Item

Tooltip and shortcut

Description

the View Options button

View Options

Click this button to filter out error messages by their severity and customize their sorting.

the Open Editor Preview button

Open Editor Preview

Click this button to open the Editor Preview pane and fix the problem manually there, without leaving the tool window.

Expand all/Collapse all

Expand all

Ctrl+NumPad +

Collapse all

Ctrl+NumPad -

Use these buttons to have all nodes expanded or collapsed.

the Show Quick Fixes button

Show Quick Fixes Alt+Enter

Click this button to show quick fixes for the selected error.

Last modified: 25 November 2021