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

# チーム開発に使えそうな拡張機能
VSCodeのマーケットプレイスで見つけたコメントの視認性をよくする拡張機能をご紹介します^ ^

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

## Colorful Comments

https://marketplace.visualstudio.com/items?itemName=ParthR2031.colorful-comments

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

![スクリーンショット 2022-07-19 20.26.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/571908/28ad90c7-a21e-74cd-1b36-499a1a5b2bd1.png)

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

デフォルト色とタグは以下の通りになっています。
| タグ | 文字色 | 文字色(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|

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


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

```javascript
{
    // マルチラインハイライトを有効化
    "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進数での設定となるので、以下のサイトを参考に設定してみてください！

https://www.colordic.org/

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

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

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