LoginSignup
5
4

【VSCode】TODOコメントを一覧表示する方法

Last updated at Posted at 2023-06-04

拡張機能をインストールする

TODOコメントを一覧表示するために「Todo Tree」をインストールします。

インストールすると以下のように「Todo Tree」のアイコンが表示され、クリックするとTODOの一覧が表示されます。

スクリーンショット 2023-06-04 18.04.51.png

TODOとして認識されるタグを設定する

TODOとして認識されるタグはデフォルトで次のようになっています。

settings.json
{
  "todo-tree.general.tags": [
    "BUG",
    "HACK",
    "FIXME",
    "TODO",
    "XXX",
    "[ ]",
    "[x]",
  ]
}

この"todo-tree.general.tags"の項目を変更することでTODOとして認識されるタグを設定できます。

アイコンやハイライトを変更する

ツリーに表示されるアイコンやエディターでのハイライトを変更するには次の設定を変更します。

settings.json
  "todo-tree.highlights.customHighlight": {
    "BUG": {
      "icon": "bug"
    },
    "HACK": {
      "icon": "tools"
    },
    "FIXME": {
      "icon": "flame"
    },
    "XXX": {
      "icon": "x"
    },
    "[ ]": {
      "icon": "issue-draft"
    },
    "[x]": {
      "icon": "issue-closed"
    }
  }

"todo-tree.highlights.customHighlight"では次の設定ができます。

foreground - エディターのハイライトおよびルーラーのマーカーの前景色を設定する。

background - エディターでハイライトの背景色を設定する。

opacity - 背景色の透明度を設定するパーセント値。

fontWeightfontStyletextDecoration - 標準の CSS 値でハイライトのスタイルを設定する。

borderRadius - ハイライトの背景の境界線の半径を設定する。

icon - ツリービューに別のアイコンを設定する。アイコンは以下のいずれかから選択。codiconから選択する場合には「$(icon)」で指定。

iconColour - ツリー内のアイコンの色を設定する。指定しない場合は、前景色または背景色が使用される。色は前景色と背景色ごとに指定可能。

gutterIcon - エディターのガターにアイコンを表示するには「true」に設定する。

rulerColour - 概要ルーラーのマーカーの色を設定する。指定しない場合は、デフォルトで前景色が使用される。色は前景色と背景色ごとに指定可能。

rulerOpacity - ルーラーマーカーの不透明度を設定する。

rulerLane - オーバービュールーラーのマーカーのレーンを設定する。指定しない場合は、デフォルトで「right」が設定される。「left」、「center」、「right」、「full」のいずれかを設定可能。「none」を使用してルーラー マーカーを無効にすることも可能。

type - エディター内でどの部分を強調表示するか設定する。有効な値は次のとおり。

  • tag - タグのみを強調表示
  • text - タグとタグの後のテキストを強調表示
  • tag-and-comment - コメント文字 (または一致の開始部分) とタグを強調表示
  • tag-and-subTag - 上記と同様だが、サブタグもハイライト可能 (カスタムハイライトで定義された色を使用)
  • text-and-comment - コメント文字 (または一致の開始部分)、タグ、およびタグの後のテキストを強調表示
  • line - タグを含む行全体を強調表示
  • whole-line - タグを含む行全体をエディターの全幅まで強調表示
  • capture-groups:n,m... - 正規表現からのキャプチャグループを強調表示。「n」は正規表現へのインデックス
  • none - 文書内の強調表示を無効にする

hideFromTree - ツリーからタグを非表示にする。ファイル内ではハイライト表示される。

hideFromStatusBar - タグがステータスバーのカウントに含まれないようにする。

hideFromActivityBar - タグがアクティビティバーのバッジ数に含まれないようにする。

"todo-tree.highlights.customHighlight"で設定されていないタグは"todo-tree.highlights.defaultHighlight"の設定が適用されます。

隠しファイルを対象に含める

デフォルトでは隠しファイルは検索の対象外となっています。
隠しファイルを検索対象に含めるには次のように設定を変更します。

settings.json
{
  "todo-tree.filtering.includeHiddenFiles": true
}
5
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
4