prettier-ast-explorer はPrettierへの貢献のための AST エクスプローラです。

Prettier の開発中にPlaygroundで AST を見ることがあります。しかし、Playground ではエディタでコードを変更すると AST 側のスクロール位置が一番上までもどってしまったり、ツリーの折りたたみができなかったりと、いくつか使い勝手に問題があります。そのため、新しい AST エクスプローラを開発することを考えました。

• 左側のテキストエディタに JavaScript(もしくは TypeScript)でコードを書くと、それをパースした AST が右側に表示されます。
  • テキストエディタにはAce Editorを使用しています。
  • JSON ツリーのビューワーにはredux 開発者ツールに使われているreact-json-treeを使用しています。
• Prettier に使われているパーサー(prettier.__debug.parse)を使用しています。
  • また、パースは Web Worker 上で行います。