web-dev-qa-db-ja.com

vscodeで独自のコードアウトラインレイアウトを実装するにはどうすればよいですか？

カスタムコードのアウトラインを定義できるVisualStudio 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の拡張機能があるかどうかを知りたいです。

like this

クリック可能だったらいいのに。定義にナビゲート/移動し、より複雑なコードの場合は拡張可能。

私がこれまでに見つけたもの。

  1. vscode codeoutlinehttps://github.com/patrys/vscode-code-outline 、私はそれを除いてこの拡張機能が好きです私の言語では機能しません。 。jsファイルのサンプル画像

  2. 関数の表示https://marketplace.visualstudio.com/items?itemName=qrti.funclist

  3. notepad ++のSourcecookifier（私がやりたいことはできますが、notepad ++の場合は明らかに）

Vscode/settingsファイルで簡単にカスタマイズできる2番目の拡張機能（Show Functions）が好きです。設定から独自の正規表現を定義できます。ただし、エディタに固定されたアウトラインビューにはありません。さわやかなライブでもありません。

ツリービューにある最初の拡張機能も気に入っていますが、説明したレイアウトを実現するために設定を変更する方法と場所がわからないようです。

誰かが私を正しい方向に向けることができれば、それは非常にありがたいです。私はすでにコードアウトライン拡張のドキュメントを少し試しましたが、それは私には意味がないと思います。

PS：StackOverflowの最初の投稿で、追加/変更する必要があるものがあるかどうかをお知らせください。

前もって感謝します。

visual-studio-codevscode-extensions
13
Yuli Hua

さて、私のリクエストは解決されました。

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として保存し、構文（質問のサンプルコード）を入力すると、カスタムアウトラインが表示されます。

以下の結果リンクに見られるように、他のケースを検討するためにマッパーを（意図的に）定義していません。私のマッパーはまだ初期状態です。この質問を投稿したことを忘れる前に、調査結果を共有したいと思っていました...

result

5
Yuli Hua

VS Codeの最近のバージョンには、サードパーティの拡張機能（自分で作成する必要があるものを除く）に依存することなく、アウトラインビューにデータを入力するためのAPIがあります。

これは、 DocumentSymbolProvider を登録することで機能します。

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

これにより、アウトラインビューでフラット構造またはツリー構造が可能になります（2つを混在させることはできません）。

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 を参照してください。

1
Svaberg