vscodeの拡張 Todo Treeで認識してくれないコメント中のTODOも認識させる方法

はじめに

皆さんこんにちは。PSSLの2年目エンジニアの細川です。

今回は短めの記事ですが、VSCodeのTodo Treeという拡張機能に関するtipsを共有しようと思います。

Todo Treeは開いているディレクトリ内のすべてのTODOをリストアップしてくれる拡張機能になります。

皆さんも、あとでやろうと思ったことを、TODOというコメントなどを書いて残しておくこともあるかと思います。

そういう時に、Todo Treeの拡張機能を入れておくと一覧で表示してくれたり、画像のようにHighlightしてくれるので非常に便利です。

TODOはもちろん、BUG、FIXMEなどのタグも使えます。

デフォルトで様々な言語のコメントアウトに対応しており、コメント中に書いても正しく認識されるのですが、たまに認識してくれない言語もあります。例えば、マークダウンのコメントや、TypeScriptの複数行コメントアウトなどです。

[](マークダウンのコメント)

/**
 * TypeScriptの複数行コメントアウト
 */

試しに、先ほどのTODOコメントを複数行コメントにしてみます。

すると、デフォルトでは認識してくれないので、ハイライトされなくなっています。

デフォルトで認識してくれないものを認識させるようにするには、settings.jsonに以下の行を追加します。

{
	// ... そのほかの設定
  "todo-tree.regex.regex": "(\\[\\]\\(|\\*\\s|//|#|<!--|;|/\\*|^|^[ \\t]*(-|\\d+.))\\s*($TAGS)"
}

デフォルトで対応している文頭の正規表現に、[](で始まるものと* (アスタリスク+半角スペース)で始まるものを追加しています(デフォルトの設定はこちら)。これで、マークダウンのコメントやTypeScriptの複数行のコメントの中でも、以下のように、正しく認識してくれるようになります。

他のコメントアウトの場合も同様の手法で正しく認識してくれるようになりますので、よろしければ参考にしてください。

今回はTodo Treeのtipsについてまとめてみました。

皆さんの参考になれば幸いです。今後もこのようなtipsがあれば共有したいと思います。他にもこちらのようなTypeScriptの情報等を挙げているのでよろしければのぞいてみて下さい。

ご覧いただきありがとうございます！この投稿はお役に立ちましたか？

役に立った役に立たなかった

0人がこの投稿は役に立ったと言っています。