VSCode 插件开发小记：高亮自定义主题

2023-11-19 21:37:27

自定义 VSCode 中的代码高亮显示，简化插件开发

前言

VSCode 作为一款出色的代码编辑器，提供了丰富的自定义选项，其中包括主题样式。开发者可以通过修改主题样式来自定义代码高亮显示效果，但由于变量表示的颜色不易记忆，在编码过程中需要频繁查阅文档，降低了开发效率。本文将介绍一种简便的方法，在编写代码时就能直观地了解当前变量所表示的颜色，从而简化插件开发流程。

VSCode 主题自定义

VSCode 主题是一个 JSON 文件，定义了文本、背景、边框等 UI 元素的颜色。要自定义主题，只需创建一个新的 JSON 文件，并将其保存为 .json 文件扩展名即可。

例如，创建名为 "My Theme" 的自定义主题：

{
  "name": "My Theme",
  "colors": {
    "editor.background": "#ffffff",
    "editor.foreground": "#000000"
  }
}

在 "设置"（Ctrl+，）中搜索 "主题"，然后从下拉列表中选择 "我的主题" 即可应用自定义主题。

使用扩展 API 获取变量颜色

为了在编码时获取变量颜色，可以使用 VSCode 扩展 API 中的 vscode.workspace.getConfiguration 函数。该函数可以获取用户设置或工作区设置，包括主题配置。

获取 editor.background 变量的颜色：

const vscode = require('vscode');

const config = vscode.workspace.getConfiguration('editor');
const color = config.get('editor.background');

console.log(color);

示例：自定义颜色高亮

结合上述知识，我们可以编写一个扩展，在编码时高亮显示变量的颜色。

const vscode = require('vscode');

vscode.workspace.onDidChangeConfiguration(() => {
  const config = vscode.workspace.getConfiguration('editor');
  const color = config.get('editor.background');

  vscode.window.activeTextEditor.document.decoration = {
    ranges: [
      {
        start: new vscode.Position(0, 0),
        end: new vscode.Position(0, 0)
      }
    ],
    hoverMessage: `Current color: ${color}`,
    backgroundColor: color
  };
});