vscode：創建在自定義文件上運行 typescript 的語言服務擴展

Question

我通過運行yo code開始了一個 vscode 擴展項目，並選擇了“新語言支持”，就像 vscode 文檔一樣。

然后，我將語法 json 文件配置為包含“source.ts”以將所有內容突出顯示為 typescript：

{
    "$schema": "https://raw.githubusercontent.com/martinring/tmlanguage/master/tmlanguage.json",
    "name": "Sample",
    "fileTypes": [
        "sample"
    ],
    "patterns": [
        {
            "include": "source.ts"
        }
    ],
    "repository": {},
    "scopeName": "source.sample"
}

它有效：

問題是我只有高亮語法，我希望它可以運行 typescript 服務器來檢查類型並顯示 IntelliSense 代碼。

我的問題是：如何創建一個簡單的 vscode 語言服務以在“.sample”文件上應用 typescript？

Answer 1

我找到了一種方法，通過嵌入文件並使用中間件將它們發送到 typescript。

問題是 typescript 沒有將它包含在工作區中，因此您的功能將受到限制。 例如，intelliSense 僅適用於局部變量。

這是實現它的方法：

  const clientOptions: LanguageClientOptions = {
    documentSelector: [{ scheme: "file", language: "sample" }],
    middleware: {
      provideCompletionItem: async (document, position, context) => {
        // get a virtual uri for embedded language and create a map to 
        // reference back to the original file.
        // virtualUri: `embedded-content://ts/${originalUri}.ts`
        const virtualUri = getEmbeddedUri(document);

        const result =
          await vscode.commands.executeCommand<vscode.CompletionList>(
            "vscode.executeCompletionItemProvider",
            virtualUri,
            position,
            context.triggerCharacter
          );
        return result;
      },

您可以在此處查看 vscode 命令的完整列表： https://code.visualstudio.com/api/references/commands

如果你想查看一個完整的例子，這是我用這種方式實現的一個舊提交： https://github.com/estrelajs/estrela-vscode/tree/b9ac21b33daae09fd32ced93a5f2e4adf36c960a

真正的方法是使用 typescript package 上的typescript語言服務庫創建語言服務器。如果您想了解更多信息，請查看 svelte 語言服務存儲庫： https://github.com/sveltejs/語言工具/樹/主/包/語言服務器