【亲测免费】 Visual Studio Code 高级文本高亮插件教程

项目介绍

vscode-highlight 是一个基于正则表达式的高级文本高亮插件，适用于 Visual Studio Code。该插件允许用户通过正则表达式自定义文本高亮规则，适用于待办事项、注释、颜色标记等多种场景。它支持对不同捕获组应用不同样式，专注于做好一件事。

项目快速启动

安装插件

1. 打开 Visual Studio Code。
2. 进入扩展市场，搜索 vscode-highlight。
3. 点击安装。

配置高亮规则

1. 打开命令面板（Windows: Ctrl + Shift + P, macOS: Command + Shift + P）。
2. 输入 Open Settings (JSON) 并选择。
3. 在 settings.json 文件中添加以下配置：

{
  "highlight.regexes": {
    "(// TODO:)(.*)": [
      { "backgroundColor": "#ffbb00", "color": "#000000" },
      { "backgroundColor": "#ffbb00", "color": "#000000" }
    ],
    "(// NOTE:)(.*)": [
      { "backgroundColor": "#00ff00", "color": "#000000" },
      { "backgroundColor": "#00ff00", "color": "#000000" }
    ]
  }
}

强制刷新高亮

1. 打开命令面板。
2. 输入 Highlight: Force Decorate 并执行。

应用案例和最佳实践

案例一：待办事项高亮

在代码中使用 // TODO: 和 // NOTE: 标记待办事项和注释，通过配置高亮规则，使这些标记更加醒目。

{
  "highlight.regexes": {
    "(// TODO:)(.*)": [
      { "backgroundColor": "#ffbb00", "color": "#000000" },
      { "backgroundColor": "#ffbb00", "color": "#000000" }
    ],
    "(// NOTE:)(.*)": [
      { "backgroundColor": "#00ff00", "color": "#000000" },
      { "backgroundColor": "#00ff00", "color": "#000000" }
    ]
  }
}

案例二：关键字高亮

在代码中高亮显示特定的关键字，如 FIXME 和 BUG。

{
  "highlight.regexes": {
    "(FIXME)(.*)": [
      { "backgroundColor": "#ff0000", "color": "#ffffff" },
      { "backgroundColor": "#ff0000", "color": "#ffffff" }
    ],
    "(BUG)(.*)": [
      { "backgroundColor": "#ff0000", "color": "#ffffff" },
      { "backgroundColor": "#ff0000", "color": "#ffffff" }
    ]
  }
}

典型生态项目

TODO Highlight

TODO Highlight 是另一个流行的文本高亮插件，专注于待办事项和注释的高亮。虽然 vscode-highlight 更加通用，但 TODO Highlight 在特定场景下也有其优势。

VSCode Vim

VSCode Vim 是一个在 Visual Studio Code 中提供 Vim 编辑模式的插件。结合 vscode-highlight，可以在 Vim 模式下实现更高效的关键字高亮和导航。

通过以上教程，您可以快速上手并充分利用 vscode-highlight 插件，提升代码的可读性和开发效率。