VSCode TODO Highlight拡張機能でタスク管理を劇的に改善！見逃しゼロの完全ガイド

コードを書いていて「後で直そう」と思ってTODOコメント書いたのに、すっかり忘れてそのままリリース…なんて経験ありませんか？

実は、VSCodeのTODO Highlight拡張機能を使えば、TODOやFIXMEなどのコメントが蛍光ペンでマークしたように目立つようになるんです。もう重要なタスクを見逃すことはありません！しかも、自分好みの色やキーワードにカスタマイズできるから、チーム開発でも個人プロジェクトでも大活躍します。

この記事では、TODO Highlightの導入から、知っておくと便利な設定テクニック、さらにはチーム開発での活用法まで、あなたのコーディングライフを変える方法を分かりやすく解説します！

TODO Highlightって何ができるの？
1. 主な機能と特徴
2. なぜTODO Highlightが人気なの？
インストールと初期設定
1. 拡張機能のインストール
2. すぐに使える！デフォルト設定
基本的な使い方をマスター
1. TODOコメントの書き方
2. TODOリストの表示と管理
カスタマイズで自分仕様に！
チーム開発での活用テクニック
便利な関連機能と連携
トラブルシューティング
1. よくある問題と解決方法
他の似た拡張機能との比較
1. Better Comments
2. Todo Tree
実践的な活用例
まとめ：TODO Highlightで変わる3つのこと

TODO Highlightって何ができるの？

主な機能と特徴

TODO Highlight拡張機能を入れると、こんな素晴らしいことが起こります：

視覚的な強調表示：

TODOコメントが鮮やかな色で目立つ
FIXMEは赤、NOTEは青など、種類別に色分け
背景色も文字色も自由にカスタマイズ
アイコンも一緒に表示可能

検索と管理機能：

プロジェクト全体のTODOを一覧表示
クリックで該当箇所にジャンプ
優先度順に並び替え
完了したタスクの管理

生産性の向上：

重要なタスクを見逃さない
コードレビューが効率的に
チーム内でのタスク共有が簡単
技術的負債の可視化

なぜTODO Highlightが人気なの？

人気の理由：

設定が簡単（インストールするだけで動く）
動作が軽い（パフォーマンスに影響なし）
カスタマイズ性が高い
無料で全機能使える
定期的にアップデートされている

インストールと初期設定

拡張機能のインストール

方法1：VSCode内から直接インストール

VSCodeを開く
左サイドバーの拡張機能アイコンをクリック（またはCtrl+Shift+X）
検索ボックスに**「TODO Highlight」**と入力
wayou.vscode-todo-highlightを選択
**「インストール」**ボタンをクリック
自動的に有効化される

方法2：コマンドパレットから

Ctrl+Shift+P（Mac: Cmd+Shift+P）でコマンドパレットを開く
**「Extensions: Install Extensions」**と入力
TODO Highlightを検索してインストール

すぐに使える！デフォルト設定

インストールした瞬間から、以下のキーワードが自動的にハイライトされます：

// TODO: この機能を実装する
// FIXME: このバグを修正する
// NOTE: 重要な説明

デフォルトの色設定：

TODO: 黄色/オレンジ系（注意を引く色）
FIXME: 赤系（緊急性を示す色）
NOTE: 青/緑系（情報を示す色）

基本的な使い方をマスター

TODOコメントの書き方

基本フォーマット：

// TODO: タスクの説明
// TODO(担当者名): より詳細な説明
// TODO [優先度:高]: 緊急のタスク

実践例：

// TODO: ユーザー認証機能を追加する
function loginUser() {
    // FIXME: パスワードの暗号化が未実装
    // NOTE: 次のスプリントで対応予定
}

// TODO(山田): エラーハンドリングを改善
// TODO [2024-03-31]: 期限付きタスク

TODOリストの表示と管理

全TODOを一覧表示する方法：

Ctrl+Shift+Pでコマンドパレットを開く
**「TODO-Highlight: List highlighted annotations」**を実行
新しいタブにTODO一覧が表示される
項目をクリックで該当箇所にジャンプ

便利なショートカット：

Ctrl+Alt+T: TODO一覧の表示/非表示
クリックでジャンプ
ダブルクリックでファイルを開く

カスタマイズで自分仕様に！

色とスタイルのカスタマイズ

settings.json に以下を追加して、見た目を自由に変更できます：

