VS扩展开发：如何为特定HTML属性内容指定IClassifierProvider？

要让HTML中v-for、v-if这类特定属性的内容像JS/TS一样着色，不需要重新实现一套JS语法分析，而是可以通过以下步骤实现：

具体实现步骤 #

1. 定位目标属性的内容范围 #

首先需要在HTML文档中精准识别出v-for、v-if属性值的文本范围（即引号包裹的部分）。可以借助VS内置的HTML语法树API，或者轻量的HTML解析逻辑，筛选出符合条件的属性值区间，注意处理单双引号、转义引号等边界情况。

2. 实现代理分类器 #

创建一个针对HTML的自定义IClassifier，它本身不做着色逻辑，而是作为代理：

• 筛选出目标属性值的文本范围
• 将这些范围的文本转发给VS内置的JavaScript/TypeScript分类器
• 把JS分类器返回的着色结果，位置映射回原HTML文档的对应区间

3. 注册分类器Provider #

实现IClassifierProvider并通过MEF注册，指定其关联的ContentType为HTML，但仅处理目标属性的内容区域。通过依赖注入获取VS内置的JS/TS分类器实例，确保复用官方的着色规则。

简化代码示例 #

[Export(typeof(IClassifierProvider))]
[ContentType("html")]
internal class VueAttributeClassifierProvider : IClassifierProvider
{
    [Import]
    internal IClassifierAggregatorService ClassifierAggregator { get; set; }

    public IClassifier GetClassifier(ITextBuffer textBuffer)
    {
        // 获取内置的JS分类器
        var jsClassifier = ClassifierAggregator.GetClassifier(textBuffer.ContentTypeRegistry.GetContentType("JavaScript"));
        return textBuffer.Properties.GetOrCreateSingletonProperty(() => new VueAttributeClassifier(jsClassifier, textBuffer));
    }
}

internal class VueAttributeClassifier : IClassifier
{
    private readonly IClassifier _jsClassifier;
    private readonly ITextBuffer _buffer;

    public VueAttributeClassifier(IClassifier jsClassifier, ITextBuffer buffer)
    {
        _jsClassifier = jsClassifier;
        _buffer = buffer;
    }

    public event EventHandler<ClassificationChangedEventArgs> ClassificationChanged;

    public IList<ClassificationSpan> GetClassificationSpans(SnapshotSpan span)
    {
        var result = new List<ClassificationSpan>();
        // 解析当前快照，找到v-for、v-if的属性值范围
        var targetSpans = ExtractVueAttributeValueSpans(span);

        foreach (var attrSpan in targetSpans)
        {
            // 提取属性值文本，生成临时快照供JS分类器处理
            var jsContent = attrSpan.GetText();
            var tempSnapshot = new StringTextSnapshot(jsContent);
            var tempSpan = new SnapshotSpan(tempSnapshot, 0, jsContent.Length);

            // 获取JS分类结果
            var jsClassifications = _jsClassifier.GetClassificationSpans(tempSpan);

            // 将JS分类的位置映射回HTML文档
            foreach (var jsSpan in jsClassifications)
            {
                var htmlStart = attrSpan.Start + jsSpan.Span.Start.Position;
                var htmlSpan = new SnapshotSpan(span.Snapshot, htmlStart, jsSpan.Span.Length);
                result.Add(new ClassificationSpan(htmlSpan, jsSpan.ClassificationType));
            }
        }
        return result;
    }

    // 核心：解析HTML，筛选目标属性值的范围（需自行完善解析逻辑）
    private IList<SnapshotSpan> ExtractVueAttributeValueSpans(SnapshotSpan span)
    {
        var spans = new List<SnapshotSpan>();
        var text = span.GetText();
        // 示例逻辑：匹配v-for="xxx"或v-if="xxx"的引号内容
        var regex = new Regex(@"(v-for|v-if)\s*=\s*[""']([^""']*)[""']");
        foreach (Match match in regex.Matches(text))
        {
            var valueGroup = match.Groups[2];
            var start = span.Start + valueGroup.Index;
            var length = valueGroup.Length;
            spans.Add(new SnapshotSpan(span.Snapshot, start, length));
        }
        return spans;
    }
}

注意事项 #

• 解析准确性：要处理属性值中的转义引号、多行属性值等场景，避免范围识别错误
• 性能优化：仅处理当前请求的SnapshotSpan覆盖区域，不要全量解析文档，防止编辑器卡顿
• ContentType兼容：确保JS分类器的ContentType配置正确，同时支持TypeScript的话，需要关联对应的ContentType

内容的提问来源于stack exchange，提问作者John C