Visual Studio Code - 拡張機能 - フォーマット(整形)- Todo Tree

 クラウディア
1. 概要
2. インストール
3. 使い方
4. キーワード
5. ハイライト
6. コメント定義
7. 除外ファイル
8. キーワード設定の失敗

1. 概要

 なんか、カテゴリわけが難しくて、ここに書いていいんだろうかと思いつつ。  「Todo Tree」を日本語で説明するのは、難しいですね。  ソース内に「TODO」と書いている文字を探して、それをツリー表示させることができるようです。  本ページは、下記のサイトを参考にさせていただきました。
VSCode の Todo Tree が良かった話」
「【VSCode 拡張機能】Better Comments の使い方・設定方法 コードコメントの色分け表示

2. インストール

 「Todo Tree」で検索して、最上位に表示される拡張機能をインストールします。

3. 使い方

 こんな書いてるソースがあって。
「Visual Studio Code」-「Todo Tree」「適用前」

 インストールすると、ソースがハイライト表示されて。
 左に、木の形をしたアイコンがあらわれますな。

「Visual Studio Code」-「Todo Tree」「適用後」

 木の形のアイコンをクリックして該当のソースの折りたたみを開くと、ハイライト表示されたものが、ツリー表示されます。

「Visual Studio Code」-「Todo Tree」「ツリー表示」

 ちょっとわからないのが、拡張機能の説明にある「CHECK」や「NOTE」は、リストされないし、逆に「XXX」や「BUG」といったキーワードがリストされないようです。

 ハイライト表示の設定も変えたいし、キーワードも変更したい。
 だって、別の理由で「XXX」や「BUG」ってな文字がソース上にあるんだもの。
 ハイライト表示見にくいしね。

 なんか、拡張機能の説明を読んでいると、カスタマイズできそうですが・・・。

4. キーワード

 拡張機能の説明を読んで、少しわかりました。  キーワードは、デフォルトの状態で

"todo-tree.general.tags": [
        "BUG",
        "HACK",
        "FIXME",
        "TODO",
        "XXX",
        "[ ]",
        "[x]"
    ]
 となっちょるらしい。  これをカスタマイズするとして、「BUG」と下の3つは、わたしは除外したいのだ。  逆に、「NOTE」「CHECK」を採用しますか。  と、これで、設定するならば「settings.json」に、下記のように記述します。

"todo-tree.general.tags":
	[
        "HACK",
        "FIXME",
        "TODO",
        "CHECK",
        "NOTE",
    ]
 しめしめ、これはうまくいきました。  ちなみに、わたしの実際の「settings.json」には「追而書」というキーワードを追加しています。  日本語は、キーワードとして使えるか、気になりましたが、使えます。

5. ハイライト

 とにかく、ソース上にデフォルトで白背景のものがあるのはいただけないのね。  拡張機能の説明には、デフォルトの例として

{
    "foreground": "white",
    "background": "red",
    "icon": "check",
    "type": "text"
}
 カスタムの例として

{
    "TODO": {
        "foreground": "white",
        "type": "text"
    },
    "FIXME": {
        "icon": "beaker"
    }
}
 と、記述されておるのですが、このまんま「settings.json」に記述するとなんかワーニングが出たりします。  かろうじて、背景なしで、色だけ変えることができました。  こんな書きました。

"todo-tree.highlights.defaultHighlight":
{
	"foreground": "#FFFF00",
},
 その結果が、下記のような表示になりました。
「Visual Studio Code」-「Todo Tree」「カスタマイズ」

 枠を付けたいが、付け方がわかりません。
 色だけは、いじることができます。

6. コメント定義

 コメントとみなす定義に「Laravel」の

{{--  --}}
 がはいっていません。  これは、デフォルトで

	"todo-tree.regex.regex" : "(//|#|<!--|;|/\\*|^|^[ \\t]*(-|\\d+.))\\s*($TAGS)",
 これに、「<!--」の後に「|{{--」を定義してやればいいので  「settings.json」に

	"todo-tree.regex.regex" : "(//|#|<!--|{{--|;|/\\*|^|^[ \\t]*(-|\\d+.))\\s*($TAGS)",
 と記述します。

7. 除外ファイル

 データベースのダンプを「.sql」として、テキストファイルに保存しているのですが、困ったことに、この中に「TODO」のキーワードが存在していて、「Todo Tree」にリストされ、ハイライトしてしまいます。  これを除外するには、「settings.json」に、下記のように記述します。

	"todo-tree.filtering.excludeGlobs":
	[
		"**/*.sql",
	],

8. キーワード設定の失敗

 ここまではよかったのですが、失敗してしまったのが、「追而書」という文字を「TODO」として認識させてやりたかったので

"todo-tree.general.tags": [
        "TODO",
        "追而書",
    ]
 と書いてやりましたらば、「追而書」自体は、意図通りにハイライトするものの、起動するときに
「Visual Studio Code」-「Todo Tree」「Todo-Tree:regex parse error」

 てな、ダイアログが表示されるようになってしまいましたのだ。
 でまぁ、これは漢字を直接入力してしまったことに問題があるようで、こういう文字はエスケープさせてやらねばならんです。
 てことで


"todo-tree.general.tags": [
        "TODO",
		"\u8FFD\u800C\u66F8",
    ]
 と書きなおすことで、ダイアログが表示されなくなるんじゃないかしら。  ちなみに、コードを取得するには、「Windows」上であれば、「サクラエディタ」がお手軽でありますことよ。
earthcar(アースカー)
損保との違い
葬送のフリーレン Prime Video
世界最大級のオンライン英会話EF English Live