VS Code 擴充推薦 - Better Comments

Posted on  Aug 14, 2023  in  VS Code , VS Code 擴充推薦  by  Amo Chen  ‐ 2 min read

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

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

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

本文環境

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

對抗久坐職業傷害

研究指出每天增加 2 小時坐著的時間,會增加大腸癌、心臟疾病、肺癌的風險,也造成肩頸、腰背疼痛等常見問題。

然而對抗這些問題,卻只需要工作時定期休息跟伸展身體即可!

你想輕鬆改變現狀嗎?試試看我們的 PomodoRoll 番茄鐘吧! PomodoRoll 番茄鐘會根據你所設定的專注時間,定期建議你 1 項辦公族適用的伸展運動,幫助你打敗久坐所帶來的傷害!

贊助我們的創作

看完這篇文章了嗎? 休息一下,喝杯咖啡吧!

如果你覺得 MyApollo 有讓你獲得實用的資訊,希望能看到更多的技術分享,邀請你贊助我們一杯咖啡,讓我們有更多的動力與精力繼續提供高品質的文章,感謝你的支持!