Format Code in VS Code: Commands & Configuration Explained

You can format code in VS Code instantly by pressing Shift + Alt + F on Windows/Linux or Option + Shift + F on macOS to reformat your active document. If you only want to clean up a specific snippet, highlight the target lines and press Ctrl + K, Ctrl + F (or Cmd + K, Cmd + F on Mac). Beyond keyboard shortcuts, setting up workspace rules and default formatters keeps your code clean without manual effort.

🛍 Ready to buy? Check current prices on Amazon for the picks in this guide.

Understanding Code Formatting in VS Code

VS Code formats code by parsing document syntax trees and applying consistent indentation, spacing, and bracket alignment based on active configuration rules. While the editor provides native formatting support for HTML, CSS, JavaScript, and JSON, external extensions handle languages like Python or Rust, giving developers complete control over code presentation across projects.

Clean code presentation matters far beyond basic aesthetics. When working in team repositories, inconsistent tab stops, floating brackets, and mixed quotes create noisy git diffs that obscure actual logic changes during code reviews. VS Code solves this by treating code formatting as a core workflow step, dividing execution into built-in engine parsers and external language extensions.

The editor operates on an abstraction layer where the UI triggers a "format" request, and whichever active engine is assigned to that language handles the file parsing. This means you get a uniform set of keyboard shortcuts regardless of whether you're working on a React frontend, a Python backend, or a Go microservice.

Basic Formatting Commands

The primary shortcut to format an entire document in VS Code is Shift+Alt+F on Windows/Linux or Option+Shift+F on macOS. To format a specific block of code, highlight the target lines and press Ctrl+K followed by Ctrl+F (or Cmd+K, Cmd+F on Mac) to run selected formatting instantly.

If keyboard shortcuts aren't your preference, you can open the Command Palette with Ctrl+Shift+P (or Cmd+Shift+P on Mac), type "Format Document," and hit Enter. Right-clicking anywhere within the code editor window also exposes "Format Document" and "Format Selection" in the context menu.

When working on large legacy files where you don't want to touch untouched code, "Format Selection" is particularly useful. It isolates your adjustments to modified blocks, keeping git history clean for the rest of the file.

Automatic Formatting on Save

Automatic formatting on save cleans up your document layout every time you save a file, eliminating manual keybindings from your workflow. You can enable this feature by checking "Editor: Format On Save" in the settings UI or by adding the setting "editor.formatOnSave": true into your workspace settings.json file.

Once enabled, you won't need to manually invoke formatting commands again. Every press of Ctrl+S or Cmd+S triggers the designated language formatter before writing changes to disk.

For large repositories, you can refine this behavior further by setting "editor.formatOnSaveMode": "modifications". This configures VS Code to format only lines you've modified rather than rewriting entire legacy documents, preventing huge, accidental diffs in pull requests.

Configuring Formatters and Language Support

VS Code handles language support through dedicated parser engines configured either globally or per language mode. When multiple formatters are installed for a single file type, you must set a primary default formatter in your settings to prevent execution conflicts and ensure consistent style rules across every file.

Out of the box, VS Code formats HTML, CSS, JavaScript, TypeScript, and JSON using built-in parsers. However, once you open files written in Python, C++, PHP, or Ruby, the editor requires an external extension to understand how those syntax structures should be laid out.

You can set language-specific defaults directly inside your settings.json file. This ensures Python files trigger your chosen Python tool, while web files route through web formatters without interfering with one another:

