Registry / monaco-prettier

monaco-prettier

JSON →
library1.0.0jsnpmunverified

Integrates Prettier formatting into the Monaco editor. v1.0.0 (initial release) provides document and range formatting via a dedicated Monaco worker for performance. Requires a peer dependency on Prettier v3+. Configure per-language parsers and Prettier options. Unlike other Monaco formatter setups, this package uses a web worker to avoid blocking the UI, and supports any Prettier plugin (e.g., babel, estree, prettier-plugin-svelte).

npm install monaco-prettier
INSTALL
IMPORT
SIG · MONACO-PRETTIER
M
monaco-prettier
javascriptv1.0.0
Install
Import
Disk
Pass rate
0/ 6
Env Coverage0 / 6
glibc
1822
musl
1822
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
musl
node 18226 runs
build_error
glibc
node 18226 runs
build_error
Code
Verified usage

Verified import paths — ran on the pinned version, not inferred.

configureMonacoPrettier
import { configureMonacoPrettier } from 'monaco-prettier'
const { configureMonacoPrettier } = require('monaco-prettier')
This package is ESM-only (exports field in package.json). CommonJS require will fail.
setup
import { setup } from 'monaco-prettier/worker'
import { setup } from 'monaco-prettier'
setup is exported from the subpath 'monaco-prettier/worker', not the main package.
default import
import monacoPrettier from 'monaco-prettier'
Default export is the configureMonacoPrettier function (named export is preferred).

Shows how to set up a Prettier worker and configure Monaco to use it for formatting JavaScript files.

// prettier.worker.js import { setup } from 'monaco-prettier/worker'; import * as babel from 'prettier/plugins/babel'; import * as estree from 'prettier/plugins/estree'; setup([babel, estree]); // app.js import * as monaco from 'monaco-editor'; import { configureMonacoPrettier } from 'monaco-prettier'; globalThis.MonacoEnvironment = { getWorker(moduleId, label) { if (label === 'prettier') { return new Worker(new URL('prettier.worker.js', import.meta.url)); } return new Worker(new URL('monaco-editor/esm/vs/editor/editor.worker.js', import.meta.url)); } }; monaco.languages.typescript.javascriptDefaults.setModeConfiguration({ documentFormattingEdits: false, documentRangeFormattingEdits: false }); configureMonacoPrettier(monaco, { parsers: { javascript: 'babel', typescript: 'babel-ts' }, prettier: { semi: false, singleQuote: true } }); monaco.editor.createModel('const x = 1', 'javascript', monaco.Uri.parse('file:///test.js'));
Debug
Known issues
gotchaMonaco's built-in formatting providers must be disabled per language, otherwise they will override Prettier formatting.
fix
For each language you want Prettier to handle, set documentFormattingEdits and documentRangeFormattingEdits to false in setModeConfiguration.
affects: >=1.0
breakingThe default export is deprecated in favor of the named configureMonacoPrettier export.
fix
Use import { configureMonacoPrettier } from 'monaco-prettier' instead of the default import.
affects: >=1.0
gotchaThe worker setup must be done in a separate file (e.g., prettier.worker.js) and imported as a worker URL; importing 'monaco-prettier/worker' directly in the main thread will fail.
fix
Always create a worker entry point that calls setup, then reference it in MonacoEnvironment.getWorker.
affects: >=1.0
gotchaThe parsers option keys must exactly match Monaco language IDs (e.g., 'javascript' not 'js'), and the values must be Prettier parser names.
fix
Check Monaco language IDs (javascript, typescript, css, json, html, etc.) and use Prettier parser names (babel, babel-ts, css, json, html, etc.).
affects: >=1.0
Errors
Common errors & fixes
Error: Module not found: 'monaco-prettier/worker'
Using a bundler that doesn't support package.json exports (e.g., older webpack) or not running in a worker context.
fix
Ensure your bundler supports the 'exports' field or import from the resolved path. Alternatively, use a dynamic import in a worker file.
TypeError: configureMonacoPrettier is not a function
Importing the default export instead of named export, or CommonJS require failing.
fix
Use import { configureMonacoPrettier } from 'monaco-prettier' . If using CJS, switch to ESM.
The builtin formatting continues to override Prettier output
Did not disable Monaco's built-in formatting providers for the target language.
fix
Call setModeConfiguration for each language as shown in the quickstart.
Prettier worker not loading: Error: Unknown label prettier
MonacoEnvironment.getWorker does not have a case for 'prettier' label.
fix
Add a case for label 'prettier' that returns your worker. The worker URL must match your bundler's setup.
Upgrade
Version history
1.0.0latest on npm
Audit
Dependencies
prettierrequiredPeer dependency; the package uses Prettier's formatting APIs.
Agent activity
2 hits · last 30 days
node
2
Resources
monaco-prettier — npm install monaco-prettier · libregistry