Skip to content

Enable prettier formatter in monaco #12640

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: sandcastle-v2
Choose a base branch
from
+49 −2
Open

Enable prettier formatter in monaco #12640

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d03590d
enable prettier formatter in monaco
jjspace May 29, 2025
43a5095
modify more monaco settings
jjspace Jun 3, 2025
20f8ed5
Merge branch 'sandcastle-react-structure' into monaco-prettier
jjspace Jun 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions packages/sandcastle/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,11 +18,13 @@
"@monaco-editor/react": "^4.7.0",
"monaco-editor": "^0.52.2",
"pako": "^2.1.0",
"prettier": "^3.5.3",
"react": "^19.0.0",
"react-dom": "^19.0.0"
},
"devDependencies": {
"@types/pako": "^2.0.3",
"@types/prettier": "^2.7.3",
"@types/react": "^19.0.10",
"@types/react-dom": "^19.0.4",
"@vitejs/plugin-react": "^4.3.4",
Expand Down
49 changes: 47 additions & 2 deletions packages/sandcastle/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,8 @@
import { useCallback, useEffect, useReducer, useRef, useState } from "react";
import * as prettier from "prettier";
import * as babelPlugin from "prettier/plugins/babel";
import * as estreePlugin from "prettier/plugins/estree";
import * as htmlPlugin from "prettier/plugins/html";
import "./App.css";

import Editor, { Monaco } from "@monaco-editor/react";
Expand Down Expand Up @@ -139,11 +143,39 @@ function App() {
// do something before editor is mounted

monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
// TODO: pick what target we want, probably newer than ES2020 but TS was upset with that
target: monaco.languages.typescript.ScriptTarget.ES2020,
target: monaco.languages.typescript.ScriptTarget.ESNext,
allowNonTsExtensions: true,
});

monaco.languages.registerDocumentFormattingEditProvider("javascript", {
async provideDocumentFormattingEdits(model) {
const formatted = await prettier.format(model.getValue(), {
parser: "babel",
// need to force type because the estree plugin has no type https://github.com/prettier/prettier/issues/16501
plugins: [babelPlugin, estreePlugin as prettier.Plugin],
});

return [{ range: model.getFullModelRange(), text: formatted }];
},
});

monaco.languages.html.htmlDefaults.setModeConfiguration({
...monaco.languages.html.htmlDefaults,
// we have to disable the defaults for html for our custom prettier formatter to be run
documentFormattingEdits: false,
documentRangeFormattingEdits: false,
});
monaco.languages.registerDocumentFormattingEditProvider("html", {
async provideDocumentFormattingEdits(model) {
const formatted = await prettier.format(model.getValue(), {
parser: "html",
plugins: [htmlPlugin],
});

return [{ range: model.getFullModelRange(), text: formatted }];
},
});

setTypes(monaco);
}

Expand Down Expand Up @@ -411,6 +443,19 @@ Sandcastle.addToolbarMenu(${variableName});`,
</div>
<Editor
theme={darkTheme ? "vs-dark" : "light"}
options={{
automaticLayout: true,
bracketPairColorization: {
enabled: false,
},
guides: {
bracketPairs: "active",
},
minimap: { size: "fill" },
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Honestly hate this. 😆 But I'm not going to hold up the PR over it.

Copy link
Contributor Author

@jjspace jjspace Jun 13, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

haha I was really on the fence about this one. I personally really hate it the "default" way and this is much better to me. 😆 This is probably the most opinionated setting I changed.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Honestly thought about just removing the minimap entirely 🤔

Copy link
Contributor

@ggetz ggetz Jun 13, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, personally I hate the minimap entirely.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Well you're in luck 😆 Due to how monaco calculates resizing the minimap seems "expensive" and slow. When I added the panel resizing (#12672) it started flickering pretty bad and lagging behind visually. Easier to just turn it off (in that PR) Oh well 🤷

placeholder: "// Select a demo from the gallery to load.",
renderWhitespace: "trailing",
tabSize: 2,
}}
path={activeTab === "js" ? "script.js" : "index.html"}
language={activeTab === "js" ? "javascript" : "html"}
value={activeTab === "js" ? codeState.code : codeState.html}
Expand Down