VS Code 擴充推薦 - Better Comments

每個開發者或開發團隊在開發時，或多或少都會在註解(comments)留下一些說明或標籤(tags)，包含 TODO , FIXME , WARNING , REF 等等，這些被稱為 Codetags 。

雖然目前還沒有明確標準要怎麼使用這些標籤，不過開發時如果能將這些標籤強調(highlight)顯示，讓開發者更容易注意到註解處有其他成員想要說明的事或想要做的事，讓註解不僅僅只是註解，而是增加註解被關注到的機率。

本文將介紹 VS Code 擴充 Better Comments, 讓開發者或開發團隊可以自訂要強調顯示的 codetags, 以增強開發協作能力。

本文環境 #

• Visual Studio Code
  • 擴充 Better Comments

Better Comments #

安裝完 Better Comments 之後，預設會強調顯示 5 種註解裡的 codetags:

1. ! 代表 Alerts, 警告之意
2. ? 代表問題、疑問、不確定之意
3. // 代表將註解畫上刪除線
4. TODO 代表代辦事項
5. * 代表此行強調顯示(highlight)

如下圖所示，可以看到註解 /* ... */ 裡的各種 codetags 都以不ㄧ樣的顏色顯示/格式：

Better Comments 設定 #

前述 5 種 codetags 設定寫在 Better Comments 的設定中，可以用 Cmd + , 或者 Ctrl + , 顯示設定頁面，並在搜尋框內輸入 better-comments 即可找到：

點選 Edit in settings.json 即可設定/新增各種 codetags 。

預設值為：

"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 需要強調顯示的文字
• color 文字顏色
• strikethrough 是否顯示刪除線
• underline 是否顯示底線
• backgroundColor 文字背景色， transparent 代表透明
• bold 是否粗體顯示
• italic 是否斜體顯示

總結 #

Better Comments 是我 VS Code 必備的擴充，對我來說注意到註解裡有 TODO 以及 WARNING 是相當重要的事，所以我都會強調顯示這幾個 codetags, 除了讓註解顯示更加清楚之外，也讓註解有條理組織，增進開發的效率。

Happy Coding!

References #

Better Comments - Visual Studio Marketplace

vscode