Edited at

C#の構文木を可視化するVSCode拡張の作成してみた

More than 3 years have passed since last update.


C#の構文木を可視化するVSCode拡張の作成

C#の構文をroslynで解析して、graphvizで図に出す拡張を作ってみた。

https://marketplace.visualstudio.com/items?itemName=itn3000.cs-syntax-visualizer

cs-syntax-visualizer-partial.png


背景

以下のような経緯


  1. roslynの構文木ってgraphvizで表せそうかな

  2. 実際作ってみよう

  3. コマンドラインではできた

  4. エディタ連携したらもっと使いやすいかな

  5. vscode普段使ってるから、これで使えたら便利かな


  6. plantuml拡張と似たようなことやってるし、作れそうだな

  7. じゃあ拡張で作ろう、Typescriptの勉強にもなるし


動作条件

READMEにも書いてあるけど、以下のものが必要


  • dotnet cli 1.0.0


  • graphviz


    • GRAPHVIZ_DOT環境変数を設定するか、vscodeの設定でcssyntaxvisualizer.dotsPath設定が必要




使い方

拡張をインストールすると、以下のようなコマンドが追加される



  • Visualize C# syntax tree of whole file


    • アクティブなドキュメントの構文木を解析して図に出す




  • Visualize C# syntax tree of selected text


    • 選択範囲のみ解析して図に出す




  • Export visualized C# syntax tree as [フォーマット]


    • アクティブなドキュメントの構文木をファイルに出力する