VScode中.html（以及.vue）文件名中的js注释如何设置不同颜色以及 Better Comments 插件的一些理解

在VScode中下载了better comments插件发现在.js文件名中才会有对应的颜色注释，但是在.html文件名中的js注释并没有显示相对应的颜色， 如下图所示：

解决方法：
1.如果没有下载 better-coments 插件，先下载

2. 然后复制配置文件

3. 打开 VScode 的本地设置


4. 把在上面的第 2 步 中复制的代码 粘贴到 setting.json 文件中

到这一步配置基本完成，会在各个文件的注释内，书写内容时，按照配置文件中的代码来显示相应的颜色，就像第一张图片中的，如果注释是以感叹号开头，会显示红色，以问号开头，会显示蓝色，以 todo 开头，会显示橙色等，当然这些都可以自定义，根据自己的喜好来设置 注释以什么开头，显示什么颜色

注意：
html 文件 是在 下面 这个 注释内 才生效

****<!--  写在这种注释里面 -->****

css 文件是 在下面这个 注释内才生效

**/* 
     写在这种注释里面
*/
// 或者这种注释里面**

js 文件是在下面这种注释内 才会生效

**/* 
    写在这种注释里面
*/
 // 或者这种注释里面**

如果需要 在 html 文件内 也在 / / 的 这个注释也生效，需要修改 VScode 插件 的配置文件

5. 打开电脑内插件的配置文件夹
C盘 -> 用户(Users）-> 自己的名字 -> .vscode文件夹

extensions 文件夹 -> 找到 better-comments 的配置文件夹

6. 打开指定配置文件
Better-comments 配置文件夹 -> out 文件夹 -> 打开 parser.js 文件

7. 修改配置文件，按住 Ctrl + F 搜索 case “html”

然后在下面加上这段代码：

this.setCommentFormat("//", "/*", "*/");
break;

如下图所示：

保存代码，再以管理员身份重新打开 VScode 即可
从此以后， 在 html 文件的 <! – --> 这个 注释内 写注释，颜色就不会变了
在 // 或者 /* */ 注释内，颜色才会显示成之前在配置文件中设置的
如下图所示:

温馨提示:上面的全都是我1月份写的，那个时候用的还是1.62.0版的 VScode,近期看了评论才知道最新版的 VScode的 parser.js 文件中确实已经没有 case “html” 这些代码了，最新的代码如下图所示:

我设置的这些注释的颜色是自己比较喜欢，然后我感觉在这个 vscode的颜色主题下比较明显但又不是那么刺眼的几个颜色, 大家可以根据自己的喜好来设置,这里给大家推荐一个rgb颜色表代码的网址:[RGB颜色对照表(https://www.917118.com/tool/color_3.html)

我仔细研究了一下， 发现最新版不需要写 case “html” ，之前的那种写法在 纯 js 或 纯ts文件， 纯css 文件中，注释依然有效，如下图所示:

在这个 纯 css 文件中也有效如下图所示:

但是在 .html 文件中，又变成默认在纯html结构中写注释才会显示设置的注释颜色了，如下图所示:


但一般情况下,我很少会在 html 结构中写注释, 基本上都是在 js 脚本语言里面写注释, 那么要怎样才能实现我想要的注释效果呢?我仔细研究了一下最新版的 VScode 中的 parser.js 代码以后，发现解决办法如下:

就是把上面的第 7 步 修改为 加上 以下代码：

case "vue":
          this.setCommentFormat("//", "/*", "*/");
          break;

如下图所示：

保存代码，关掉VScode， 再以管理员身份重新打开 VScode 即可