How to Auto-Format Code in VS Code: Settings, Extensions, and Shortcuts
Updated Jul 2026
Some links on this page are affiliate links. If you buy through them we may earn a small commission at no extra cost to you. We only recommend what we'd use.
- Automated formatting removes manual spacing work
- Built-in settings cover basic languages, but extensions handle complex projects
- Setting a default formatter per language prevents extension collisions
- Prettier, Black, and ESLint are standard industry choices
Automatically formatting code in Visual Studio Code requires turning on the built-in "Format On Save" setting or pairing the editor with dedicated extensions like Prettier, Black, or ESLint.
🛍 Ready to buy? Check current prices on Amazon for the picks in this guide.
Understanding Auto-Format in VS Code
Auto-formatting in Visual Studio Code automatically cleans up indentation, line breaks, quotes, and bracket placements whenever you save or type. By offloading style enforcement to your editor, you eliminate manual spacing tweaks, minimize git diff noise during code reviews, and guarantee that your entire codebase adheres to a uniform visual standard.
If you've ever spent ten minutes fixing mismatched indentation in a pull request, you already know why formatting automation is essential. VS Code handles formatting by parsing your file structure and applying a set of layout rules. It doesn't change your code's execution logic or variable names; instead, it rearranges whitespace, manages wrapping for long lines, and fixes missing semicolons or trailing commas.
Because different programming languages follow vastly different style guides—PEP 8 for Python, standard rules for JavaScript, or strict indenting for YAML—VS Code uses a modular architecture. It can handle basic web languages natively, but it lets specialized language servers and extensions take over when projects demand stricter rules.
Built-in Formatting with VS Code
VS Code includes default formatting capabilities out of the box for lightweight languages like HTML, CSS, JSON, and TypeScript. You can instantly trigger this basic formatting across any active file by pressing Shift + Alt + F on Windows and Linux or Option + Shift + F on macOS without installing additional marketplace tools.
The native formatter relies on language definitions built straight into the core core application. For simple scripts, quick JSON edits, or single-page HTML files, these core rules work without any extra setup. You can also format a small section of a file rather than the whole document by highlighting the lines you want to clean up and pressing `Ctrl+K Ctrl+F` (or `Cmd+K Cmd+F` on macOS).
However, once your team adopts custom rules—like single quotes over double quotes or strict two-space indents—the default engine falls short. It lacks project-level config files for most non-web languages, which is why developers quickly migrate to extension-driven workflows.
Configuring Basic Formatting Settings
You can customize VS Code's baseline formatting behavior through the Graphical Settings UI or directly within your settings.json file. Key settings include controlling tab sizing, choosing between spaces or tabs, and determining whether code automatically cleans itself up during file saves or while typing in the editor.
To access these settings visually, press `Ctrl+,` (or `Cmd+,` on macOS) to open the Settings tab. Searching for "formatting" surfaces the primary switches you need to know about:
editor.tabSize: Defines how many spaces a tab character represents (commonly set to 2 or 4).editor.insertSpaces: Forces VS Code to insert space characters instead of hard tab stops when you press Tab.editor.formatOnSave: Triggers the active language formatter automatically whenever you write changes to disk.editor.formatOnType: Formats the current line immediately after you type trigger characters like semicolons or closing braces.
Leveraging Extensions for Enhanced Formatting
Extensions dramatically expand VS Code's formatting scope by introducing language-specific parser rules, abstract syntax tree processing, and deep integration with popular project linters. Installing community-backed extensions from the marketplace lets you handle complex ecosystems like React, Python, C++, or Rust with higher precision than stock settings offer.
When you install a third-party formatter, it hooks into VS Code's document formatting API. Instead of relying on regular expressions or naive text replacement, modern formatting extensions parse your source code into an Abstract Syntax Tree (AST). This allows them to safely manipulate whitespace without breaking code context or invalidating string literals.
You can browse available tools by opening the Extensions sidebar (`Ctrl+Shift+X` or `Cmd+Shift+X`) and searching for your target language alongside keywords like "formatter" or "linter".FAQ
How do I enable auto formatting on save in VS Code?
Go to File > Preferences > Settings. Search for "format on save". Check the box next to "Editor: Format On Save". Your code will now format automatically when you save.
What keybindings trigger auto formatting in VS Code?
By default, Shift+Alt+F (Windows/Linux) or Shift+Option+F (macOS) triggers the format document command. You can customize this in Settings under "Keyboard Shortcuts".
Why isn't auto formatting working after I enabled it?
Ensure you have a formatter installed for your language (e.g., Prettier for JavaScript). Also, check if any extensions are interfering with formatting. Try disabling extensions to troubleshoot.
🛍 See today's best prices on Amazon and grab the option that fits you.