{
  "[python]": {
    "editor.defaultFormatter": "ms-python.black-formatter"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

Popular Formatters & Extensions

JavaScript and TypeScript developers heavily rely on Prettier, Python projects usually adopt Black or Ruff, and C or C++ developers rely on clang-format. Installing these tools as VS Code extensions connects your editor to language-specific formatting engines that handle indentation, line wrapping, and syntax styling automatically.

Here is a breakdown of popular tools across primary language ecosystems:

• Prettier: The de facto standard for web development, handling JavaScript, TypeScript, JSX, HTML, CSS, SCSS, JSON, and GraphQL. Prettier is deliberate about offering minimal configuration options so teams avoid endless style debates.
• Black: An uncompromising Python code formatter. It formats Python code deterministically, adopting a strict style guide that leaves little room for manual tweaks.
• clang-format: Maintained as part of the LLVM project, this extension gives C, C++, Java, and Objective-C projects deep control over brace wrapping, column limits, and pointer alignment.
• Ruff: An extremely fast Python linter and formatter written in Rust that serves as a drop-in replacement for Black and Flake8.

Customizing Formatting Rules

Customizing formatting rules allows you to adjust key layout choices like indentation size, tab vs space usage, line length caps, and quote styles. You can adjust these preferences through VS Code's settings interface or by placing dedicated configuration files like .prettierrc directly inside your project repository root.

While global editor settings apply across your personal machine, project-level configuration files take priority over global defaults. This keeps formatting consistent across every developer on your team, regardless of their local VS Code settings.

For example, adding a .prettierrc file to your project root guarantees everyone formats code with matching tab widths and quote choices:

{
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5"
}

Troubleshooting Formatting Issues

Formatting failures usually happen when multiple extensions conflict over the same language, syntax errors block parser execution, or workspace settings override user defaults. You can resolve most formatting issues by defining an explicit default formatter, validating file syntax, and checking the Output panel for extension error logs.

When you press Shift+Alt+F and nothing happens, your first diagnostic step should be checking the VS Code status bar at the bottom right. If there's a syntax error in your code (like a missing closing bracket or unclosed string), most formatters will abort to prevent mangling your source file.

If syntax isn't the problem, open the Output panel (Ctrl+Shift+U or Cmd+Shift+U) and switch the dropdown menu from "Tasks" to "Formatting" or the specific name of your extension (e.g., "Prettier"). The error log there will tell you if an underlying executable is missing or if a local configuration file has a syntax error.

Formatter Conflicts

Formatter conflicts occur when two or more installed extensions attempt to process the same file type without an assigned priority. VS Code resolves this by asking you to pick a default formatter, or you can manually define editor.defaultFormatter inside your settings.json file to lock in your choice.

This situation happens frequently in web projects where extensions like ESLint, Prettier, and legacy extensions like JS-CSS-HTML Formatter are installed simultaneously. When you attempt to format a document, VS Code throws a prompt: "There are multiple formatters for JavaScript files. Select a default formatter to continue."

Selecting your preferred tool from that prompt updates your settings automatically, resolving the ambiguity.

Settings Overrides

VS Code evaluates settings using a strict priority hierarchy where folder-level .vscode/settings.json configurations override workspace settings, which override global user preferences. If your formatting rules aren't applying correctly, inspect local project settings files to identify conflicting options that might be suppressing your global configuration.

Here is how the setting hierarchy breaks down, from highest priority to lowest:

1. Folder Settings (.vscode/settings.json inside

   FAQ

   What does the "Format Code" command do?

   The "Format Code" command automatically indents, spaces, and aligns your code according to configured rules, making it more readable and consistent. It's like tidying up your code!

   How do I trigger the "Format Code" command?

   You can use the keyboard shortcut (usually Shift+Alt+F on Windows/Linux or Shift+Option+F on macOS), right-click and select "Format Document," or use the Command Palette (Ctrl+Shift+P or Cmd+Shift+P).

   Can I customize how "Format Code" formats my code?

   Yes! VS Code uses language-specific formatters. You can configure these formatters in your settings to adjust spacing, line length, and other formatting preferences.

   🛍 See today's best prices on Amazon and grab the option that fits you.

   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.

   You might also like

   • Auto Format Code in VS Code: Setup, Extensions, and Best Practices
   • Best Time Management Apps for Students (2024 Guide)
   • Best Time Management Apps for ADHD: What Actually Works
   • Best Time Management Apps for Focused Productivity
   • Best Time Management Strategies and Tools for Daily Focus
   • Best Notion Templates: Top Picks for Work, Study, and Projects
   More from us: Kiruruchiki — more tips & how-to guides