vscode 插件 分享-Highlight 高亮任意代码

插件链接

Advanced text highlighter based on regexes. Useful for todos, annotations, colors etc.

适合用于标记某些代码, 或者自定义高亮代码.

与其他类似的插件(TODO Highlight, Better Comments, Todo+)等相比, Highlight为正则匹配, 更具有灵活性.

安装

点此链接 –> Install

或 运行以下命令行

ext install fabiospampinato.vscode-highlight

使用规则

不同的正则需要写在配置文件里(settings.json)

1. Regexes need to be double-escaped, once for JSON and the second time for the regex itself.
2. All characters of the matched string must be wrapped in a capturing group.
3. For each capturing group a decorations options object must be provided (empty decorations are allowed: {}), otherwise the actual decorations will be misaligned.
4. Nested capturing groups are not supported.
5. If you want to match the start/end of a line make sure the regex has the “m” (multiline) flag.

大致意思:

1. 正则需要双转义才能正确匹配到. 如匹配(需要写成 \\(
2. 匹配串必须是捕获状态. 如匹配“.*TODO”, 需要写成 (.*TODO), 即用()包裹
3. 每个捕获组都需要提供装饰参数. 也就是说有几个()捕获组, “decorations”字段的长度就是几
4. 不支持嵌套捕获组
5. 如果使用^或$匹配行首或行尾, 需要开启多行标记: m flag

“decorations”装饰参数可以见VS Code API

演示示例

"highlight.regexes": {
  "(// ?TODO:?)(.*)": [
    {
      "overviewRulerColor": "#ffcc00",
      "backgroundColor": "#ffcc00",
      "color": "#1f1f1f",
      "fontWeight": "bold"
    },
    {
      "backgroundColor": "#d9ad00",
      "color": "#1f1f1f"
    }
  ],
  "(// ?FIXME:?)(.*)": [
    {
      "overviewRulerColor": "#ff0000",
      "backgroundColor": "#ff0000",
      "color": "#1f1f1f",
      "fontWeight": "bold"
    },
    {
      "backgroundColor": "#d90000",
      "color": "#1f1f1f"
    }
  ],
  "(// )(@\\w+)": [
    {},
    {
      "color": "#4de0ff"
    }
  ]
}

效果

应用

以rust语言为例. rust 代码中有一些方法是unstable的, 这些方法需要弄night版才能正确使用. 我们可以把#[unstable]所在行全部高亮, 这样在使用方法时可以快速避开这些方法.

"(.*#\\[)(unstable)(\\(.*?\\)])": {
    "filterLanguageRegex": "rust",
    "decorations": [
        {
            "overviewRulerColor": "#D32F2F",
            "backgroundColor": "#FF5722",
            "color": "#FAFAFA",
        },
        {
            "backgroundColor": "#D32F2F",
            "color": "#FAFAFA",
            "fontWeight": "bold"
        },
        {
            "backgroundColor": "#FF5722",
            "color": "#FAFAFA",
        }
    ]
},

效果: