VSCode 添加自定义注释的方法(附带红色警戒经典注释风格)

下面是详细讲解“VSCode 添加自定义注释的方法(附带红色警戒经典注释风格)”的完整攻略。

添加自定义注释的方法

VSCode 可以通过安装插件来添加自定义注释，其中比较常用的插件是 Better Comments 和 Todo Tree。

安装插件

在 VSCode 中按下 Ctrl + Shift + X 打开插件面板，搜索并安装 Better Comments 和 Todo Tree 插件。

添加自定义注释

1. 打开 VSCode 首选项，在设置（Settings）中搜索 better-comments.tags 选项。

2. 在 better-comments.tags 中添加自定义注释，格式为：

"mytag": {
"icon": "alert",
"color": "#ff0000",
"strikethrough": false,
"underline": false,
"backgroundColor": "transparent"
}

其中 mytag 是自定义的注释标记，icon 是注释标记左侧的图标，可以使用 VSCode 自带的图标或任何自定义 SVG 图标；color 是文字颜色；strikethrough 和 underline 是是否使用删除线和下划线；backgroundColor 是注释背景色。

例如，以下是使用红色警戒经典注释风格的示例：

```
"alert": {
"icon": "alert",
"color": "#ff0000",
"strikethrough": false,
"underline": false,
"backgroundColor": "transparent"
},

"note": {
"icon": "note",
"color": "#0080ff",
"strikethrough": false,
"underline": false,
"backgroundColor": "transparent"
},

"question": {
"icon": "question",
"color": "#00bfff",
"strikethrough": false,
"underline": false,
"backgroundColor": "transparent"
},

"todo": {
"icon": "check",
"color": "#00ff00",
"strikethrough": false,
"underline": false,
"backgroundColor": "transparent"
}
```

1. 在代码中添加自定义注释，例如：

// *TODO: 这里是待办事项
// *QUESTION: 这里是疑问
// *NOTE: 这里是需要注意的地方
// *ALERT: 这里是需要特别警惕的地方

添加完成后，可以使用 Todo Tree 插件来展示所有待办事项，方便查看和管理。

示例说明

示例一

在 better-comments.tags 中添加一个 tag1 标记。

"tag1": {
           "icon": "tag",
           "color": "#ff69b4",
           "strikethrough": true,
           "underline": false,
           "backgroundColor": "transparent"
}

在代码中添加自定义注释：

// *TAG1: 这里是自定义注释的示例1

示例二

在 better-comments.tags 中添加一个 tag2 标记。

"tag2": {
           "icon": "circle-filled",
           "color": "#ff8c00",
           "strikethrough": false,
           "underline": true,
           "backgroundColor": "#000000"
}

在代码中添加自定义注释：

// *TAG2: 这里是自定义注释的示例2

这两个示例中，我们分别添加了不同的注释标记，并且使用了不同的图标、颜色、删除线和下划线等样式，可以根据自己的需要进行自定义。添加完后，在代码中使用标记来表示不同类型的注释信息，方便区分和管理。