TODO comments
Default patterns: TODO
and FIXME
Configure: Settings | 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.
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/2024.3/ws_using_todo.png](https://resources.jetbrains.com/help/img/idea/2024.3/ws_using_todo.png)
Place the caret where you want to create a TODO item and add a comment, for example, by pressing Ctrl0/, then type
TODO
orFIXME
, 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 header, 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/2024.3/ws_multiline_todo.png](https://resources.jetbrains.com/help/img/idea/2024.3/ws_multiline_todo.png)
In the Settings dialog (CtrlAlt0S) , 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.
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.
In the Settings dialog (CtrlAlt0S) , click TODO under Editor. The TODO page opens.
To add a pattern for the
OPTIMIZE
items, clickin 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.
In the TODO tool window, click
and select the necessary filter.
Thanks for your feedback!