VSCode颜色提供者定制开发-VSCode-PHP中文网

VSCode颜色提供者定制开发

幻影之瞳

发布： 2025-10-21 16:44:01

原创

987人浏览过

颜色提供者可在VSCode中为CSS等语言的颜色值显示预览块并支持调色板修改。通过实现DocumentColorProvider接口，注册provideDocumentColors解析如#FF5733、rgb(255,87,51)等格式，提取文本范围与颜色对象，再通过provideColorPresentations返回格式化建议，最后在package.json中声明语言支持并测试验证。

vscode颜色提供者定制开发

在 VSCode 中开发颜色提供者（Color Provider）可以让扩展为特定语言文件中的颜色值提供可视化支持，比如在 CSS、SCSS 或自定义 DSL 中显示颜色块。如果你希望为某种语言定制颜色识别与渲染，可以通过实现 DocumentColorProvider 接口来完成。

1. 颜色提供者的功能作用

颜色提供者允许编辑器：

识别代码中表示颜色的文本（如 #FF5733、rgb(255, 87, 51)、red 等）
在编辑器行尾或内联显示颜色预览块
支持用户点击颜色块打开调色板进行修改

这提升了样式编写和调试的直观性。

2. 实现步骤

要开发一个自定义颜色提供者，需按以下流程操作：

注册 DocumentColorProvider

在 extension.ts 中通过 vscode.languages.registerColorProvider 注册提供者，并指定适用的语言。

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
  const provider = vscode.languages.registerColorProvider(
    { scheme: 'file', language: 'css' }, // 可替换为你的语言
    new MyColorProvider()
  );

  context.subscriptions.push(provider);
}

登录后复制

实现 ColorProvider 类

AI角色脑洞生成器

一键打造完整角色设定，轻松创造专属小说漫画游戏角色背景故事

107

查看详情

创建类实现 provideDocumentColors 和 provideColorPresentations 方法。

class MyColorProvider implements vscode.DocumentColorProvider {
  provideDocumentColors(
    document: vscode.TextDocument,
    token: vscode.CancellationToken
  ): vscode.ColorInformation[] {
    const colors: vscode.ColorInformation[] = [];
    const text = document.getText();
    const regex = /#([0-9A-Fa-f]{3,8})\b|rgba?\([^)]+\)/g;
    let match;

    while ((match = regex.exec(text))) {
      const start = document.positionAt(match.index);
      const end = document.positionAt(match.index + match[0].length);
      const range = new vscode.Range(start, end);

      // 解析颜色值
      let color: vscode.Color;
      if (match[0].startsWith('#')) {
        const hex = match[1];
        const r = parseInt(hex.slice(0, Math.min(2, hex.length)), 16) / (hex.length >= 2 ? 255 : 15);
        const g = hex.length > 2 ? parseInt(hex.slice(2, 4), 16) / (hex.length === 3 || hex.length === 4 ? 15 : 255) : r;
        const b = hex.length > 4 ? parseInt(hex.slice(4, 6), 16) / 255 : g;
        const a = hex.length === 8 ? parseInt(hex.slice(6, 8), 16) / 255 : 1;
        color = new vscode.Color(r, g, b, a);
      } else {
        // 处理 rgb/rgba
        const parts = match[0].match(/[\d.]+/g)?.map(Number) || [];
        color = new vscode.Color(parts[0]/255, parts[1]/255, parts[2]/255, parts[3] !== undefined ? parts[3] : 1);
      }

      colors.push(new vscode.ColorInformation(range, color));
    }

    return colors;
  }

  provideColorPresentations(
    color: vscode.Color,
    context: { document: vscode.TextDocument; range: vscode.Range },
    token: vscode.CancellationToken
  ): vscode.ColorPresentation[] {
    // 提供颜色格式建议，比如转换成 #RRGGBB 或 rgba()
    return [
      new vscode.ColorPresentation(`#${Math.round(color.red * 255).toString(16)}${Math.round(color.green * 255).toString(16)}${Math.round(color.blue * 255).toString(16)}`)
    ];
  }
}

登录后复制

3. package.json 配置

确保你的扩展声明了对颜色功能的支持（非必须，但有助于语义化）：

```json "contributes": { "languages": [ { "id": "my-lang", "aliases": ["MyLang"], "extensions": [".mylang"] } ], "grammars": [ ... ] }, "activationEvents": [ "onLanguage:my-lang" ] ```

VSCode 会在匹配语言时激活你的提供者。