Everyday Toolkit

VS Code Formatting Shortcuts: Complete Setup and Configuration Guide

Published 2026-07-28

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
  • Press Shift + Alt + F (Windows) or Shift + Option + F (macOS) to format code instantly
  • Remap default keybindings in Keyboard Shortcuts to fit your habits
  • Fix broken formatters by checking default extension settings and output logs
  • Use format-on-save and project config files to keep code style consistent across teams
VS Code Formatting Shortcuts: Complete Setup and Configuration Guide
Photo: Lingfeng Mo via Wikimedia Commons

The Default Formatting Shortcut in VS Code

To format your code in Visual Studio Code, press **Shift + Alt + F** on Windows and Linux, or **Shift + Option + F** on macOS. This hotkey applies your active formatter settings to the entire document or highlighted selection, instant-aligning indentation, bracket positioning, and long lines across your file. If you don't have a default formatter configured for the language you're writing, VS Code prompts you to choose one the first time you run this command. You can easily switch your default engine later by right-clicking inside the editor window and selecting **Format Document With...**. From that context menu, set a default tool like Prettier, ESLint, or Black. Using this single shortcut keeps your files readable without wasting time manually tapping spacebars or backspacing rogue tabs. While the factory keybindings work fine for most developers, you can rebind them whenever you like.

Understanding VS Code Formatting: What Does It Do?

VS Code Formatting Shortcuts: Complete Setup and Configuration Guide
Photo: Sunkissedguy via Wikimedia Commons
VS Code formatting cleans up your code structure by automatically balancing whitespace, wrapping long lines, aligning assignment operators, and organizing imports. Instead of altering how your program actually runs, it cleans up visual layout rules dictated by your active language extension to keep code readable and easy to inspect. Without automated formatting, every developer on a team brings their own indentation quirks and spacing habits to the repository. That creates messy pull requests filled with trivial stylistic changes instead of actual functional code updates. Under the hood, VS Code passes your raw text file to a language server or external CLI tool. That parser converts the code into an Abstract Syntax Tree (AST), applies designated style rules, and reconstructs the clean code back into your editor buffer.

Language-Specific Formatting

Language-specific formatting relies on specialized extensions built to handle unique syntax rules for individual programming languages. JavaScript and TypeScript project workflows typically rely on Prettier, while Python codebases depend on formatters like Black or Ruff to maintain consistent formatting standards across different file types in your editor. Because every language has distinct idiomatic styles, VS Code allows you to assign unique formatting engines to individual file types. You can define these overrides directly inside your `settings.json` file like this: ```json { "[python]": { "editor.defaultFormatter": "ms-python.black-formatter" }, "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" } } ``` This configuration ensures your Python files stick to strict PEP 8 formatting while your frontend web files follow standard web conventions.

Customizing VS Code Formatting Shortcuts

You can rebind VS Code's formatting hotkey by opening the Keyboard Shortcuts menu with **Ctrl + K, Ctrl + S** (or **Cmd + K, Cmd + S** on Mac), searching for "Format Document", and entering your preferred key combination. The editor checks for keybinding overlaps immediately, preventing conflicts with other built-in commands. If you prefer editing raw settings files, you can also assign custom keys directly inside `keybindings.json`: ```json [ { "key": "ctrl+alt+l", "command": "editor.action.formatDocument", "when": "editorHasDocumentFormattingProvider && editorTextFocus && !inCompositeEditor && !editorReadonly" } ] ``` Notice the `when` clause in that JSON block. It ensures the shortcut only fires when an active document formatter actually exists for the current file type, preventing unhandled key presses when editing plain text or unsupported formats.

Formatting Specific Selections vs. Entire Documents

Formatting an entire document cleans every line in your open file using **Shift + Alt + F**, whereas selection formatting targets only highlighted text using **Ctrl + K, Ctrl + F**. Target selection formatting helps you work inside legacy codebases where reformatting an entire file might generate noisy version control diffs. Reformatting a multi-thousand-line legacy file all at once can obscure historical `git blame` data for your entire team. When working on localized bug fixes inside older files, highlighting just the lines you modified and triggering **Ctrl + K, Ctrl + F** keeps your commit history clean and focused.

