How-to · VS Code for Mac
How to format a document in VS Code on Mac: shortcut, menu and formatter steps
To format a document in VS Code on Mac, click inside the file and press Shift+Option+F (⇧⌥F). VS Code rewrites the layout of the whole file, and the right-click menu and Command Palette run the same command.
Quick answer
- Click inside the file, then press Shift+Option+F (⇧⌥F) to format the whole document.
- Select some text and press ⌘K, let go, then press ⌘F to format only the selection.
- Other languages need a formatter extension. Built-in support covers JavaScript, TypeScript, JSON, HTML and CSS.
- Turn on editor.formatOnSave in Settings if you want formatting every time you save.
What you need
- A Mac with VS Code installed
- A file open in the editor
- A formatter for your language, or a file in JavaScript, TypeScript, JSON, HTML or CSS
How to Format a document in VS Code on Mac in VS Code on a Mac
Open the file
Open the file in VS Code. Click its tab, or open it from the Explorer in the sidebar. Make sure the file is the active editor before you continue.
Click inside the editor
Click anywhere in the text. The cursor must sit in the file you want to change. Shortcuts and commands act on the active editor.
Press Shift+Option+F
⇧⌥F
Hold Shift and Option, then press F. VS Code formats the whole document. The layout changes, and the content stays the same.
Tip: On a Mac, Option is the key labeled Option or Alt. Both labels refer to the same key.
Check the result
Scroll through the file and read the changes. Look at indentation, spacing and line breaks. Undo if the result is not what you expected.
Format a selection
⌘K⌘F
Select the lines you want to change. Press ⌘K, let go, then press ⌘F. Only the selected text is formatted.
Tip: Press the keys in order, not all at once. This is a two-chord shortcut.
Use the right-click menu
Control-click or right-click inside the editor. Choose Format Document for the whole file. Choose Format Selection if text is highlighted.
Open the Command Palette
⇧⌘P
Press Shift, Command and P together. The Command Palette opens at the top of the window. Type the name of the command you want.
Run Format Document
Type Format Document in the Command Palette and press Return. The active file is formatted with the default formatter for its language.
Choose a formatter
Type Format Document With and press Return. Pick the formatter from the list. VS Code formats the file with that choice.
Turn on format on save
Open Settings and search for editor.formatOnSave. Tick the box. The file will format each time you save it.
Tip: Search for the setting name. Labels in the Settings editor can differ between releases.
Set a default formatter
Open the Command Palette and search for Default Formatter. Choose the extension you want for that language. The choice applies to every file of that type.
Tip: If the command name differs, search for default formatter in lowercase.
Rebind the shortcut if needed
⌘K⌘S
Open the Keyboard Shortcuts editor with ⌘K ⌘S. Search for format. Click the binding you want to change and press the new keys.
Formatting cleans up the layout of a file without changing what the code or text means. Spacing, indentation, line breaks and quote style get adjusted to match the rules for that language. You do not retype anything. One command does the work for the whole file.
The fastest way: Shift+Option+F
Click somewhere inside the file you want to change. Then hold Shift and Option (⌥) and press F. VS Code formats the whole document in the active editor. That is the entire job.
The shortcut is ⇧⌥F on macOS. Windows uses Shift+Alt+F, and Linux uses Ctrl+Shift+I. Those are the defaults in VS Code's official keybindings reference. If you switch between a Mac and a Windows machine, check the key labels before you press anything.
Format Document is the right choice for a file you just opened, or one you pasted into. A file from a colleague may use different indentation than yours. Pasted code can arrive with spacing that does not match the rest of the file. One shortcut fixes both.
Worked example: a messy JSON file
Say you open a JSON file where every value sits on one long line. Click inside the file and press ⇧⌥F. The braces, indentation and line breaks change, and the data stays the same. JSON has a built-in formatter, so you do not need to install anything for this.
The same idea works for TypeScript. Open a file with uneven spacing, press ⇧⌥F, and the spacing lines up. Read through the result before you commit it. A formatter follows fixed rules, and your team may use different ones.
Format only the part you selected
Sometimes you want to change one function and leave the rest alone. Select those lines first. Then press ⌘K, let go, and press ⌘F. VS Code formats only the selected text and leaves the other lines untouched.
Format Selection uses two chords, so you press the keys in order. Do not hold all of them at once. On Windows and Linux, the same command is Ctrl+K Ctrl+F. The command also appears in the editor right-click menu.
| Method | Shortcut or path | What it formats |
|---|---|---|
| Format Document | ⇧⌥F | The whole active file |
| Format Selection | ⌘K ⌘F | Only the selected text |
| Command Palette | ⇧⌘P, then type Format Document | The whole active file |
| Right-click menu | Right-click in the editor, then choose Format Document or Format Selection | The whole file, or only the selection |
| Format Document With | ⇧⌘P, then type Format Document With | The whole file, using the formatter you pick |
Run formatting from the Command Palette or right-click
Not every shortcut is easy to remember. The Command Palette opens with ⇧⌘P. Type Format Document, then press Return. The command runs on the active file, the same as the shortcut does.
Right-click inside the editor to see the same commands in the context menu. Choose Format Document for the whole file. Choose Format Selection when you have highlighted text. Use the mouse if that feels faster to you.
Pick a formatter when more than one is installed
VS Code includes built-in formatters for JavaScript, TypeScript, JSON, HTML and CSS. Most other languages need a formatter extension. Install one from the Extensions view before you expect results. Then the shortcut has something to run.
When two formatters can handle the same file, VS Code needs a choice. Open the Command Palette with ⇧⌘P and type Format Document With. Pick the formatter from the list. VS Code uses that formatter for this run, and you can choose again next time.
Turn on format on save
Format on save runs the formatter each time you save. The setting is editor.formatOnSave. It is off by default. Turn it on once and you rarely need the shortcut for routine cleanup.
Open the Settings editor and search for editor.formatOnSave. Tick the box. The labels in Settings can change between releases, so search for the setting name rather than the wording on screen.
You can also turn it on for one language only. The settings reference uses formatOnSave as a per-language example for TypeScript and Markdown. Put the setting inside a language block in settings.json. Keep it to languages where you trust the formatter.
- Save once with Format Document first, so you can see what the formatter changes.
- Turn it on for one project at a time, then widen it if the results look right.
- Check the diff before you commit, especially on a shared file.
- If your team has a formatting rule, match the formatter the team uses.
Set a default formatter for a language
If two extensions can format TypeScript, one of them must win. Set a default for that language. Search the Command Palette for Default Formatter. Choose the extension you want for that file type.
The exact command wording may change, so search for default formatter rather than an exact title. Once set, the default applies to every file of that language until you change it.
Why formatting matters: the numbers
75.9%
of 26,143 Stack Overflow 2025 respondents use Visual Studio Code
Stack Overflow Developer Survey 2025: Technology182.7M
npm downloads of Prettier in the week of November 2 to November 8, 2026
npm downloads API: prettier (last week)The 2025 Stack Overflow Developer Survey had 26,143 responses. Of all respondents, 75.9% use Visual Studio Code. Among professional developers the figure is 76.2%. The survey is self-selected, so it describes its respondents, not every developer.
Prettier, one of the most common formatters, logged about 182.7 million npm downloads in the week of November 2 to November 8, 2026. A download is not a user. It does show how often developers install a formatter.
Common mistakes and how to fix them
The most common mistake is pressing the shortcut with the wrong file active. Click inside the file first. The command acts on the active editor, so a click in another tab sends it to that file.
Another mistake is pressing ⇧⌥F in a file type with no formatter. Nothing changes, and it looks broken. Check that a formatter exists for the language, then try again.
A third mistake is changing keys without noticing. If ⇧⌥F does something else, a different command may use the same keys. Open the Keyboard Shortcuts editor with ⌘K ⌘S and search for format to see the bindings.
Format in VS Code for the Web
VS Code for the Web runs in a browser at vscode.dev. Only a subset of extensions can run there. JSON, HTML and CSS get the strongest support, and other languages get less. The terminal and debugger are not available in the browser.
Some keyboard shortcuts behave differently in the browser because the browser uses them too. The docs give Ctrl+N and Ctrl+W as examples. If a formatting shortcut fails there, use the Command Palette instead. Test on a copy of your file first.
Version notes for 2026
This guide covers VS Code 1.145, the current stable release at the time of writing. VS Code's updates page lists 1.145.2 as the current download. Install the latest patch before you follow these steps.
The sources checked did not show a recent change to the formatting shortcuts or menus. That is not proof that nothing changed. If a key behaves differently, check the Keyboard Shortcuts editor first.
A quick checklist before you format
- Click inside the file you want to format.
- Confirm that a formatter exists for that language.
- Press ⇧⌥F for the whole file, or select text and press ⌘K ⌘F.
- Review the changes, then save.
- Turn on format on save once you trust the results.
Where to go next
If you want saves to happen without thinking, read how to turn on auto save in VS Code on Mac. To find commands faster, how to use the command palette in VS Code on Mac goes deeper on the palette. If you need a formatter from the Marketplace, see how to install an extension in VS Code on Mac.
VS Code shortcuts for this on Mac
| To do this | Press |
|---|---|
| Format Document (whole file) | ⇧⌥F |
| Format Selection | ⌘K⌘F |
| Open the Command Palette | ⇧⌘P |
| Open Keyboard Shortcuts editor | ⌘K⌘S |
If it does not work
- Nothing changes when I press ⇧⌥F
- Click inside the editor first. Then check that the file type has a formatter. Install one for that language if it does not.
- Format Document does nothing for a non-JavaScript file
- Most languages need a formatter extension. Install one from the Extensions view, then run Format Document again.
- The wrong formatter runs
- Run Format Document With from the Command Palette and pick the formatter. Set a default for that language if the problem keeps happening.
- Format on save does not run
- Check that editor.formatOnSave is ticked in Settings. Also check that the file type has a formatter.
- ⇧⌥F does something else
- Another command may use those keys. Open Keyboard Shortcuts with ⌘K ⌘S, search for format, and check the binding.
- The shortcut fails in VS Code for the Web
- Browser shortcuts can conflict with VS Code. Open the Command Palette with ⇧⌘P and run the command from there.
Faster with Lazur
Do it faster: ask Lazur while you are in VS Code
Hold ⌥ ⌘ and say what you want. Lazur sees your VS Code window. Lazur draws a circle and a label around the button or menu you need.
- 1
Hold ⌥⌘ and talk
- 2
Lazur draws a circle and a label around the button or menu you need.
- 3
You stay in VS Code. Nothing to copy into a chat window.
Free for 3 days, then $18/month. Download for Mac
You say“Where is Format Document in VS Code?”
Lazur · points at itLazur draws a circle and a label around Format Document on your screen, then answers out loud.
Questions people ask
What is the shortcut to format a document in VS Code on Mac?
Click inside the file, then press Shift+Option+F (⇧⌥F). VS Code formats the whole active document. Windows uses Shift+Alt+F and Linux uses Ctrl+Shift+I.
How do I format only selected text in VS Code on Mac?
Select the text, press ⌘K, let go, then press ⌘F. That runs Format Selection. Format Document changes the whole file, so use the selection command when you want a smaller change.
Why does Format Document do nothing?
Usually the language has no formatter. Built-in formatters cover JavaScript, TypeScript, JSON, HTML and CSS. For other languages, install a formatter extension, then run the command again.
Does VS Code format on save by default?
No. The editor.formatOnSave setting is off by default. Turn it on in Settings by searching for that setting name and ticking the box.
What is Format Document With in VS Code?
It is a Command Palette command, opened with ⇧⌘P. Use it when more than one formatter can handle the file. You pick the formatter for that run.
Does the formatting shortcut work in VS Code for the Web?
Not always. Some shortcuts conflict with the browser, such as Ctrl+N and Ctrl+W. Use the Command Palette if a shortcut fails. Formatter support also depends on the language and the extension.
Does formatting change what my code does?
A formatter changes layout, such as spacing and line breaks. The aim is layout only. Still, review the diff before you commit, and run your tests if the project has them.
Sources
- VS Code Default Keyboard Shortcuts reference · Microsoft (Visual Studio Code docs) · checked 2026-11-09
- VS Code Basic Editing · Microsoft (Visual Studio Code docs) · checked 2026-11-09
- VS Code Key Bindings guide · Microsoft (Visual Studio Code docs) · checked 2026-11-09
- Visual Studio Code Updates · Microsoft (Visual Studio Code) · checked 2026-11-09
- VS Code for the Web · Microsoft (Visual Studio Code docs) · checked 2026-11-09
- VS Code User Settings · Microsoft (Visual Studio Code docs) · checked 2026-11-09
- Stack Overflow Developer Survey 2025: Technology · Stack Overflow · checked 2026-11-09
- npm downloads API: prettier (last week) · npm registry · checked 2026-11-09
Try Lazur free for 3 days
Hold a key and ask. Lazur sees your screen, points at the button and talks you through it, in any Mac app. No credit card.