Visual Studio Codeでコメントを色分けして管理する「Better Comments」

Visual Studio Codeでコーディングをしていく中で、未来の自分や他メンバーに向けてコメントを積極的に残しておくと、後でコードを見るときに把握しやすくなります。

ただ、「コメント」と言ってもさまざまな目的・用途があります。

• 単純にコードの説明をしているコメント
• 重要箇所だから触るときに注意を促す警告用のコメント
• あとでやるべきタスクを残しているコメント
• 修正が必要な箇所を残しているコメント

今回紹介する「Better Comments」を使えば、コメントの色分けができるので、パッと見で何のコメントなのか分かりやすくなりますし、見落とすことも少なくなります。

Better Comments

marketplace.visualstudio.com

Better Comments - Visual Studio Marketplace

https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments

Extension for Visual Studio Code - Improve your code commenting by annotating with alert, informational, TODOs, and more!

Better Commentsはコメントの最初に「タグ」と呼ばれる文字列を入れておくことで、そのタグに合わせて色分けしてくれるVisual Studio Codeの拡張機能です。

基本的な使い方

コメントの最初に「タグ」を入力すると、タグに紐付く色に変わります。

デフォルトで用意されているのは下記になります。

• 警告：!
• 疑問：?
• 強調：*
• 打ち消し：//
• タスク：todo（大文字でも可）

設定

タグの設定

タグを追加したり、見た目の設定をしたい場合は「”better-comments.tags”」を使います。

配列の中に、タグ1つ分の情報を連想配列で入れていきます。
デフォルトでは下記のタグが設定されているので、完全オリジナルではなく、ここから自分好みに修正するのが良さそうです。

"better-comments.tags": [
  {
    "tag": "!", //タグ名（最初にこの文字列が入っていると認識する）
    "color": "#FF2D00",  //文字色
    "strikethrough": false, //打ち消し線
    "underline": false, //下線
    "backgroundColor": "transparent", //背景色
    "bold": false, //太字
    "italic": false //斜体
  },
  {
    "tag": "?",
    "color": "#3498DB",
    "strikethrough": false,
    "underline": false,
    "backgroundColor": "transparent",
    "bold": false,
    "italic": false
  },
  {
    "tag": "//",
    "color": "#474747",
    "strikethrough": true,
    "underline": false,
    "backgroundColor": "transparent",
    "bold": false,
    "italic": false
  },
  {
    "tag": "todo",
    "color": "#FF8C00",
    "strikethrough": false,
    "underline": false,
    "backgroundColor": "transparent",
    "bold": false,
    "italic": false
  },
  {
    "tag": "*",
    "color": "#98C379",
    "strikethrough": false,
    "underline": false,
    "backgroundColor": "transparent",
    "bold": false,
    "italic": false
  }
]

「”tag”」で設定した文字列が先頭に入ったコメントに対して、色や装飾が付くようになります。

複数行コメントは無視する

デフォルトだと複数行コメントにも装飾が付くようになっていますが、無視したい場合は「”better-comments.multilineComments”」を「false」にします。

{
  "better-comments.multilineComments": false
}

あえて複数行コメントだけ無視する必要もないので、わざわざ設定を変えることはなさそうです。

コメント以外でも装飾をする

コメント外でも、先頭がタグから始まる文字列に色付けをしたい場合は「”better-comments.highlightPlainText”」を「true」にします。

{
  "better-comments.highlightPlainText": true
}

この設定をしておけば、.txtなどのただのプレーンなテキストでも装飾ができます。

ただ、コードを書くときには紛らわしいので、グローバルな設定としては「false（デフォルトのまま）」にしておいて、特定のプロジェクトの中だけ「true」にするような使い方が理想です。