# Visual Studio CodeでToDoコメントを一覧で表示する拡張機能「Todo Tree」

URL: https://webrandum.net/vscode-plugin-todo-tree/
公開日: 2022-09-07
更新日: 2022-09-07
カテゴリー: コーディング
タグ: Visual Studio Code, Visual Studio Codeプラグイン
出典: Webrandum（著者: サイトウ マサカズ）

コーディング時に、あとで行うタスクやリファクタリングしたい箇所には「TODO」などを付けてコメントを入れておくと、あとから見たときに把握しやすくなります。

今回はそんなタスク用のコメントを一覧表示できる「Todo Tree」についてまとめておきます。

## Todo Tree

[![](https://www.google.com/s2/favicons?domain=marketplace.visualstudio.com)marketplace.visualstudio.com![](//webrandum.net/mskz/wp-content/uploads/pz-linkcard/cache/4b2cf4c41e0da1317ad3e19793e7a898384195003dffacd8565eaadae5a32fc8.webp)Todo Tree - Visual Studio Marketplacehttps://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-treeExtension for Visual Studio Code - Show TODO, FIXME, etc. comment tags in a tree view](https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree)

Todo Treeはコメントの始めに「TODO」などのタグを付けておくと、一覧で表示して、クリックすると該当箇所まで移動できるVisual Studio Codeの拡張機能です。

「あとでやろう」と思ったことをコメントとして残していけば、あとで一覧から探し出せますし、残りのタスク数も確認できます。

単純に「TODO」で文字列検索してもいいのですが、「TODO」以外のすべてのタグを一気に把握できたり、見やすくなります。

### Better Commentsとの併用

コメント関連の似た拡張機能に「Better Comments」があります。

これは特定の文字列からはじまるコメントを装飾して見やすくしてくれます。

「TODO」などはBetter Commentsと被っていますし、一覧表示はTodo Treeを使って、装飾はBetter Commentsで管理するとコメントがかなり見やすくなります。

[![](https://www.google.com/s2/favicons?domain=webrandum.net)Webrandum![](//webrandum.net/mskz/wp-content/uploads/2022/09/eyecatch-3.png)Visual Studio Codeでコメントを色分けして管理する「Better Comments」https://webrandum.net/vscode-plugin-better-commentsVisual Studio Codeでコーディングをしていく中で、未来の自分や他メンバーに向けてコメントを積極的に残しておくと、後でコードを見るときに把握しやすくなります。ただ、「コメント」と言ってもさまざまな目的・用途があります。 単純にコードの説明をしているコメント 重要箇所だから触るときに注意を促す警告用のコメント あとでやるべきタスクを残しているコメント 修正が必要な箇所を残しているコメント今回紹介する「Better Comments」を使えば、コメントの色分けができるので、パッと見で何のコメントなのか分かりやすくなりま...](https://webrandum.net/vscode-plugin-better-comments)

### サイドバーのアイコンを増やしたくない場合は「Todo Highlight」

似たような機能の拡張機能に「Todo Highlight」があります。

こちらも「TODO」などのコメントにハイライトが付きますが、コメント全体ではなく「TODO」部分のみがハイライトされます。

また、Todo Treeはサイドバーに一覧表示のアイコンが追加されてしまいますが、こちらはサイドバーには追加されません。

代わりに、コマンドパレットで「List highlighted annotations」を実行すると画面下に一覧が表示されます。

サイドバーにいっぱいアイコンが追加されて並んでいくのがイヤな人は、Todo Highlightの方が合っているかもしれません。

[![](https://www.google.com/s2/favicons?domain=marketplace.visualstudio.com)marketplace.visualstudio.com![](//webrandum.net/mskz/wp-content/uploads/pz-linkcard/cache/776e77353f84a97dbdbba4e5754af05cb60c3465b8b80283e5e140c3cba200d4.webp)TODO Highlight - Visual Studio Marketplacehttps://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlightExtension for Visual Studio Code - highlight TODOs, FIXMEs, and any keywords, annotations...](https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight)

## 基本的な使い方

コメントの最初に下記のようなテキストを入力すると、ハイライトされます。

- BUG

- TODO

- FIXME

- HACK

![Todo Tree](https://webrandum.net/mskz/wp-content/uploads/2022/09/image_1-3.png)

これだけだとかなり味気ないので、先ほども紹介した「Better Comments」を使うと下記のように色も付いてかなり見やすくなります。

![Better Commentsとの併用](https://webrandum.net/mskz/wp-content/uploads/2022/09/image_2-2.png)

### 一覧の表示

Todo Treeをインストールすると、Visual Studio Codeの左サイドバーにアイコンが追加されます。

ここでプロジェクト内にあるタスクが一覧で表示されます。

![Todo Tree 一覧の表示](https://webrandum.net/mskz/wp-content/uploads/2022/09/image_4-1.png)

上のリストアイコンをクリックすれば表示を変えられて、表示方法は全部で3種類あります。

![Todo Tree 一覧表示の切り替え](https://webrandum.net/mskz/wp-content/uploads/2022/09/image_3-1.png)

## 詳細な設定

### タグの追加

「”todo-tree.general.tags”」でタスクとして認識されるタグを追加できます。

配列にして、認識されるテキストを追加していくだけです。

```
"todo-tree.general.tags": [
  "BUG",
  "bug",
  "BUGS",
  "bugs",
  "TODO",
  "ToDo",
  "todo",
  "TODOS",
  "ToDos",
  "todos",
  "FIXME",
  "fixme",
  "FIX",
  "fix",
  "NOTE",
  "note"
],
```

### タグのグループ化（表記揺れ対策）

「”todo-tree.general.tagGroups”」で、それぞれのタグをグループ化できます。

ファイル検索だと単数形か複数形かを合わせておかないと、検索に引っかからなくて見落とす可能性がありますが、あらかじめ使いそうな表記を書いておくことで、Todo Treeの一覧にすべて表示させられます。

```
"todo-tree.general.tagGroups": {
  "BUG":["bug", "BUGS", "bugs"],
  "TODO":["ToDo", "todo", "TODOS", "ToDos", "todos"],
  "FIXME": ["fixme","FIX", "fix"],
  "NOTE":["note"]
}
```

上記のように設定すると、「bug」や「BUGS」コメントも「BUG」と同じ扱いにしてくれます。

細かい表記を気にしなくてもよくなるので便利ですが、とは言っても表記は揃えておくに超したことはないので、最初に決めてちゃんと統一するようにしておいた方が安全です。

### デフォルトの装飾を変更

「”todo-tree.highlights.defaultHighlight”」でデフォルトの装飾を変えられます。

ただ、できることに限りもあるので基本的にはアイコンを設定するくらいにして、細かい装飾は「Better Comments」に任せた方が管理もしやすく、使い分けとして良いのではないかと思います。

```
"todo-tree.highlights.defaultHighlight": {
  "foreground": "white",
  "background": "red",
  "icon": "check",
  "type": "text"
}
```

### 各タグ個別の装飾を変更

「”todo-tree.highlights.customHighlight”」で各タグの装飾を変更できます。

できることは「”todo-tree.highlights.defaultHighlight”」と同じです。

```
"todo-tree.highlights.customHighlight": {
  "TODO": {
    "foreground": "white",
    "type": "text"
  }
}
```