TechBlog masa

  • Top
  • Posts
  • Profile
2025-02-08
SWE
🌲アノテーションコメントをVScodeで管理しよう! TODO, FIXME, XXX… [TodoTree]
VScodeコード品質

likes: 0

Unsupported Block: table_of_contents

コード中のコメントのこんなやつ。

// TODO: _commonで値を管理する

// NOTE: メタプロすればDRYにできるが、コード検索しやすくするためにそのままにする

// HACK: 〜の部分と共通化する

// FIXME: 〜と〜を選択した上で〜を選択すると〜のバグが生じる

詳しくはこちらを参考に。

https://qiita.com/taka-kawa/items/673716d77795c937d422

https://zenn.dev/tb_nim/articles/af9086997e6213

https://sqripts.com/2022/04/19/20423/

 

ExtensionのTODO Treeを使えば、VScodeでアノテーションコメントが管理できる。

Unsupported Block: link_preview

できること:

  • 一覧表示
  • タグ(TODO, FIXME, …)ごとの一覧表示
  • タグの追加(デフォルトではTODO, FIXMEだけっぽい)
  • デザインなどのカスタム
    • コード中ではハイライトしてほしくない…
    • サイドバーのタグ表示順を変えたい
Unsupported Block: heading_2
  1. サイドバーのTODOs (チェックマーク)を選択
  2. “Show Flat View”, “Show Tree View”と表示されるボタンクリックで表示方法を変えられる
Unsupported Block: heading_2

“Group by tag”と表示されるボタンクリックでTODO, FIXME, …のタグごとの一覧表示

Unsupported Block: heading_2
  1. コマンドパレット開く shift cmd P
  2. “todo tree: add tags”で検索
  3. 追加したいタグを入力して決定
Unsupported Block: heading_2

ユーザ設定(settings.json)、ユーザ設定(GUI)をいじる

Unsupported Block: heading_3

願望:気が散るのでコメントに色はついてほしくない…

Unsupported Block: image

ユーザ設定(settings.json)をいじる。

“opacity”: 0を指定すれば、コード中ではハイライトされなくなる(完全に透明)。ただし、サイドバー中ではちゃんと色が見える。

  // extension: TODO Tree
  "todo-tree.highlights.customHighlight": {
    "NOTE": {
      "icon": "note",
      "background": "#e1fcf9",
      "opacity": 0,
    },
    "TODO": {
      "icon": "check",
      "background": "#6fff00",
      "opacity": 0,
    },
    "HACK": {
      "icon": "flame",
      "background": "#f05a03",
      "opacity": 0,
    },
    "OPTIMIZE": {
      "icon": "rocket",
      "background": "#ff96f3",
      "opacity": 0,
    },
    "FIXME": {
      "icon": "alert",
      "background": "#eadd1e",
      "opacity": 0,
    },
  },
Unsupported Block: image
Unsupported Block: heading_3

願望:NOTEはそんな見返したい訳じゃないので、一番下に表示したい。

ユーザ設定(GUI)にて todo tree general tagsで検索。

Unsupported Block: image

既存のタグをXボタンで消去して、表示したい順に項目を追加していけばOK。

 

  • TODO: 次のコミットでやる、次のイシューでやる温度感
  • FIXME: 必ずこのPR内で直す(重大なバグがある)

 

  • HACK: とりあえずこう実装したが、共通化・分割などによってわかりやすくできる見込みがある。機能実装の進行に合わせて合間に良い構造に変えよう
  • OPTIMIZE: とりあえずこの空間・時間計算量で実装したが、オーダを下げられる見込みがある。ここがボトムネックになったら最適化しよう

 

  • NOTE: 情報として。逆にNOTEがついてないコメントは、情報を与える目的ではない。
breadcrumb予定地
profileCard予定地

SideBarPage

共有ボタン予定地
他ボタン予定地