Summarize this article with:
Messy code slows you down. Inconsistent indentation, random spacing, and misaligned brackets make debugging harder than it needs to be.
Learning how to autoformat in VSCode eliminates these problems in seconds.
Visual Studio Code includes built-in formatting tools plus support for extensions like Prettier and ESLint. Configure them once, and your JavaScript, Python, HTML, or CSS files clean themselves up every time you hit save.
This guide walks you through enabling format on save, setting a default formatter, and configuring language-specific rules.
Five steps. Three minutes. Cleaner code forever.
How to Autoformat in VSCode
Autoformatting in VSCode is the process of automatically applying consistent code style rules to your files using built-in or extension-based formatters.
You need this when your code indentation looks messy, when team members use different styling conventions, or when you want to stop wasting time on manual formatting.
This guide covers 5 steps requiring about 3 minutes and basic familiarity with the Visual Studio Code interface.
Prerequisites
VSCode version 1.80 or later installed on Windows, macOS, or Linux.
Basic understanding of the editor settings panel.
Time estimate: 3-5 minutes.
Optional but recommended: Prettier extension installed from the Extensions Marketplace.
Step One: How Do You Open VSCode Settings?
Access the Settings UI through File > Preferences > Settings on Windows and Linux, or Code > Preferences > Settings on macOS.
The keyboard shortcut Ctrl+, (Windows/Linux) or Cmd+, (macOS) opens it faster.
A searchable panel appears where you can modify editor configuration, workspace settings, and formatting rules.
Action
- Path: File > Preferences > Settings (Windows/Linux) or Code > Preferences > Settings (macOS)
- Shortcut: Ctrl+, or Cmd+,
- Result: Settings panel opens with search bar at top
Purpose
The Settings UI is where VSCode stores all user preferences including format on save toggles, default formatter selection, and language-specific formatting behavior.
You can also open the settings.json file directly for more control.
Step Two: How Do You Enable Format On Save?
Type “format on save” in the Settings search box to filter options instantly.
Locate Editor: Format On Save and tick the checkbox to enable automatic code formatting whenever you save a file.
Changes apply immediately without restarting VSCode.
Action
- Search: Type “format on save” in Settings search field
- Setting: Editor: Format On Save
- Result: Checkbox enabled, files format automatically on Ctrl+S or Cmd+S
Purpose
This setting eliminates manual formatting entirely.
Every time you hit save, VSCode runs the assigned formatter against your JavaScript, TypeScript, Python, HTML, CSS, or JSON files.
Consistent code style without thinking about it.
Step Three: How Do You Set a Default Formatter?
Search “default formatter” in Settings to find Editor: Default Formatter.
Click the dropdown and select your preferred formatter like Prettier, ESLint, or the built-in VSCode formatter.
This tells the editor which extension handles all formatting requests.
Action
- Search: “default formatter”
- Setting: Editor: Default Formatter
- Options: esbenp.prettier-vscode, vscode.json-language-features, ms-python.python
- Result: Selected formatter becomes active for all supported file types
Purpose
Multiple formatters can conflict when installed simultaneously.
Setting a default code formatter prevents VSCode from asking which one to use every time you format.
Prettier works well for front-end development with JavaScript and TypeScript, while Black handles Python files better.
Step Four: How Do You Configure Language-Specific Formatting?
Open the Command Palette with Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (macOS) and select “Preferences: Open Settings (JSON)”.
Add language-specific blocks like [javascript], [python], or [html] to assign different formatters per file type.
Each language block overrides global settings for that specific extension.
Action
- Shortcut: Ctrl+Shift+P or Cmd+Shift+P
- Command: Preferences: Open Settings (JSON)
- Add block:
"[python]": { "editor.defaultFormatter": "ms-python.python" } - Result: Python files use Black formatter while JavaScript uses Prettier
Purpose
Black works best for Python files, Prettier handles JavaScript and TypeScript, and the built-in formatter covers JSON.
Language-specific configuration prevents formatter conflicts across your codebase.
Step Five: How Do You Use Manual Formatting Shortcuts?
Press Shift+Alt+F on Windows, Shift+Option+F on macOS, or Ctrl+Shift+I on Linux to format the current document instantly.
Right-click anywhere in the editor and select “Format Document” from the context menu for the same result.
Action
- Windows/Linux: Shift+Alt+F
- macOS: Shift+Option+F
- Alternative: Right-click > Format Document
- Result: Entire file reformatted immediately
Purpose
Manual formatting works when you need to clean up code without saving, or when format on save is disabled for specific projects.
Also useful for fixing indentation on pasted code before committing changes.
Verification
Create a test file with messy indentation and inconsistent spacing.
Save with Ctrl+S or Cmd+S.
The code should reformat automatically with proper tab size, bracket alignment, and whitespace handling.
Check the Output panel (View > Output > select your formatter) for status messages or errors.
Troubleshooting
Issue: Format On Save Not Working
Verify a formatter extension is installed and set as default.
Check that editor.formatOnSave is true in settings.json.
Some files require linting tools like ESLint configured separately.
Issue: Wrong Formatter Applying to Files
Add language-specific formatter settings in settings.json.
Use "[languageId]": { "editor.defaultFormatter": "extension.id" } syntax.
Restart VSCode after changes.
Issue: Formatting Conflicts Between Extensions
Disable duplicate formatters in the Extensions panel.
Keep only one active formatter per language.
Prettier and ESLint can work together with eslint-config-prettier installed via npm or Yarn.
Alternative Methods
Method A: GUI Settings (Covered Above)
- Time: 2-3 minutes
- Best for: Quick setup, visual preference, beginners
Method B: Direct settings.json Edit
- Time: 1 minute
- Best for: Developers comfortable with JSON, team sharing, version control
Copy workspace settings to .vscode/settings.json in your project root for team-wide consistency.
Commit this file to Git so everyone uses identical formatting rules.
Related Processes
- How to format code in VSCode manually
- How to enable error squiggles in VSCode for real-time feedback
- How to connect VSCode to GitHub for sharing formatted code
- Code refactoring workflows after formatting
- Code review process with consistent style
FAQ on How To Autoformat In VSCode
What Is the Keyboard Shortcut for Autoformat in VSCode?
Press Shift+Alt+F on Windows, Shift+Option+F on macOS, or Ctrl+Shift+I on Linux. This formats the entire document instantly. You can also right-click and select “Format Document” from the context menu.
How Do I Enable Format On Save in VSCode?
Open Settings with Ctrl+, or Cmd+,. Search for “format on save” and tick the checkbox for Editor: Format On Save. Your code now formats automatically whenever you save a file with Ctrl+S.
Why Is My Autoformat Not Working in VSCode?
Check if a formatter extension like Prettier is installed and set as default. Verify editor.formatOnSave is true in settings.json. Some languages need specific formatters configured in language-specific settings blocks.
What Is the Best Formatter Extension for VSCode?
Prettier handles JavaScript, TypeScript, HTML, CSS, and JSON well. Black works best for Python files. ESLint combines formatting with code quality checks. Choose based on your primary programming language.
How Do I Set Prettier as Default Formatter in VSCode?
Go to Settings and search “default formatter”. Select esbenp.prettier-vscode from the dropdown menu. Alternatively, add "editor.defaultFormatter": "esbenp.prettier-vscode" to your settings.json file directly.
Can I Autoformat Only Specific Languages in VSCode?
Yes. Add language-specific blocks in settings.json like [javascript] or [python]. Each block can have its own defaultFormatter setting. This prevents formatter conflicts when working across multiple languages.
How Do I Autoformat JSON Files in VSCode?
VSCode includes a built-in JSON formatter. Set "[json]": { "editor.defaultFormatter": "vscode.json-language-features" } in settings.json. Press Shift+Alt+F to format any JSON document with proper indentation and spacing.
What Is the Difference Between Format On Save and Format On Paste?
Format on save reformats the entire file when you save. Format on paste only formats code you paste from clipboard. Enable both in Settings for maximum automatic formatting coverage across your workflow.
How Do I Disable Autoformat for Certain Files in VSCode?
Add language-specific settings with "editor.formatOnSave": false. Create a .prettierignore file to exclude specific files or folders from Prettier formatting. Useful for generated code or third-party libraries.
Can I Autoformat Multiple Files at Once in VSCode?
VSCode does not support bulk formatting natively. Use the integrated terminal to run Prettier CLI with npx prettier --write . command. This formats all supported files in your project directory.
Conclusion
Setting up how to autoformat in VSCode takes minutes but saves hours over a project’s lifetime.
You now have the editor settings configured, a default formatter assigned, and language-specific rules in place.
Your code style stays consistent whether you work with Node.js modules, Git repositories, or team-shared workspace settings.
The keyboard shortcuts become muscle memory fast. Shift+Alt+F for quick fixes. Ctrl+S for automatic formatting on every save.
Consider adding a .prettierrc configuration file to your project root for team-wide consistency.
Commit your .vscode/settings.json` to share formatting rules across your entire development environment.
Clean code, zero effort. That’s the point of automatic code formatting.
Many of his resources are available on various design marketplaces and for free on Codepen.
Over the years, he's worked with a range of clients and contributed to design publications like Design Your Way, Designmodo, WebDesignerDepot, WPDean, and Speckyboy, and Slider Revolution among others.
- What Is Agentic Coding? The Next AI Dev Workflow - April 10, 2026
- From Setup To Monitoring: Why A DMARC Service Matters - April 10, 2026
- 4 Scalable Hosting Providers for Growing Small Business Websites - April 9, 2026
