WebStorm
 
2022.2
Shortcuts: Windows
Get WebStorm
You are viewing the documentation for an earlier version of WebStorm.
  1. Write and edit source code
  2. TODO comments

TODO comments

Last modified: 21 July 2022

Default patterns: TODO and FIXME

Configure: Settings/Preferences | Editor | TODO

Tool window: View | Tool Windows | TODO

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.

https://resources.jetbrains.com/help/img/idea/2022.2/ws_using_todo.png
Gif

To create a TODO comment

  1. 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.

  2. 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.

https://resources.jetbrains.com/help/img/idea/2022.2/ws_multiline_todo.png
Gif

To suppress multiline TODO comments

  1. In the Settings/Preferences dialog (Ctrl+Alt+S), click TODO under Editor.

  2. 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

  1. In the Settings/Preferences dialog (Ctrl+Alt+S), click TODO under Editor. The TODO page opens.

  2. To add a pattern for the OPTIMIZE items, click Add icon in the Patterns area and type the following pattern: \boptimize\b.*

  3. To add a filter with the new pattern, click Add icon 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 Filter TODO Items and select the necessary filter.