如何在 vscode 中實現我自己的代碼大綱布局？

Question

我正在尋找 Visual Studio Code (vscode) 中的擴展，我可以在其中定義我的自定義代碼大綱。 本質上，以樹狀方式列出我所有的函數/定義。

假設我正在使用一種如下所示的簡單語言：

begin foo1 arriving procedure
  move into queue1
  print queue1
  send to foo2 
end

begin foo2 arriving procedure
  move into queue2
  print queue2
  send to foo3
end

我想知道是否有 vscode 的擴展，讓我實現這樣的事情：

如果可以點擊就好了。 導航/轉到定義，並且在更復雜的代碼的情況下可以擴展。

到目前為止我發現了什么。

1. vscode 代碼大綱https://github.com/patrys/vscode-code-outline ，我喜歡這個擴展，除了它不適用於我的語言。 .js 文件的示例圖像

2. 顯示功能https://marketplace.visualstudio.com/items?itemName=qrti.funclist

3. Sourcecookifier記事本++（可以做我想做的，但對於記事本++明顯）

我喜歡第二個擴展（Show Functions），因為它可以在 vscode/settings 文件中輕松定制。 您可以從設置中定義自己的正則表達式。 但是，它不在編輯器固定的大綱視圖中。 也不是令人耳目一新的生活。

我也喜歡第一個擴展，因為它在樹視圖中，但我似乎不知道如何以及在何處修改設置以實現我所描述的布局。

如果有人能指出我正確的方向，我將不勝感激。 我已經嘗試了一些代碼大綱擴展的文檔，但我認為這對我沒有任何意義。

PS：關於 StackOverflow 的第一篇文章請讓我知道是否有我應該添加/更改的內容。

提前致謝。

Answer 1

好的，我的要求現在解決了。

CodeMap 擴展，基本上是我正在尋找的擴展。

我在https://github.com/oleg-shilo/codemap.vscode/wiki/Adding-custom-mappers上遵循了他們的指南

我創建了一個自定義的專用映射器“mapper_X.js”將其保存到任意位置，並在我的 vscode 用戶設置中粘貼了"codemap.X": "mylocation\\\\mapper_X.js", （如 github 指南中所述） . 然后我打開一個新文件，將它保存為 untitled.X 並輸入一些語法（我問題中的示例代碼），現在我可以看到我的自定義大綱。

從下面的結果鏈接中可以看出，我（故意）還沒有定義我的映射器來考慮任何其他情況。 我的映射器仍處於起步階段。 只是想在我忘記發布這個問題之前分享我的發現......

Answer 2

在 VS Code 的最新版本中，有一個 API 可用於填充大綱視圖，而無需依賴第三方擴展（除了您需要自己編寫的擴展）。

這通過注冊DocumentSymbolProvider 。

export function activate(context: vscode.ExtensionContext) {
    context.subscriptions.push(
        vscode.languages.registerDocumentSymbolProvider(
            {scheme: "file", language: "swmf-config"}, 
            new SwmfConfigDocumentSymbolProvider())
    );
}

這允許在大綱視圖中使用平面結構或樹結構（兩者不能混合）。

class SwmfConfigDocumentSymbolProvider implements vscode.DocumentSymbolProvider {
    public provideDocumentSymbols(
        document: vscode.TextDocument,
        token: vscode.CancellationToken): Promise<vscode.DocumentSymbol[]> {
        return new Promise((resolve, reject) => {
            let symbols: vscode.DocumentSymbol[] = [];
            for (var i = 0; i < document.lineCount; i++) {
                var line = document.lineAt(i);
                if (line.text.startsWith("#")) {
                    let symbol = new vscode.DocumentSymbol(
                        line.text, 'Component',
                        vscode.SymbolKind.Function,
                        line.range, line.range)
                    symbols.push(symbol)
                }
            }
            resolve(symbols);
        });
    }
}

有關在大綱視圖中給出樹結構的小型完整示例，請參閱https://github.com/svaberg/SWMF-grammar