graphql / graphql/graphiql

API Proposal: Code Formatting, Prettier

Open
#1,517 4 comments 28 reactions 0 assignees View on GitHub
graphiql monaco-graphql proposal
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**

![A basic example of formatting graphql with monaco using key shortcuts, context menu and command palette](https://user-images.githubusercontent.com/1368727/80656710-d3484600-8a4f-11ea-9739-68374699840b.gif)

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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.