{"id":28296100,"url":"https://github.com/remcohaszing/monaco-prettier","last_synced_at":"2026-05-04T13:31:15.861Z","repository":{"id":292390255,"uuid":"980773539","full_name":"remcohaszing/monaco-prettier","owner":"remcohaszing","description":"Use Prettier in Monaco editor","archived":false,"fork":false,"pushed_at":"2025-08-25T10:05:29.000Z","size":184,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-15T15:29:32.204Z","etag":null,"topics":["monaco","monaco-editor","prettier"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/remcohaszing.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":"remcohaszing"}},"created_at":"2025-05-09T17:32:35.000Z","updated_at":"2025-08-25T10:05:32.000Z","dependencies_parsed_at":"2025-05-09T17:55:47.273Z","dependency_job_id":"9edac0c9-2b79-43ba-994c-fdad7894d930","html_url":"https://github.com/remcohaszing/monaco-prettier","commit_stats":null,"previous_names":["remcohaszing/monaco-prettier"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/remcohaszing/monaco-prettier","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/remcohaszing%2Fmonaco-prettier","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/remcohaszing%2Fmonaco-prettier/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/remcohaszing%2Fmonaco-prettier/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/remcohaszing%2Fmonaco-prettier/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/remcohaszing","download_url":"https://codeload.github.com/remcohaszing/monaco-prettier/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/remcohaszing%2Fmonaco-prettier/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32609343,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-04T10:08:07.713Z","status":"ssl_error","status_checked_at":"2026-05-04T10:08:02.005Z","response_time":58,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["monaco","monaco-editor","prettier"],"created_at":"2025-05-22T19:17:46.144Z","updated_at":"2026-05-04T13:31:15.855Z","avatar_url":"https://github.com/remcohaszing.png","language":"TypeScript","funding_links":["https://github.com/sponsors/remcohaszing"],"categories":[],"sub_categories":[],"readme":"# monaco-prettier\n\n[![github actions](https://github.com/remcohaszing/monaco-prettier/actions/workflows/ci.yaml/badge.svg)](https://github.com/remcohaszing/monaco-prettier/actions/workflows/ci.yaml)\n[![npm version](https://img.shields.io/npm/v/monaco-prettier)](https://www.npmjs.com/package/monaco-prettier)\n[![npm downloads](https://img.shields.io/npm/dm/monaco-prettier)](https://www.npmjs.com/package/monaco-prettier)\n\n[Prettier](https://prettier.io) integratipn for\n[Monaco editor](https://microsoft.github.io/monaco-editor/).\n\n## Table of Contents\n\n- [Installation](#installation)\n- [Features](#features)\n- [Usage](#usage)\n- [API](#api)\n  - [`monaco-prettier`](#monaco-prettier-1)\n  - [`monaco-prettier/worker`](#monaco-prettierworker)\n  - [Options](#options-1)\n- [Compatibility](#compatibility)\n- [License](#license)\n\n## Installation\n\nThis package has a peer dependency on Prettier.\n\n```sh\nnpm install monaco-prettier prettier\n```\n\n## Features\n\nThis package integrates the [Prettier](https://prettier.io) formatter into\n[Monaco editor](https://microsoft.github.io/monaco-editor/). It uses a Monaco worker for efficiency.\nThe following Monaco editor features are supported:\n\n- Document formatting edits\n- Document range formatting edits\n\n## Usage\n\nFirst create a worker. Pass the desired Prettier plugins into the setup function.\n\n```js\n// prettier.worker.js\nimport { setup } from 'monaco-prettier/worker'\nimport * as babel from 'prettier/plugins/babel'\nimport * as estree from 'prettier/plugins/estree'\n\nsetup([\n  // Supports parsing JavaScript into estree\n  babel,\n  // Supports formatting estree\n  estree\n])\n```\n\nConfigure Monaco editor and Monaco Prettier in your application:\n\n```js\nimport * as monaco from 'monaco-editor'\nimport { configureMonacoPrettier } from 'monaco-prettier'\n\n// Configure the Monaco environment.\n// The exact syntax to define a worker, depends on your bundler. The following works for Webpack.\nglobalThis.MonacoEnvironment = {\n  getWorker(moduleId, label) {\n    switch (label) {\n      case 'editorWorkerService':\n        return new Worker(new URL('monaco-editor/esm/vs/editor/editor.worker.js', import.meta.url))\n      case 'css':\n        return new Worker(\n          new URL('monaco-editor/esm/vs/language/css/css.worker.js', import.meta.url)\n        )\n      case 'html':\n        return new Worker(\n          new URL('monaco-editor/esm/vs/language/html/html.worker.js', import.meta.url)\n        )\n      case 'json':\n        return new Worker(\n          new URL('monaco-editor/esm/vs/language/json/json.worker.js', import.meta.url)\n        )\n      case 'javascript':\n      case 'typescript':\n        return new Worker(\n          new URL('monaco-editor/esm/vs/language/typescript/ts.worker.js', import.meta.url)\n        )\n      // Register your Prettier worker.\n      case 'prettier':\n        return new Worker(new URL('prettier.worker.js', import.meta.url))\n      default:\n        throw new Error(`Unknown label ${label}`)\n    }\n  }\n}\n\n// Disable the builtin formatting providers.\nmonaco.languages.css.cssDefaults.setModeConfiguration({\n  documentFormattingEdits: false,\n  documentRangeFormattingEdits: false\n})\n\nmonaco.languages.json.jsonDefaults.setModeConfiguration({\n  documentFormattingEdits: false,\n  documentRangeFormattingEdits: false\n})\n\nmonaco.languages.typescript.javascriptDefaults.setModeConfiguration({\n  documentRangeFormattingEdits: false\n})\n\nmonaco.languages.typescript.typescriptDefaults.setModeConfiguration({\n  documentRangeFormattingEdits: false\n})\n\n// Configure Monaco Prettier\nconst printWidth = 80\nconfigureMonacoPrettier(monaco, {\n  // Map Monaco language IDs to a Prettier parser\n  parsers: {\n    javascript: 'babel',\n    javascriptreact: 'babel'\n  },\n\n  // Optionally define Prettier options.\n  prettier: {\n    printWidth,\n    proseWrap: 'always',\n    semi: false,\n    singleQuote: true,\n    trailingComma: 'none'\n  }\n})\n\n// Create a model\nconst model = monaco.editor.createModel(\n  'console.log(\"Hello world!\")',\n  undefined,\n  monaco.Uri.parse('file:///example.js')\n)\n// For the best experience, explicitly define formatting options on the model.\nmodel.updateOptions({\n  // Matches the inverse of Prettier option useTabs.\n  insertSpaces: false,\n  // Matches the Prettier option tabWidth.\n  tabSize: 2\n})\n\n// Create an editor\nconst editor = monaco.editor.create(document.getElementById('editor'), {\n  formatOnPaste: true,\n  model,\n  renderWhitespace: 'all',\n  renderFinalNewline: 'on',\n  renderControlCharacters: true,\n  rulers: [printWidth]\n})\n```\n\n## API\n\nThis package exports two modules.\n\n### `monaco-prettier`\n\nThis module can be used in the main thread.\n\n#### `configureMonacoPrettier(monaco, options)`\n\nConfigure Prettier as a formatter.\n\n##### Arguments\n\n- `monaco` (`MonacoEditor`) — The Monaco editor module to use.\n- `options` (`configureMonacoPrettier.Options`) — Options to configure the Monaco Prettier\n  integration.\n\n##### Options\n\n- `parsers` (`Record\u003cstring, string\u003e`) — A mapping of Monaco language IDs to prettier parser names.\n- `prettier` (`Object`, optional) — Prettier options.\n\n##### Arguments\n\nConfigure a Monaco Prettier worker.\n\n- `plugins` (`Plugin[]`) — The Prettier plugins to use.\n\n### `monaco-prettier/worker`\n\nThis module can be used in the web worker.\n\n#### `setup(plugins)`\n\n##### Arguments\n\nConfigure a Monaco Prettier worker.\n\n- `plugins` (`Plugin[]`) — The Prettier plugins to use.\n\n### Options\n\n## Compatibility\n\nThis project is compatible with\n[baseline widely available](https://developer.mozilla.org/en-US/docs/Glossary/Baseline/Compatibility).\n\n## License\n\n[MIT](LICENSE.md) © [Remco Haszing](https://github.com/remcohaszing)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fremcohaszing%2Fmonaco-prettier","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fremcohaszing%2Fmonaco-prettier","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fremcohaszing%2Fmonaco-prettier/lists"}