API Proposal: Code Formatting, Prettier
- Dominant language
- TypeScript
- Stars
- 16.9k
- Forks
- 1.9k
- Avg merge
- 22h 45m
- Merged PRs (30d)
- 70
Description
**Currently**:
We aren't using prettier, instead a lightweight custom solution that has issues, and is not configurable.
**Proposed**
- Use prettier for graphql, json, yaml, etc.
- make it fully configurable by users
- make it available via command palette, right click context menu, and key commands
- allow formatting on paste, format range, etc
- asynchronously imports prettier standalone/graphql parser (500kb minified!)
- offload computationally expensive work to the webworker process, to increase scalability for large operations or variables.
**RFC In Progress**

This PR implements all of the above using monaco and a new language service class: https://github.com/acao/graphiql/pull/17
It performs the prettier parsing and formatting entirely in the monaco language service webworker thread, and integrates cleanly with monaco's built in formatting provider capabilities. Thus why format on paste, etc is built in! hooray monaco
**Todo**
- Document `monaco-graphql` formatting configuration API
- allow a `formattingConfiguration` prop to pass to new monaco-graphql API
- document how to use new GraphiQL `editorConfig` prop to enable `formatOnPaste`
- expose API to programatically format operation (for an eventual button)
Originally, we were going to make this a plugin, however, the formatting is already so tightly integrated with monaco, and we asynchronously load prettier on the first format run so, it's not as daunting as it had seemed before. 500kb is a LOT to consider. `prettier/standalone` sounds small, but check it out on bundle phobia
Contributor guide
Assessment
This issue has not been assessed yet.