How to Format Code in VS Code: Shortcuts, Prettier, and Settings

You can instantly format code in Visual Studio Code by pressing Shift + Alt + F on Windows/Linux or Shift + Option + F on macOS, which applies your active language formatter across the whole file. If you only need to clean up a specific block, select the lines and hit Ctrl + K, Ctrl + F (or Cmd + K, Cmd + F on Mac).

Why Clean Code Formatting Matters

Proper code formatting creates predictable structure across your projects, making logic easier to read and bugs faster to spot during code reviews. Standardized indentation, bracket placement, and line lengths reduce cognitive load for developers, helping team members collaborate on shared codebases without fighting over stylistic quirks.

Formatting isn't just about making your editor look neat. When styling is inconsistent, version control tools like Git register minor spacing edits as actual code changes. That turns simple pull requests into massive diffs where real logic changes get buried under dozens of re-indented lines. Standardizing your layout keeps your commit history clean and isolates actual functional updates.

Most modern development teams rely on shared style guides to maintain quality across repositories. While you can fix alignment and line breaks by hand, relying on built-in editor tools saves mental energy for actual problem-solving. Knowing how to trigger and tweak these settings inside VS Code gives you immediate control over your writing environment.

Essential VS Code Formatting Shortcuts

Format an entire active document in VS Code using Shift + Alt + F on Windows/Linux or Shift + Option + F on macOS. To format only a specific highlighted snippet, use Ctrl + K, Ctrl + F (or Cmd + K, Cmd + F on macOS) to clean up local blocks without touching the rest of the file.

These commands work right out of the box for core languages like HTML, CSS, JavaScript, and JSON. If you're working in a language that VS Code doesn't format natively—like Python, Go, or Rust—the editor will prompt you to install a recommended language extension the first time you run the shortcut.

If these key combinations conflict with other applications on your system, keybindings are easy to rebind. Open the Command Palette with Ctrl + Shift + P (or Cmd + Shift + P), search for "Open Keyboard Shortcuts," and query "Format Document." From there, double-click the entry and assign whichever key combination fits your workflow.

Customizing Formatting Rules in settings.json

Open your settings with Ctrl + , (or Cmd + , on macOS) and search for "Formatting" to adjust global rules like tab size, spaces versus tabs, and format-on-save behavior. For exact control, edit your underlying settings.json file directly to set custom rules globally or for specific programming languages.

Accessing the underlying JSON file directly often feels faster than clicking through the graphical interface. You can open it from the Command Palette by selecting "Preferences: Open User Settings (JSON)." Adding targeted entries lets you define distinct behavior for different file types. For example, you might want strict two-space indentation for front-end markup but four-space indents for Python backend scripts:

{
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "editor.formatOnSave": true,
  "[python]": {
    "editor.tabSize": 4,
    "editor.defaultFormatter": "ms-python.python"
  }
}

Setting "editor.formatOnSave": true is one of the most effective tweaks you can make. Every time you save a file, VS Code automatically cleans up your indentation and spacing, removing the need to trigger shortcuts manually while you work.

Automating Workflows with Prettier

Prettier is an opinionated code formatter that handles languages like JavaScript, TypeScript, HTML, and CSS by automatically enforcing strict style rules. Installing the official Prettier VS Code extension and setting it as your default formatter allows you to auto-format every file perfectly whenever you save your work.

To set it up, install the "Prettier - Code formatter" extension from the VS Code Marketplace. Next, tell VS Code to use Prettier as your primary choice across supported languages by adding a couple of key configuration lines to your settings file:

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}

Because Prettier is deliberately opinionated, it takes away endless debates over single versus double quotes, trailing commas, and line wrap lengths. You can fine-tune its rules across your team by dropping a .prettierrc file into your project's root folder. This file overrides individual user settings, ensuring everyone on the project formats their files identically.

Troubleshooting VS Code Formatting Issues

Formatting failures usually happen when multiple extensions compete as default formatters, when language modes are misidentified, or when workspace settings override user preferences. Fix these issues by checking the active language mode in the bottom-right status bar and explicitly setting "editor.defaultFormatter" in your JSON config file.

When you press the shortcut keys and nothing happens, your editor might have multiple extensions registered for that file extension without knowing which one you prefer. Right-click inside the code editor, select "Format Document With...", and choose "Configure Default Formatter..." from the context menu to resolve the conflict permanently.

Another common snag involves syntax errors. Most formatters rely on valid code parsing; if you have a missing closing bracket or an unclosed string literal, the parser halts to avoid corrupting your file. Check the Output panel (selecting "Prettier" or your specific language engine from the drop-down menu) to see exact error logs whenever automated formatting fails.

Comparison of Popular Formatting Tools

Choosing the right formatting tool depends on your primary language and team requirements. While VS Code's built-in engine handles basic tasks well, specialized extensions like Prettier, ESLint, and Black offer robust language-specific rules, AST parsing, and automatic CLI integrations for automated build pipelines and pre-commit hooks.

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

Recommended Approach:

Standardizing Styles Across Teams with EditorConfig

An .editorconfig file lives in your project root to enforce basic style rules—like indent style, tab width, and trailing whitespace—across different IDEs and editors. When paired with the VS Code EditorConfig extension, it automatically overrides local user settings to keep team contributions uniform.

Developers on a team often use different editors—some prefer VS Code, while others stick with JetBrains IDEs, Neovim, or Sublime Text. Without a shared baseline, cross-platform quirks like line ending differences (Windows CRLF versus Unix LF) cause unnecessary git churn. EditorConfig solves this at the editor level before files get committed.

Add a file named .editorconfig to the root directory of your repository with content like this:

root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

Once the EditorConfig for VS Code extension is installed, the editor automatically detects this file and applies these directives on the fly, keeping every team member on the exact same page.

Putting Your Formatting Workflow Together

Building a dependable formatting pipeline requires pairing standard keyboard shortcuts with auto-format triggers and explicit workspace configurations. Combining local VS Code settings with shared configs like Prettier or EditorConfig ensures your code stays readable and consistent across every environment without manual effort during day-to-day coding.

Instead of relying on manual cleanup habits, take a few minutes to set up your environment deliberately:

• Memorize the core shortcuts: Use Shift + Alt + F for full files and Ctrl + K, Ctrl + F for targeted blocks.
• Turn on Format on Save: Add "editor.formatOnSave": true to your settings file so layout cleanup happens automatically.
• Assign default formatters: Explicitly designate tools like Prettier or language plugins to avoid editor ambiguity.
• Use repository-level configs: Commit .prettierrc or .editorconfig files to your project repositories to align settings across your whole development team.

FAQ

What is the keyboard shortcut to format code in VS Code?

Press Shift + Alt + F on Windows and Linux, or Shift + Option + F on macOS, to format your active document using the currently configured default language formatter.

How do I format only a highlighted portion of code?

Highlight the code lines you want to fix, then press Ctrl + K, Ctrl + F on Windows/Linux or Cmd + K, Cmd + F on macOS to format only that specific selection.

How do I make VS Code format my files automatically on save?

Open your settings using Ctrl + , (or Cmd + , on Mac), search for "Format On Save," and check the box, or add "editor.formatOnSave": true to your settings.json file.

Why is my VS Code shortcut not formatting my file?

This usually happens when no default formatter is assigned, your syntax contains unclosed syntax errors, or multiple conflicting extensions are competing for the same file type.

How do I set Prettier as my default formatter in VS Code?

Install the Prettier extension, then add "editor.defaultFormatter": "esbenp.prettier-vscode" to your settings.json file to set it as your global or workspace default engine.