【VScode】コメントの拡張機能

チーム開発に使えそうな拡張機能

VSCodeのマーケットプレイスで見つけたコメントの視認性をよくする拡張機能をご紹介します^ ^

みやすいですし、チーム内で設定することで連携も取りやすくなりそうですよ！

Colorful Comments

「Colorful Comments」はコメント内の先頭に設定したタグを記述することで、コメントに色をつけて表示することができます。

上記画像の色はデフォルトの色ではありません。
グレーは見づらいため、表示していません。

デフォルト色とタグは以下の通りになっています。

タグ	文字色	文字色(16進数)
!	赤	#FF2D00
?	青	#0076FF
//	グレー	#474747
^	黄色	#EAF622
*	緑	#28FF00
&	ピンク	#FF06A0
~	紫	#BE00FF
todo	マスタード	#FF8C00

チーム開発する際、メンバーのタグと色を設定することで「誰が」「どんな内容で」コメントを残しているかなどの視認性が良くなるのでおすすめです。

Colorful Commentsの設定方法

設定方法は簡単で、setting.jsonに追記していきます。

設定内容の簡単な内容を記載していきます。

設定項目は3つあります。

設定項目	概要
colorful-comments.multilineComments	複数行コメントにハイライトを適用する
colorful-comments.highlightPlainText	テキストファイルにハイライトを適用する
colorful-comments.tags	タグの設定

colorful-comments.tagsにはさらに設定項目があります。

設定項目	概要	設定値
tag	タグ	任意の文字列
color	文字色	カラーコード
strikethrough	取り消し線	true/false
backgroundColor	背景色	カラーコード
bold	字の太さ	true/false
italic	斜体	true/false

backgroundColorの初期値はtransparent(透明)になっています。

では、setting.jsonを開いて設定を追記してみます。

{
    // マルチラインハイライトを有効化
    "colorful-comments.multilineComments": true,

    // テキストファイルのタグハイライトを無効化
    "colorful-comments.highlightPlainText": false,

    //　タグの設定
    "colorful-comments.tags": [
        // デフォルトタグ
        {
            "tag": "!",
            "color": "#cf857d",
            "strikethrough": false,
            "backgroundColor": "transparent",
            "bold": "false",
            "italic": "false"
        },
        {
            "tag": "?",
            "color": "#4496d3",
            "strikethrough": false,
            "backgroundColor": "transparent",
            "bold": "false",
            "italic": "false"
        },
        {
            "tag": "//",
            "color": "#474747",
            "strikethrough": true,
            "backgroundColor": "transparent",
            "bold": "false",
            "italic": "false"
        },
        {
            "tag": "^",
            "color": "#EAF622",
            "strikethrough": false,
            "backgroundColor": "transparent",
            "bold": "false",
            "italic": "false"
        },
        {
            "tag": "*",
            "color": "#3cb37a",
            "strikethrough": false,
            "backgroundColor": "transparent",
            "bold": "false",
            "italic": "false"
        },
        {
            "tag": "&",
            "color": "#e29399",
            "strikethrough": false,
            "backgroundColor": "transparent",
            "bold": "false",
            "italic": "false"
        },
        {
            "tag": "~",
            "color": "#c7a5cc",
            "strikethrough": false,
            "backgroundColor": "transparent",
            "bold": "false",
            "italic": "false"
        },
        {
            "tag": "todo",
            "color": "#f7b977",
            "strikethrough": false,
            "backgroundColor": "transparent",
            "bold": "false",
            "italic": "false"
        },
        // ↓追加コード例
        {
            "tag": "user1",
            "color": "#87ceeb", // skyblue
            "strikethrough": false,
            "backgroundColor": "transparent",
            "bold": "true",
            "italic": "true"
        },
    ],
}

色の指定は16進数での設定となるので、以下のサイトを参考に設定してみてください！

まとめ

今回はコメントを読みやすくする拡張機能をご紹介しました。

コメントが見やすくなり、チーム内などで設定すればメンバーの進捗状況等も確認しやすくなりそうですね！

ぜひ、参考にしてみてください^ ^