Pocket

こんにちは、未経験からITエンジニアへの転職を目指すごんにんごんです。

今日は、“Todo Tree”というVS Codeの拡張機能について紹介したいと思います。

筆者の困りごと

先日の記事に投稿しましたが、現在絶賛オリジナルアプリを制作中です。

機能をどんどん追加しているの折、こんな困りごとがありました。

  • Aという実装をやっているとき、実装済のBの機能に追加(削除)がしたいな。でも、Aでブランチを切っているから、その作業はまた後だな。
  • 忘れないようにTodoリストを作っとかなきゃだからメモアプリに書いておこう。けど、そもそも見返すことを忘れそうだな。
  • というか見返そうとしても、膨大なファイルから該当する箇所を見つけるのに、骨が折れそうだな、、、

そんなとき、Todo Treeという便利な拡張機能を見つけたので、使ってみたという訳です。

VS CodeでTODOをリスト化してくれる拡張機能”Todo Tree”

使い方はとっても簡単。コード上に、後でやりたいアクションのタグを記述するだけで、Todo Treeが集約してくれます。

使い方を1つずつ説明しますね。

1. VS CodeのExtension検索バーから「Todo tree」と検索して、インストール

インストール完了後、VS Code左側タブに木🌳のアイコンが追加されます。

2. Todoアクションをコード内に記載

やらないといけない項目を、コード内にコメントアウトで記載します。デフォルトでいくつかタグが登録されているので、項目によって使い分けることもできます。ちなみにこれらタグの意味は、gitのアノテーションコメントに従っているみたいです。

アノテーション(注釈)コメントとは、コメント自体に意味を持たせて、可読性を高めたもの

アノテーションコメントのススメとTodo Tree
# デフォルトで登録されているタグ
TODO  # あとで追加、修正するべき機能がある
FIXME # 既知の不具合があるコードで、要修正。
HACK  # あまり綺麗じゃないコードで、要リファクタリング。
BUG   # バグが起こっているコード。FIXMEとの違いは???
[ ]   # チェックボックス(未完了)
[x]   # チェックボックス(完了)

実際に開発中のコードへ、タグをつけてみました。木🌳のアイコンを押すと、それぞれの項目が集約されて、確認することができます。便利!!!

補足: タグを追加したいとき(settings.jsonの開き方)

デフォルト以外に任意のタグを追加したいときは、settings.jsonに追記すれば出来るみたいです。

  1. VS Codeのコマンドパレット(Cmd + Shift + P)
  2. Preferences: Open Default Settings ( JSON )
  3. “todo-tree.general.tags”に追記する

まとめ

開発を続けていくと、ソースコードが膨れ上がってきてます。そんなときに、後でやらなきゃいけないことを一覧で確認できるのは、ありがたいですね。

ぜひ使ってみてください!

参考

https://zenn.dev/posita33/articles/vscode_extension_todo_tree

https://qiita.com/gs1068/items/29c38eb1045796c0c566

投稿者

waco@jp

30代未経験でエンジニア転職を目指しています。前職はメーカーで営業と製品開発を担当。22年3月からTechCampを受講し、5月に卒業。現在、就活とオリジナルアプリケーション制作の両輪で活動しています。

コメントを残す

メールアドレスが公開されることはありません。