こんにちは、未経験からITエンジニアへの転職を目指すごんにんごんです。
今日は、“Todo Tree”というVS Codeの拡張機能について紹介したいと思います。
Contents
筆者の困りごと
先日の記事に投稿しましたが、現在絶賛オリジナルアプリを制作中です。
機能をどんどん追加しているの折、こんな困りごとがありました。
- 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に追記すれば出来るみたいです。
- VS Codeのコマンドパレット(Cmd + Shift + P)
- Preferences: Open Default Settings ( JSON )
- “todo-tree.general.tags”に追記する
まとめ
開発を続けていくと、ソースコードが膨れ上がってきてます。そんなときに、後でやらなきゃいけないことを一覧で確認できるのは、ありがたいですね。
ぜひ使ってみてください!
参考
https://zenn.dev/posita33/articles/vscode_extension_todo_tree