Troubleshooting Formatting Issues

VS Code formatting usually breaks because you lack an installed language formatter, face conflicting extension settings, or have broken syntax errors inside your file. Resolving this involves picking a default formatter in settings, checking the Output panel for extension error logs, or inspecting files for unclosed brackets and syntax typos. Here is a quick checklist to run through when your shortcut stops responding: * **Syntax Check:** Most code formatters refuse to run if your code contains critical syntax errors. Fix broken brackets or unclosed strings first. * **Select Default Formatter:** Press **F1**, search for `Format Document With...`, hit Enter, and select **Configure Default Formatter...**. * **Inspect Output Logs:** Open the panel with **Ctrl + Shift + U** (or **Cmd + Shift + U**), open the dropdown menu on the right, and select your formatter's name to view terminal stack traces.

Comparing Formatting Tools and Extensions

Selecting the right formatting extension depends heavily on your language ecosystem and team preferences. Prettier remains the standard for web frontends, Black provides unyielding PEP 8 compliance for Python, and ESLint handles combined code linting and formatting. Most top-tier options are completely free and open-source. Some tools offer deep configuration options, while others intentionally lock down settings so entire software teams are forced to adopt an identical layout format.
Tool Best For Type Key Advantage
Prettier JavaScript, TS, HTML, CSS, JSON Opinionated Formatter Supports broad language ecosystems with zero setup
Black Python Strict Formatter Deterministic output eliminates code style debates
ESLint JavaScript, JSX, TypeScript Linter + Auto-Fixer Catches logical code bugs alongside formatting rules
Ruff Python Fast Linter & Formatter Extremely fast Rust-based replacement for Flake8 and Black

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

Advanced Formatting Techniques

Advanced VS Code formatting pairs local settings with shared workspace configuration files like `.prettierrc` or `pyproject.toml` alongside automated editor triggers. Turning on features like "Format on Save" or "Format on Paste" keeps your files continuously formatted automatically, completely stripping out the need for manual hotkey invocation. To enable format-on-save globally, open your settings interface (**Ctrl + ,** or **Cmd + ,**) and turn on **Editor: Format On Save**. Alternatively, drop this directly into your global `settings.json`: ```json { "editor.formatOnSave": true, "editor.formatOnPaste": true } ``` You can also use commit tools like Husky along with `lint-staged` to enforce formatting checks before code hits version control. That prevents unformatted commits from creeping into main branches even if an author forgot to run local editor hotkeys.

Best Practices for Formatting in VS Code

A clean formatting setup relies on workspace-level configuration files, automated format-on-save toggles, and shared editor settings stored in repository version control. Checking settings directly into Git ensures everyone on your team automatically uses identical style rules, keeping git diffs minimal and pull requests focused on actual code changes. Create a `.vscode/settings.json` file in the root directory of your shared projects. Store project-specific formatters and line-length limits in that file, then check it directly into Git. That way, whenever a contributor clones the repository, VS Code automatically adopts those project rules over their personal preferences. ---

FAQ

How do I change the VS Code format document shortcut?

Press `Ctrl + K Ctrl + S` (or `Cmd + K Cmd + S` on macOS) to open Keyboard Shortcuts. Search for "Format Document", double-click the command entry, and type your new key binding. Make sure to save changes and double-check for conflicts with existing command shortcuts.

Why isn’t my VS Code formatting working?

This usually happens when no default formatter is assigned or your code contains syntax errors. Right-click your editor window, pick "Format Document With...", and select your default formatter. Also check the Output tab (`Ctrl + Shift + U`) under your formatter's name to view runtime error logs.

Can I format only a selection of code?

Yes. Highlight the specific lines you want to clean up, then press `Ctrl + K Ctrl + F` on Windows/Linux or `Cmd + K Cmd + F` on macOS. Alternatively, use the main formatting shortcut (`Shift + Alt + F`), which formats only the selection if text is active.

What’s the difference between Prettier and Black?

<

🛍 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.