如何在 VS Code 中以自定义 HTML 模式实现点击？

Question

我想在扩展中实现类似于 HTML 模板中的 Go To Definition 的功能。

例如，按住 ctrl 键并单击该路径将打开一个编辑器，其中的文件位于该路径：

{% include "relative/path/to/snippet.html" %}

你有任何指向相关文档的指针，在任何做类似事情的回购上吗？

我是 VSCode 扩展的新手，也是 Intellisense 的新手，所以我需要一些示例。

我想应该包括：

正在解析 HTML/text 文件以找到相关的可点击区域
告诉 IntelliSense 做一些有趣的事情
实现花哨的东西（我最终会弄清楚这部分）

Answer 1

此功能由 DefinitionProvider 提供支持。您的扩展程序可以创建一个自定义定义提供程序，该提供程序仅为您感兴趣的路径提供 returns 个结果。该提供程序将使用 registerDefinitionProvider 注册为 html 语言模式

这看起来像：

import * as vscode from 'vscode';
import * as path from 'path'

class MyProvider implements vscode.DefinitionProvider {
    provideDefinition(document: vscode.TextDocument, position: vscode.Position, token: vscode.CancellationToken): vscode.ProviderResult<vscode.Definition> {

        const linkText = getLinkText(document, position); // implement this

        if (! linkText) { 
            return null;
        }

        const workspace = vscode.workspace.getWorkspaceFolder(document.uri);
        const root = workspace ? workspace.uri : document.uri;

        return new vscode.Location(
            root.with({
                path: path.join(root.path, linkText)
            }),
            new vscode.Position(0, 0));
    }
}

vscode.languages.registerDefinitionProvider('html', new MyProvider());

如何在 VS Code 中以自定义 HTML 模式实现点击？

How to implement a click through in custom HTML mode in VS Code?

javascript

visual-studio-code

vscode-extensions