How to Reformat Code in VS Code: Shortcuts, Extensions, and Settings

Reformatting code in VS Code is as simple as pressing Shift + Alt + F (or Option + Shift + F on macOS) or enabling automated format-on-save settings using popular extensions like Prettier and ESLint.

Understanding Code Formatting in VS Code

Code formatting in VS Code cleans up spacing, indentation, and syntax alignment across your codebase through built-in engine rules or dedicated third-party extensions. Instead of manually moving brackets and aligning tabs, the editor reshapes your raw syntax into standardized formatting that matches language-specific style guides instantly upon execution.

When working on software projects, inconsistent spacing and stray line breaks slow down reading speed and clutter version control diffs. Automated formatting resolves these micro-distractions. Rather than wasting time manually fixing messy quotes or misaligned braces, you can let VS Code handle layout normalization behind the scenes so you stay focused on program logic.

Why is Code Formatting Important?

Standardized code formatting removes visual noise, simplifies pull request reviews, and eliminates debates over trivial styling during team development. When every file follows consistent indentation and line-length rules, developers scan code logic faster and catch subtle syntax bugs without fighting inconsistent line breaks or mixed tabs and spaces.

Working in unformatted codebases creates friction. Diff views in Git become noisy when line endings change arbitrarily or when team members use different tab widths. Enforcing uniform formatting policies keeps commit histories clean, ensures git diffs highlight functional changes rather than formatting tweaks, and streamlines onboarding for new developers joining a repository.

Using VS Code's Built-in Formatting Tools

VS Code includes default formatting support for languages like HTML, CSS, JavaScript, and JSON out of the box without requiring extra plugins. Accessing these native tools involves key combinations or right-clicking inside the active editor pane, relying on underlying language protocols to interpret syntax trees and realign indentation rules automatically.

For many basic scripts, configuration files, and quick fixes, built-in capabilities handle everything required without bloating your editor with unnecessary extensions. Native formatters parse language structures cleanly and adapt to tab settings declared in your workspace status bar.

Formatting a Single File

To reformat an open file instantly, press Shift + Alt + F on Windows and Linux, or Option + Shift + F on macOS. Alternatively, right-click anywhere within the code editor and select Format Document from the contextual menu to apply default indentation and line length rules immediately.

If you have multiple formatters installed for a single file type, VS Code prompts you to choose a default tool the first time you run this command. Selecting your preferred formatter stores that preference, ensuring future shortcut triggers process the file immediately using your chosen tool without prompting you again.

Formatting the Entire Workspace

Formatting an entire workspace requires targeting specific directories via project scripts or using command palette triggers for bulk formatting across modified files. You can trigger batch operations through the Command Palette (Ctrl + Shift + P or Cmd + Shift + P) by running format actions across directory paths.

While native VS Code commands excel at processing individual open editors, multi-file formatting across large projects is often handled by running CLI formatters (like Prettier or Black) directly via the built-in terminal. This approach allows developers to process hundreds of files simultaneously without opening each document manually inside the editor window.

Configuring Formatting Settings

Adjusting native formatting behavior takes place in the settings interface or settings.json file, where you set parameters like tab size, whitespace rendering, and format-on-save. Modifying these properties overrides system defaults, giving you direct control over how the editor handles line breaks, trailing commas, and soft wraps.

To open your global or workspace JSON configuration directly, press Ctrl + Shift + P (or Cmd + Shift + P on macOS), type "Open User Settings (JSON)", and hit enter. Add the following key-value pairs to set up automatic formatting on save:

{
  "editor.formatOnSave": true,
  "editor.tabSize": 2,
  "editor.insertSpaces": true
}

Enabling editor.formatOnSave ensures every file cleans itself up the moment you save your work, preventing unformatted code from accidentally leaking into your repositories.

Leveraging Code Formatting Extensions

Extensions expand VS Code’s native capabilities by integrating specialized rules engines like Prettier, Black, or ESLint into the editing environment. These tools go beyond simple tab alignment, enforcing strict project-wide style conventions, automated imports, and syntax corrections across dozens of programming languages and custom frameworks.

Extensions bridge the gap between individual editor settings and repository-level consistency. By pulling formatting rules directly from configuration files checked into source control, extensions ensure every developer on a team generates identical output regardless of their local machine setup.

Popular Formatting Extensions

Ecosystem staples like Prettier handle web technologies with minimal configuration, while Python projects often rely on Black for strict, opinionated formatting. For JavaScript and TypeScript environments, combining ESLint with specialized formatting plugins bridges the gap between style enforcement and code analysis within the workspace.

Languages like Rust, Go, and C# also feature dedicated language server extensions (such as rust-analyzer or gopls) that ship with opinionated formatters configured according to official community guidelines. Using these tools guarantees your code aligns with mainstream ecosystem standards.

Setting Up Prettier in VS Code

Installing Prettier requires searching for "Prettier - Code formatter" in the Extensions sidebar (Ctrl + Shift + X or Cmd + Shift + X) and clicking Install. Once installed, set Prettier as your default document formatter inside settings.json under editor.defaultFormatter to activate automated formatting across supported web files.

Configure Prettier as the default formatter across all supported languages by adding this line to your settings.json:

