VS Code拡張機能「Todo Tree」でタスクを忘れないようにする｜ブログ

はじめに 筆者は日々の業務の中で、Visual Studio Code (以下VS Code) を利用しております。 そのVS Code には便利な拡張機能が多くありますが、その中で「Todo Tree」という拡張機能を紹介したいと思います。 Todoを残す ある機能を作る際、すべての仕様や必要なファイルが確定してから作り始めることができれば問題ないのですが、実際には中々そうもいきません。 例えば、まだTOPページの画像はできていないが、一旦お客様に見せるために仮の画像を置いておくといったことや、仕様が確定してないが、動作を確認するため仮の状態で機能を作成するといったことはよくあります。 その場合、仕様が確定したあとや必要なファイルが用意されたときに、該当部分のソースコードを差し替える必要が出てきます。 それがいつになるか分からないので、忘れないためにTodoを残すといったことをするかと思います。 // TODO 計算方法が確定次第修正 $value = $price 1; さて、ある程度時間が経ち、何か行わないといけないタスクが残っていないかとTodoを確認したい場合、どのようにするのが良いのでしょうか。 VS Code に「Todo Tree」をインストール Todoを確認したい場合、例えば検索を使って確認するといった方法も考えられますが、「Todo Tree」という拡張機能を利用するのが便利です。 早速 VS Code で「Todo Tree」をインストールしましょう。 １．VS Code で「拡張機能」のアイコンをクリックします。 ２．検索バーに「Todo tree」と入力します。 ３．「Todo Tree」の拡張機能から「インストール」をクリックします。 似たような名前がありますが、ダウンロード数（4.８Mや9Kと表示されている部分）の一番多いものを選んでください。 インストールが完了すると、「Todo Tree」のアイコン（木のマーク）が追加されているはずです。 「Todo Tree」を使ってみる 「Todo Tree」のアイコンをクリックしてみましょう。 現在 VS Code で開いているフォルダ内の各種 TODO がひと目で、わかりやすく確認することが可能です！ また、該当の TODO を選ぶことで、そのソースコードの場所にジャンプすることも可能です。 「Todo Tree」に該当する箇所は、ソースコードでは背景が強調されるようになります。 「Todo Tree」で強調されるワードは、TODO以外にもあります。 初期設定では、「FIXME」や「HACK」なども強調されるようになっています。 強調するワードについては、設定からカスタマイズすることも可能です。 最後に この拡張機能を使って、TODO が残ってないかを確認することでやり忘れのタスクを防ぐことができたり、チームメンバーへ向けての TODO を記述することで、簡単にタスクの連携が可能になるかと思います。 コメントの記述の仕方やタスクの連携の仕方などは、会社ごと・チームごとなどで色々とあるかもしれませんが、こういった拡張機能で開発を効率よく進めていくことができるかと思います。