https://github.com/sosukesuzuki/prettier-ast-explorer

AST explorer for contribution to Prettier
https://github.com/sosukesuzuki/prettier-ast-explorer

ast ast-explorer estree prettier typescript

Last synced: about 1 year ago
JSON representation

AST explorer for contribution to Prettier

• Host: GitHub
• URL: https://github.com/sosukesuzuki/prettier-ast-explorer
• Owner: sosukesuzuki
• Created: 2019-09-07T15:40:21.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2023-01-07T09:28:11.000Z (over 3 years ago)
• Last Synced: 2025-03-17T23:44:39.756Z (over 1 year ago)
• Topics: ast, ast-explorer, estree, prettier, typescript
• Language: TypeScript
• Homepage: https://ast-explorer.netlify.com
• Size: 3.58 MB
• Stars: 6
• Watchers: 1
• Forks: 0
• Open Issues: 21
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# prettier-ast-explorer

[![Netlify Status](https://api.netlify.com/api/v1/badges/1cfd2d99-31b9-4988-ad6e-75589a920de8/deploy-status)](https://app.netlify.com/sites/ast-explorer/deploys)

![screenshot](./resources/screenshot.jpg)

## これは何？

prettier-ast-explorer は[Prettier](https://github.com/prettier/prettier)への貢献のための AST エクスプローラです。

## なぜこれを使うの？

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

## どんな機能があるの？

-   左側のテキストエディタに JavaScript(もしくは TypeScript)でコードを書くと、それをパースした AST が右側に表示されます。

    -   テキストエディタには[Ace Editor](https://ace.c9.io/)を使用しています。

    -   JSON ツリーのビューワーには[redux 開発者ツール](https://github.com/reduxjs/redux-devtools)に使われている[react-json-tree](https://github.com/reduxjs/redux-devtools/tree/master/packages/react-json-tree)を使用しています。

-   Prettier に使われているパーサー(`prettier.__debug.parse`)を使用しています。

    -   また、パースは Web Worker 上で行います。