monaco-prettier

1.0.0 verified Sat Apr 25 auth: no javascript

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).

Common errors

error Error: Module not found: 'monaco-prettier/worker' ↓

cause 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.

error TypeError: configureMonacoPrettier is not a function ↓

cause 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.

error The builtin formatting continues to override Prettier output ↓

cause Did not disable Monaco's built-in formatting providers for the target language.

fix

Call setModeConfiguration for each language as shown in the quickstart.

error Prettier worker not loading: Error: Unknown label prettier ↓

cause 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.

Warnings

gotcha Monaco'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.

breaking The default export is deprecated in favor of the named configureMonacoPrettier export. ↓

fix Use import { configureMonacoPrettier } from 'monaco-prettier' instead of the default import.

gotcha 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. ↓

fix Always create a worker entry point that calls setup, then reference it in MonacoEnvironment.getWorker.

gotcha The 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.).

Install

npm install monaco-prettier

yarn add monaco-prettier

pnpm add monaco-prettier

Imports

configureMonacoPrettier

wrong

const { configureMonacoPrettier } = require('monaco-prettier')

correct

import { configureMonacoPrettier } from 'monaco-prettier'

This package is ESM-only (exports field in package.json). CommonJS require will fail.

setup
wrong
```
import { setup } from 'monaco-prettier'
```
correct
```
import { setup } from 'monaco-prettier/worker'
```
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).

Quickstart

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'));