WebStorm特殊注释标记（TODO、FIXME、自定义注释标记）

WebStorm IDE版本： Build #WS-192.6817.13 或者 2019.09.24构建版本

代码里经常用到的注释方式有以下几种：

• 单行注释：// ......
• 块注释：/* ...... */
• 文档注释：/** ...... */

在不同的IDE中，这些注释的样式有所差异，有的样式比较醒目，能引起人的注意；有的则比较暗淡，尽量不分散写代码的注意力。如果有需要的话，绝大部分IDE都能够对各种注释方式的样式进行自定义（如修改字体、颜色、大小等）。请看下面的例子：

图1 LayaAir 2.x IDE的注释颜色

图2 WebStorm IDE的注释颜色（自定义后的颜色）

WebStorm特殊注释标记TODO、FIXME

WebStorm中还有一些能帮助我们提高工作效率的注释标记，例如TODO（大部分IDE都有类似的特殊标记）和FIXME。先看看例子：

图3 WebStorm中TODO、FIX注释标记

可以看到在双斜杠之后添加TODO、FIXME关键字都可以使注释的样式发生变化，这样的特殊注释可以跟一般的注释区别开来，便于我们快速识别。当TODO、FIXME注释行下方的连续注释行存在缩进时（tab或空格），属于同一块标记注释块。（不仅双斜杠注释可以使用TODO、FIXME，其他类型的注释快也可以使用）

WebStorm中的TODO面板

如果仅仅是以特殊的标记方式，还不能很好的提高我们的工作效率，WebStorm还提供了专门的面板供我们索引项目中，或单文件中所有的特殊标记，通过点击IDE下方TODO标签（Alt + 6）打开该面板，如下图：

图4 WebStorm中的TODO面板

1. TODO面板标签按钮入口
2. 索引范围：
   • Project 整个项目
   • CurrentFile 当前文件
   • Scope Based 基于指定范围（可以自定义范围，这里不详述）
3. 索引列表，可以单击跳转到对应的注释位置

WebStorm自定义TODO、FIXME的样式

依次点击File - Setting（或Ctrl + Alt + S），打开设置面板，并在设置面板中搜索“TODO”，见下图：

图5 在设置面板中搜索TODO

1. 搜索“TODO”
2. 搜索“TODO”后的结果
3. 样式栏，WebStorm通过样式栏提供的正则表达式来查询特殊标记，默认会有todo和fixme的正则：\b(todo|fixme)\b.*
4. 添加、删除、编辑特殊标记正则表达式

选中列表中的样式，点击编辑按钮打开编辑面板，编辑特殊标记的样式，见下图：

图6 样式编辑面板

1. 修改正则表达式
2. 选择图标
3. 是否为正则表达式中的字符开启大小写敏感
4. 样式编辑区域，勾选 ‘Use color scheme TODO default colors’后，使用的是全局主题中的默认配色方案。如果要自定义样式，先取消勾选。

点击添加按钮打开添加面板，跟上面的编辑面板雷同，可以添加自定义的特殊标记正则表达式，如自定义正则：\b(freeman)\b:.*，并使用自定义样式，前景色选成蓝色，见下图：

图7 添加自定义样式

添加完成后看看效果：

图8 自定义特殊标记

图9 在TODO面板中的效果

WebStorm中的TODO面板中的筛选功能

再次打开设置面板，并在设置面板中搜索“TODO”，查看上图5中，Filters栏目：

图10 筛选器

点击右侧的添加按钮并添加筛选过滤，打开添加面板，新增名称为@freeman的筛选器，并勾选对应的样式，如下图：

图11 添加筛选器

1. 筛选器名称
2. 筛选器对应的特殊标记

现在我们回到TODO面板，使用我们刚刚添加的筛选器：

图12 使用筛选器

这样就可以只看@freeman的特殊注释了。

​ WebStormw文档参考地址

​ WebStorm TODO comments