こんにちは、太郎です。
独学でWEB制作を学んで１年で制作会社に転職し、今は現役エンジニアとして活動しています
後でコード修正したいんだけど、あとで探すの大変なんだよなぁ〜
どのファイルだっけな〜
Todo Tree使ってないの？
トゥッ、トゥッドゥ〜？
Todo Treeを使うと、TODOをつけた場所がいつでも
まとめて見れるようになるんだ！
使い方はコメントアウトにTODOとつけるだけだけど
チーム開発を助けてくれる便利な拡張機能だから
一緒に使い方を確認していこう！
個人開発はもちろんチーム開発をする上で、コメントアウトは頻繁に行う作業の１つです。
なぜなら、開発をする上で、コードの説明や後から修正したい場所を明確に出来る、
改善しやすくなるからです。
今回は、どのファイルのどの場所に、あとで見直すコメントをしたかがわかる、Todo Treeの基本的な使い方について解説します。
おすすめ記事↓↓
- Todo Treeの必要性
- Todo Treeの使い方
- Todo Treeの見るべき設定
Todo Treeをつけた箇所をすぐに探せるようになり、作業の効率化をしよう！
チーム開発をスムーズに進められるよ！
Todo Treeとは？
Gruntfugglyが提供しているタスク管理ツール
Todo Treeは、Visual Studio Code上でのタスクの管理をすることが
できるツールです。
修正するコードがどのファイルの、どの場所にあるかをまとめて見れることで、
自分以外の人も修正する箇所がすぐに分かるようになります。
改善が必要なところが分かれば、タスクの忘れがなくなりますし、
探す時間を短縮することにより生産性をアップさせることが出来ます。
また、TODO以外にも以下の内容を確認することが可能です。
自分好みのワードやアイコン、色を設定することができます。
Todo Treeで分かること
- 自分好みのワードでのコメント
- 自分好みのアイコンを表示
- 自分好みの色でハイライトする
Todo Treeでわかる情報をもとにコードを改善すると、
ストレスのないチーム開発を目指すことができます。
Todo Tree導入の必要性
Todo Treeは、チーム開発を円滑に進める上での必須の拡張機能です。
Todo Treeが必要な理由
- コメントをすることで修正箇所を明示する
- コメントを打った箇所を探しやすくする
- チーム開発を円滑にできるようになる
先程も言ったようにTodo Treeを利用すると、自分のどこに修正するコードがあるのかが全てわかります。
つまりタスクを処理していく上で、後から見直す箇所を忘れずに指し示してくれている旗のような役割をしてくれるというわけです。
Todo Treeを使わず開発を進めることは、大量のファイルとコードの海に明かりもつけずに探しに行くのと同じです。
開発とは関係のない余計な時間を削減するためにも、Todo Treeを導入しましょう。
開発時間を短縮するVisual Studio Codeのショートカットについては【現役エンジニアが使う】VSCODEの便利なショートカットで爆速コーディング！！用例を交えて紹介【マルチカーソル編】
を御覧ください。
よく見る指標と使い方
ここからは以下の項目が確認できます。
主な使い方
- コメントアウトの先頭にTODOをつける
- 修正したいコメントをクリックする
TODOをつけたい時
やり方は簡単です。
いつも行っているコメントアウト（HTML：⌘＋option+A）にTODOとつけてください。
この文字列TODOに拡張機能が反応して色を付けてくれます。
TODOをつけたファイルを検索する方法
コメントから探す
次にTODOをつけたファイルを検索する方法を解説します
画像の赤丸ををクリックすると赤丸の左横にTODOS:TAGSという文字が出ると思います。
これはTAGグループモードで付けたタグによってまとめて表示してくれます！
この様にTODOをつけた時のコメントが列挙されます。修正したいところのコメントをクリックすると指定のファイルの場所に飛んでくれます。
ファイルツリーから検索する方法
続いてはファイルツリーから検索する方法です。
赤い丸の部分をもう一度押すと今度は赤丸の左横がTREEと表示されているのが分かるかと思います。
これはタグをツリー構造で探せるモードです。
実際にツリー構造を開いていくと
先程コメントアウトしたファイルとコメントが出てきているのが分かるかと思います。
Todo Treeの設定
Todo Treeの設定はsettings(JSON)に書かれています。
詳細は割愛しますが、vscode上で⌘+Shift+Pを押してコマンドパレットを開き
setting jsonと打ち込むと出てきますので自分なりにカスタマイズすることも可能です。
まとめ：Todo Treeを導入して開発効率をあげよう！
今回は、Todo Treeの使い方を解説しました！
チーム開発に限らず開発をする時にはコメントを利用することは必須です。そしてそれを探しやすくすることも同じくらい必須です。
Todo Treeが必要な理由
- コメントをすることで修正箇所を明示する
- コメントを打った箇所を探しやすくする
- チーム開発を円滑にできるようになる
なぜなら、開発の進捗は一定方向に進むわけではないからです。設計上がまだ決まっていない部分や上手く機能しないコードなど後回しにしなければいけない箇所が多く出てきます。
その時にどこを修正しなければいけないかが明確になっていないと新たなエラーを引き起こすなど開発に支障が出ます。
vscodeとgithubの連携についても記事にしていますので是非見て行ってください！
そしてエンジニア自信を楽にしてくれるツールは積極的に活用していきましょうね。
あなたの開発ライフが少しでも快適になることを祈っています。
以上。太郎でした～！
コメント