Swap prettier for oxfmt (except runtime) (#4204)

## Context

Oxfmt is a fast drop-in replacement for prettier that's already seeing
widespread adoption.
https://oxc.rs/blog/2026-02-24-oxfmt-beta.html

## Changes

Swap repo's formatter for `oxfmt`. Runtime `prettier` usage remains
untouched.

- Add oxfmt, remove root prettier dev dep
- Migrate `.prettierrc` → `.oxfmtrc.json` (via `oxfmt
--migrate=prettier`)
- Rename scripts: `pretty` → `format`, `pretty-check` → `format-check`,
`format` → `fix`
- Update CI workflow to use `format-check`
- Recommend oxc VS Code extension instead of prettier-vscode
- Add `svgo` for deterministic SVG formatting with a CI check
(`svgo-check`)
- Fix invalid ambient initializer in
`packages/graphiql-react/src/env.d.ts` (`var __MONACO = monaco` → `var
__MONACO: typeof monaco`)
- Refactor whitespace-sensitive assertion in `parseDocument.test.ts` to
use `.join('\n')` so the formatter can't alter it

### Remaining `ignorePatterns`

- `schema-kitchen-sink.graphql` — contains spec-invalid GraphQL (`extend
type Foo @ontype {}`, `type NoFields {}`) that oxfmt can't parse. Fixing
requires updating the online parser in `graphql-language-service` (see
#4206).
- `**/CHANGELOG.md` — auto-generated by changesets

Author: trevor-scheer

.eslintrc.js

@@ -112,7 +112,7 @@ module.exports = {
         'no-extend-native': 'error',
         'no-extra-bind': 'error',
         'no-extra-label': 'error',
-        'no-floating-decimal': 'off', // prettier --list-different
+        'no-floating-decimal': 'off', // handled by formatter
         'no-implicit-coercion': 'error',
         'no-implicit-globals': 'off',
         'no-implied-eval': 'error',
@@ -225,7 +225,7 @@ module.exports = {
         'id-match': 'off',
         indent: 'off',
         'line-comment-position': 'off',
-        'linebreak-style': 'off', // prettier --list-different
+        'linebreak-style': 'off', // handled by formatter
         'lines-around-comment': 'off',
         'lines-around-directive': 'off',
         'max-depth': 'off',

.github/workflows/pr.yml

@@ -36,8 +36,8 @@ jobs:
       - run: yarn install --immutable
       - run: yarn lint-cspell
 
-  prettier:
-    name: Prettier
+  format:
+    name: Format
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
@@ -46,7 +46,8 @@ jobs:
           node-version-file: '.node-version'
           cache: yarn
       - run: yarn install --immutable
-      - run: yarn pretty-check
+      - run: yarn format-check
+      - run: yarn svgo-check
 
   jest:
     name: Jest Unit & Integration Tests

.oxfmtrc.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "./node_modules/oxfmt/configuration_schema.json",
+  "singleQuote": true,
+  "trailingComma": "all",
+  "arrowParens": "avoid",
+  "proseWrap": "never",
+  "printWidth": 80,
+  "sortPackageJson": false,
+  "ignorePatterns": [
+    "packages/codemirror-graphql/src/__tests__/schema-kitchen-sink.graphql",
+    "**/CHANGELOG.md"
+  ],
+  "overrides": [
+    {
+      "files": ["*.md", "*.mdx"],
+      "options": {
+        "proseWrap": "preserve"
+      }
+    }
+  ]
+}

.prettierignore

@@ -1,3 +1,3 @@
 {
-  "recommendations": ["dbaeumer.vscode-eslint", "esbenp.prettier-vscode"]
+  "recommendations": ["dbaeumer.vscode-eslint", "oxc.oxc-vscode"]
 }

.prettierrc

@@ -3,7 +3,6 @@
 Starting from GraphiQL 5, you need to set up Monaco workers in your project:
 
 - For **Vite** projects you must:
-
   1. Install `vite-plugin-monaco-editor` package:
 
   ```sh

.vscode/extensions.json

@@ -1,8 +1,8 @@
 # Settings in the [build] context are global and are applied to
 # all contexts unless otherwise overridden by more specific contexts.
 [build]
-  publish = "packages/graphiql"
+publish = "packages/graphiql"
 
-  # Default build command.
-  command = "yarn build && yarn build-bundles && yarn build-docs && yarn build-demo"
-  environment = { YARN_FLAGS = "--frozen-lockfile --immutable"}
+# Default build command.
+command = "yarn build && yarn build-bundles && yarn build-docs && yarn build-demo"
+environment = { YARN_FLAGS = "--frozen-lockfile --immutable" }