- 1. 概要
- 2. インストール
- 3. 使い方
- 4. キーワード
- 5. ハイライト
- 6. コメント定義
- 7. 除外ファイル
- 8. キーワード設定の失敗
- 9. 参考サイト
1. 概要
なんか、カテゴリわけが難しくて、ここに書いていいんだろうかと思いつつ。
「Todo Tree」を日本語で説明するのは、難しいですね。
ソース内に「TODO」と書いている文字を探して、それをツリー表示させることができるようです。
2. インストール
「Todo Tree」で検索して、最上位に表示される拡張機能をインストールします。
3. 使い方
こんな書いてるソースがあって。
インストールすると、ソースがハイライト表示されて。
左に、木の形をしたアイコンがあらわれますな。
木の形のアイコンをクリックして該当のソースの折りたたみを開くと、ハイライト表示されたものが、ツリー表示されます。
ちょっとわからないのが、拡張機能の説明にある「CHECK」や「NOTE」は、リストされないし、逆に「XXX」や「BUG」といったキーワードがリストされないようです。
ハイライト表示の設定も変えたいし、キーワードも変更したい。
だって、別の理由で「XXX」や「BUG」ってな文字がソース上にあるんだもの。
ハイライト表示見にくいしね。
なんか、拡張機能の説明を読んでいると、カスタマイズできそうですが・・・。
4. キーワード
拡張機能の説明を読んで、少しわかりました。
キーワードは、デフォルトの状態で
"todo-tree.general.tags": [
"BUG",
"HACK",
"FIXME",
"TODO",
"XXX",
"[ ]",
"[x]"
]
となっちょるらしい。
これをカスタマイズするとして、「BUG」と下の３つは、わたしは除外したいのだ。
逆に、「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",
},
その結果が、下記のような表示になりました。
枠を付けたいが、付け方がわかりません。
色だけは、いじることができます。
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",
"追而書",
]
と書いてやりましたらば、「追而書」自体は、意図通りにハイライトするものの、起動するときに
てな、ダイアログが表示されるようになってしまいましたのだ。
でまぁ、これは漢字を直接入力してしまったことに問題があるようで、こういう文字はエスケープさせてやらねばならんです。
てことで
"todo-tree.general.tags": [
"TODO",
"\u8FFD\u800C\u66F8",
]
と書きなおすことで、ダイアログが表示されなくなるんじゃないかしら。
ちなみに、コードを取得するには、「Windows」上であれば、「サクラエディタ」がお手軽でありますことよ。
9. 参考サイト
本ページは、下記のサイトを参考にさせていただきました。
「VSCode の Todo Tree が良かった話」
「【VSCode 拡張機能】Better Comments の使い方・設定方法 コードコメントの色分け表示」
|
