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

はじめに

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

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

Todo Treeとは

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

https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree

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

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

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

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

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

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

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

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

認識してくれないコメント中のTODOに反応させるには

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

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

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

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

終わりに

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

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

About 細川 13 Articles

高専専攻科制御系の学科を卒業後、2022年にサイオステクノロジーに入社。入社後は、バックエンド, フロントエンドの開発に携わり、Go言語やTypeScriptを用いた開発を行っている。その他、React, Next.JS, Nest.JS, GraphQLなど

Twitter YouTube