TODO comments

When working on an application, you may want to mark some parts of your code for future reference: areas to optimize and improve, possible changes, questions to be discussed, and so on. In WebStorm, you can add special types of comments that are highlighted in the editor and listed in the TODO tool window.

Using default patterns

By default, WebStorm recognizes two patterns — the words TODO and FIXME both in the lower and in the upper case. These patterns can be used inside comments of any supported file type.

To create a TODO comment

Place the caret where you want to create a TODO item and add a comment, for example, by pressing Ctrl+/, then type TODO or FIXME, and then type your note.
View the list of TODO items in the TODO tool window. The tool window consists of four tabs where WebStorm shows TODO items for the whole project, for the file in the active editor tab, for the selected scope, or for the active changelist.
- By default, when you select an item you automatically jump to the corresponding comment in the source code. To disable this automatic navigation, right-click the tool window title bar, click View Options, and then remove the tick next to Navigate with Single Click.
- With Navigate with Single Click disabled, double-click the required TODO item to jump to the corresponding comment in the source code.

In JavaScript and TypeScript files, WebStorm by default also supports multiline TODO comments. Start the TODO comment with the usual TODO and add extra indents on the next lines to continue the TODO comment. If you remove the indentation, WebStorm will treat it as a normal comment.

To suppress multiline TODO comments

In the Settings/Preferences dialog Ctrl+Alt+S, click TODO under Editor.
On the TODO page that opens, clear the Treat the indented text on the following lines as part of the same TODO checkbox.

Using custom patterns

You can modify the default patterns or add your own patterns and filter the list to show only TODO items that match certain patterns. For example, you may want to mark code fragments that require optimization with the OPTIMIZE pattern and ignore all other types of TODO items.

Create a custom pattern

In the Settings/Preferences dialog Ctrl+Alt+S, click TODO under Editor. The TODO page opens.
To add a pattern for the OPTIMIZE items, click in the Patterns area and type the following pattern: \boptimize\b.*
To add a filter with the new pattern, click in the Filters area, specify a name for the new filter, and select the new pattern to be included in this filter.

To apply a custom filter

In the TODO tool window, click and select the necessary filter.

Last modified: 15 June 2021