{"id":20225,"library":"monaco-prettier","title":"monaco-prettier","description":"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).","status":"active","version":"1.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/remcohaszing/monaco-prettier","tags":["javascript","monaco","monaco-editor","prettier"],"install":[{"cmd":"npm install monaco-prettier","lang":"bash","label":"npm"},{"cmd":"yarn add monaco-prettier","lang":"bash","label":"yarn"},{"cmd":"pnpm add monaco-prettier","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency; the package uses Prettier's formatting APIs.","package":"prettier","optional":false}],"imports":[{"note":"This package is ESM-only (exports field in package.json). CommonJS require will fail.","wrong":"const { configureMonacoPrettier } = require('monaco-prettier')","symbol":"configureMonacoPrettier","correct":"import { configureMonacoPrettier } from 'monaco-prettier'"},{"note":"setup is exported from the subpath 'monaco-prettier/worker', not the main package.","wrong":"import { setup } from 'monaco-prettier'","symbol":"setup","correct":"import { setup } from 'monaco-prettier/worker'"},{"note":"Default export is the configureMonacoPrettier function (named export is preferred).","wrong":"","symbol":"default import","correct":"import monacoPrettier from 'monaco-prettier'"}],"quickstart":{"code":"// prettier.worker.js\nimport { setup } from 'monaco-prettier/worker';\nimport * as babel from 'prettier/plugins/babel';\nimport * as estree from 'prettier/plugins/estree';\nsetup([babel, estree]);\n\n// app.js\nimport * as monaco from 'monaco-editor';\nimport { configureMonacoPrettier } from 'monaco-prettier';\n\nglobalThis.MonacoEnvironment = {\n  getWorker(moduleId, label) {\n    if (label === 'prettier') {\n      return new Worker(new URL('prettier.worker.js', import.meta.url));\n    }\n    return new Worker(new URL('monaco-editor/esm/vs/editor/editor.worker.js', import.meta.url));\n  }\n};\n\nmonaco.languages.typescript.javascriptDefaults.setModeConfiguration({\n  documentFormattingEdits: false,\n  documentRangeFormattingEdits: false\n});\n\nconfigureMonacoPrettier(monaco, {\n  parsers: {\n    javascript: 'babel',\n    typescript: 'babel-ts'\n  },\n  prettier: {\n    semi: false,\n    singleQuote: true\n  }\n});\n\nmonaco.editor.createModel('const x = 1', 'javascript', monaco.Uri.parse('file:///test.js'));","lang":"javascript","description":"Shows how to set up a Prettier worker and configure Monaco to use it for formatting JavaScript files."},"warnings":[{"fix":"For each language you want Prettier to handle, set documentFormattingEdits and documentRangeFormattingEdits to false in setModeConfiguration.","message":"Monaco's built-in formatting providers must be disabled per language, otherwise they will override Prettier formatting.","severity":"gotcha","affected_versions":">=1.0"},{"fix":"Use import { configureMonacoPrettier } from 'monaco-prettier' instead of the default import.","message":"The default export is deprecated in favor of the named configureMonacoPrettier export.","severity":"breaking","affected_versions":">=1.0"},{"fix":"Always create a worker entry point that calls setup, then reference it in MonacoEnvironment.getWorker.","message":"The 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.","severity":"gotcha","affected_versions":">=1.0"},{"fix":"Check Monaco language IDs (javascript, typescript, css, json, html, etc.) and use Prettier parser names (babel, babel-ts, css, json, html, etc.).","message":"The parsers option keys must exactly match Monaco language IDs (e.g., 'javascript' not 'js'), and the values must be Prettier parser names.","severity":"gotcha","affected_versions":">=1.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Ensure your bundler supports the 'exports' field or import from the resolved path. Alternatively, use a dynamic import in a worker file.","cause":"Using a bundler that doesn't support package.json exports (e.g., older webpack) or not running in a worker context.","error":"Error: Module not found: 'monaco-prettier/worker'"},{"fix":"Use import { configureMonacoPrettier } from 'monaco-prettier' . If using CJS, switch to ESM.","cause":"Importing the default export instead of named export, or CommonJS require failing.","error":"TypeError: configureMonacoPrettier is not a function"},{"fix":"Call setModeConfiguration for each language as shown in the quickstart.","cause":"Did not disable Monaco's built-in formatting providers for the target language.","error":"The builtin formatting continues to override Prettier output"},{"fix":"Add a case for label 'prettier' that returns your worker. The worker URL must match your bundler's setup.","cause":"MonacoEnvironment.getWorker does not have a case for 'prettier' label.","error":"Prettier worker not loading: Error: Unknown label prettier"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}