How to Format Code in Visual Studio Code

Published 2026-07-26

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.

Key takeaways

VS Code provides quick built-in formatting via keyboard shortcuts
Prettier handles multi-language consistency effortlessly
Language-specific formatters enforce strict community standards
Format on Save automates style checks across entire development teams

How to Format Code in Visual Studio Code — Photo: signal mirror (PDM) via Openverse

Formatting code in Visual Studio Code takes just a second using the default keyboard shortcut `Shift + Alt + F` on Windows/Linux or `Shift + Option + F` on macOS, but configuring dedicated extensions like Prettier or Black gives you true automated control across your whole project.

Why Code Formatting Matters in Visual Studio Code

Code formatting standardizes indentation, spacing, quote marks, and line breaks across a codebase. Standardized code reduces cognitive drag during code reviews, minimizes git diff clutter caused by stray whitespace changes, and prevents subtle syntax bugs. In team environments, automated formatting eliminates unnecessary debates over style preferences. When every developer on a project formats code differently, pull requests end up filled with noise. A two-line logic fix can easily turn into a fifty-line git diff simply because someone's editor reformatted tabs into spaces or shuffled trailing commas. Setting up an agreed-upon formatting setup in VS Code turns style compliance into a background task that happens automatically every time you hit save.

Understanding VS Code’s Built-in Formatting

VS Code includes native formatting logic out of the box for basic languages like HTML, CSS, JavaScript, and JSON. You can format an entire document or a selected block instantly using built-in keyboard shortcuts or context menu commands without installing external plugins. The built-in formatter works fine for basic files or quick edits when you don't need opinionated rules. However, its default scope is somewhat limited. It relies on standard rules built into default language support packages inside VS Code, which don't always align with strict project requirements or modern web frameworks. For advanced features—like enforcing single quotes over double quotes or auto-sorting imports—you'll usually want to assign a dedicated extension as your primary default formatter.

How to Trigger Basic Formatting

Trigger basic formatting by pressing `Shift + Alt + F` (Windows/Linux) or `Shift + Option + F` (macOS) while viewing any file. To format a specific section, highlight the target lines first, then press `Ctrl + K, Ctrl + F` (Windows/Linux) or `Cmd + K, Cmd + F` (macOS). Alternatively, open the Command Palette with `Ctrl + Shift + P` (or `Cmd + Shift + P` on macOS), type "Format Document", and hit Enter. If you have multiple formatters installed for the file type, VS Code prompts you to choose a default formatter the first time you run this command. Selecting your preferred tool sets it as the default choice in your user configuration settings.

Leveraging Prettier for Consistent Formatting

Prettier is an opinionated multi-language code formatter supporting JavaScript, TypeScript, CSS, HTML, JSON, GraphQL, and Markdown. It enforces uniform styling by parsing code and re-printing it according to strict layout rules, removing personal formatting quirks across entire development teams. Unlike standard linter tools that flag stylistic mistakes and ask you to fix them manually, Prettier rewrites your code based on its Abstract Syntax Tree (AST). It strips away personal coding style nuances so everyone on the team writes code that looks like it came from a single author. Installing the official Prettier extension from the VS Code Marketplace makes this process smooth and automatic.

Configuring Prettier in VS Code

To configure Prettier as your primary formatter, install the official extension, navigate to VS Code Settings, search for Default Formatter, and select Prettier from the dropdown menu. Then, enable Format on Save to automatically process files whenever you save your work. For project-specific rules, place a `.prettierrc` configuration file in the root folder of your project. This file overrides local editor settings and ensures every contributor uses identical options—such as setting `semi: true`, `singleQuote: true`, or `tabWidth: 2`. You can also add a `.prettierignore` file to prevent Prettier from processing build outputs, minified scripts, or vendor packages.

Exploring Language-Specific Formatters

While general tools handle web languages well, language-specific formatters deliver deeper adherence to official community standards. Python relies on Black or Ruff, Java uses google-java-format, Go relies on built-in gofmt, and Rust depends on rustfmt to maintain standard idiomatic formatting. General-purpose tools don't always grasp language-specific idioms or syntax rules outside the web ecosystem. Dedicated formatters understand language semantics deeply. For instance, Go's official `gofmt` utility is standard across the Go community, while Python's `Black` strictly follows PEP 8 guidelines with predictable, uncompromising layout decisions.

Installing and Configuring Black for Python

To use Black in VS Code, install Black in your Python environment via `pip install black`, then install the official Black Formatter extension. Set `python.formatting.provider` to Black or designate Black as your default formatter for Python files inside settings. Black

FAQ

How do I format code in VS Code?

Use the keyboard shortcut Shift+Alt+F (Windows/Linux) or Shift+Option+F (macOS). You can also find it under the "Format Document" option in the VS Code menu.

Why isn't my code formatting?

Ensure you have a formatter extension installed for your language (e.g., Prettier for JavaScript). Check your VS Code settings to confirm the formatter is enabled and configured correctly.

Can I format a specific selection of code?

Yes! Select the code you want to format, then use the same formatting shortcut (Shift+Alt+F / Shift+Option+F). Only the selected code will be formatted.

Editorial Team Author & reviewer

Hands-on reviewers testing tools, apps and services so you do not have to. Every article here is hands-on tested and human-reviewed before publishing.