{
    "todohighlight.keywords": [
        {
            "text": "TODO:",
            "color": "#ffffff",
            "backgroundColor": "#ffbd2a",
            "borderRadius": "3px"
        },
        {
            "text": "FIXME:",
            "color": "#ffffff",
            "backgroundColor": "#f06292",
            "borderRadius": "3px"
        },
        {
            "text": "HACK:",
            "color": "#000000",
            "backgroundColor": "#90caf9",
            "borderRadius": "3px"
        }
    ]
}

オリジナルキーワードの追加

チーム独自のキーワードも追加できます：

{
    "todohighlight.keywords": [
        {
            "text": "REVIEW:",
            "color": "#ffffff",
            "backgroundColor": "#9c27b0"
        },
        {
            "text": "QUESTION:",
            "color": "#ffffff",
            "backgroundColor": "#00bcd4"
        },
        {
            "text": "DEPRECATED:",
            "color": "#ffffff",
            "backgroundColor": "#9e9e9e",
            "isWholeLine": true
        },
        {
            "text": "重要:",
            "color": "#ff0000",
            "backgroundColor": "#ffeb3b"
        }
    ]
}

正規表現を使った高度な設定

より柔軟なマッチングには正規表現が使えます：

{
    "todohighlight.keywordsPattern": "TODO(\\s*\\([^)]+\\))?:?|FIXME(\\s*\\([^)]+\\))?:?",
    "todohighlight.include": [
        "**/*.js",
        "**/*.jsx",
        "**/*.ts",
        "**/*.tsx",
        "**/*.html",
        "**/*.css",
        "**/*.scss"
    ],
    "todohighlight.exclude": [
        "**/node_modules/**",
        "**/dist/**",
        "**/build/**"
    ]
}

チーム開発での活用テクニック

担当者を明記するルール

チーム開発では、誰が対応するか明確にしましょう：

// TODO(田中): APIのレスポンス形式を統一する
// FIXME(@yamada): メモリリークの可能性あり
// REVIEW(レビュー待ち): このロジックの妥当性を確認

優先度システムの導入

優先度別に色分けする設定例：

{
    "todohighlight.keywords": [
        {
            "text": "CRITICAL:",
            "color": "#ffffff",
            "backgroundColor": "#d32f2f"
        },
        {
            "text": "HIGH:",
            "color": "#ffffff",
            "backgroundColor": "#f57c00"
        },
        {
            "text": "MEDIUM:",
            "color": "#000000",
            "backgroundColor": "#ffd600"
        },
        {
            "text": "LOW:",
            "color": "#000000",
            "backgroundColor": "#aed581"
        }
    ]
}

プロジェクト別の設定

プロジェクトごとに異なる設定を使う方法：

プロジェクトルートに.vscodeフォルダを作成
その中にsettings.jsonを配置
プロジェクト固有の設定を記述

// .vscode/settings.json
{
    "todohighlight.keywords": [
        // このプロジェクト専用のキーワード
        {
            "text": "SECURITY:",
            "color": "#ffffff",
            "backgroundColor": "#b71c1c"
        },
        {
            "text": "PERFORMANCE:",
            "color": "#ffffff",
            "backgroundColor": "#1976d2"
        }
    ]
}

便利な関連機能と連携

アウトラインビューとの連携

VSCodeのアウトラインビューでTODOを確認：

表示メニュー → アウトライン
TODOコメントも階層表示される
クリックでジャンプ可能

Git連携で変更履歴を追跡

TODOの追加・解決をGitで管理：

# TODOを追加したコミット
git commit -m "Add TODO: implement user authentication"

# TODOを解決したコミット
git commit -m "Resolve TODO: user authentication implemented"

タスク管理ツールとの連携

GitHub Issues連携の例：

// TODO: #123 - ユーザー認証機能の実装
// これでIssue番号と紐付けできる

トラブルシューティング

よくある問題と解決方法

Q：TODOがハイライトされない

解決策：

拡張機能が有効か確認
ファイルタイプが対象に含まれているか確認
settings.jsonの構文エラーをチェック
VSCodeを再起動

Q：色が表示されない

チェック項目：

テーマとの競合を確認
カラーコードが正しいか確認（#付き6桁）
他の拡張機能との競合を確認

Q：パフォーマンスが遅い

対策：

{
    "todohighlight.maxFilesForSearch": 5120,
    "todohighlight.exclude": [
        "**/node_modules/**",
        "**/vendor/**",
        "**/.git/**"
    ]
}

他の似た拡張機能との比較

Better Comments

特徴：

より多彩なコメントスタイル
重要度別の記号（!, ?, //）
コメントの種類が豊富

使い分け：

シンプルさ重視 → TODO Highlight
多機能重視 → Better Comments

Todo Tree