{
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

You can also define language-specific default formatters if you prefer using Prettier for HTML and CSS while utilizing alternative extensions for languages like Python or C++.

Integrating ESLint with Formatting

Integrating ESLint requires installing the official ESLint extension, enabling auto-fix settings, and establishing an .eslintrc configuration file in your project root. Once enabled in VS Code settings, ESLint automatically fixes code style errors and applies lint rules every time you trigger document saves or manual format triggers.

Add this configuration snippet to settings.json to let ESLint fix code issues automatically when saving files:

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  }
}

This setup allows ESLint to repair broken code structures, remove unused imports, and standardize statement formatting seamlessly during active coding sessions.

Customizing Formatting Rules

Customizing formatting rules involves placing configuration files like .prettierrc or .eslintrc inside your project root directory to enforce shared team standards. These configuration files override local editor defaults, ensuring that every contributor formats code identically regardless of their personal VS Code settings or operating system.

Root configuration files serve as the single source of truth for code style inside a project repository. When present, VS Code formatters prioritize these files over user-level editor preferences, preventing local editor settings from altering production code style.

Prettier Configuration Options

Prettier configurations control essential style parameters such as printWidth, tabWidth, singleQuote, semi, and trailingComma using simple JSON or YAML syntax. Adjusting these key-value pairs dictates exact line wrapping behaviors, quote preference, and semicolon insertion rules across all processed files in the repository.

Create a .prettierrc file in your project root with these representative settings:

{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es"
}

This explicitly tells Prettier to wrap lines exceeding 80 characters, use two spaces for tabs, prefer single quotes over double quotes, and append trailing commas where valid in JavaScript syntax trees.

ESLint Configuration Options

ESLint options allow precise control over rules, plugins, and environment settings inside flat config files or legacy JSON structures. You can set individual formatting rules to error, warn, or off levels, giving teams granular authority over semicolon usage, indentation size, and object spacing syntax.

For example, in a classic .eslintrc.json file, you can fine-tune specific layout preferences like this:

{
  "rules": {
    "indent": ["error", 2],
    "quotes": ["error", "single"],
    "semi": ["error", "always"],
    "no-trailing-spaces": "error"
  }
}

When VS Code formats documents using ESLint, it parses these explicit instructions to correct non-compliant formatting immediately upon detection.

Troubleshooting Common Formatting Issues

Formatting issues usually arise from conflicting extensions, missing default formatter declarations, or silent language server crashes inside VS Code. Resolving these errors requires inspecting output logs, verifying workspace settings override user settings, and confirming that the active language parser recognizes the targeted file format properly.

When formatting commands fail silently or output unexpected changes, taking a systematic approach quickly locates root causes without requiring total reinstallation of your extension suite.

Conflicting Configurations

Conflicts occur when multiple formatters—such as Prettier and ESLint—attempt to modify the same file simultaneously with opposing formatting rules. Fix this by designating a single editor.defaultFormatter for each file type and installing eslint-config-prettier to turn off conflicting styling rules inside ESLint configurations.

If Prettier and ESLint fight over quote styles or semicolons, your code will reformat repeatedly on every save. Using eslint-config-prettier disables ESLint's structural formatting rules so Prettier handles layout while ESLint focuses exclusively on logical code quality check operations.

Language Server Problems

Language server failures leave formatting shortcuts non-responsive because the editor loses its underlying AST (Abstract Syntax Tree) parsing capabilities. You can fix this by opening the Command Palette (Ctrl + Shift + P or Cmd + Shift + P) and executing Developer: Reload Window to restart background servers and restore connection.

You can also open the Output Panel inside VS Code (Ctrl + Shift + U or Cmd + Shift + U) and select your formatter (e.g., Prettier or ESLint) from the dropdown list on the right. The output log reports explicit syntax errors, configuration parsing issues, or missing node dependencies preventing the formatter from operating.

Extension Incompatibilities

Extension conflicts happen when outdated plugins interact poorly with newer VS Code releases or third-party formatters. Isolating problematic extensions involves disabling active plugins individually, checking the Extension Output panel for execution errors, and ensuring all formatting dependencies in package.json match installed extension versions.

A quick test to identify broken extensions is launching VS Code with extensions temporarily disabled using the command line flag code --disable-extensions. If native formatting works cleanly, re-enable your extensions one by one to pinpoint the conflicting plugin.

Comparison of Code Formatting Tools

Choosing between formatters comes down to language support, configuration flexibility, and team consensus on opinionated styling versus custom rule sets. The table below outlines how popular tools compare across key development metrics, highlighting ideal use cases for individual workflows and multi-developer repository environments.

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

To choose the right configuration for your setup, consider these common pathways:

• Select Prettier if you build web

  🛍 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

  • Python Code Formatters: Black vs. Autopep8 vs. YAPF Compared
  • VS Code Beautify Code: Shortcuts & Extensions for Clean Code
  • Best VS Code Beautification Tools: How to Clean and Format Code Automatically
  • Align Code in VS Code: Shortcuts, Extensions, and Formatting Methods
  • Align Code in VS Code: Best Methods and Extensions for Clean Syntax
  • Compare Files in VS Code on Mac: Native Diffing & Best Extensions