Summarize this article with:
Messy code slows you down. Inconsistent indentation, random spacing, misaligned brackets. It all adds up.
Learning how to format code in VSCode takes about three minutes. The payoff lasts your entire career.
Visual Studio Code includes built-in formatting tools plus support for extensions like Prettier and ESLint. These handle JavaScript, Python, HTML, CSS, TypeScript, and dozens of other languages.
This guide walks you through five steps: accessing the format command, configuring your default formatter, enabling format on save, formatting selections, and setting language-specific rules.
By the end, your editor will automatically clean up every file you touch.
How to Format Code in VSCode
Formatting code in VSCode is the process of automatically restructuring source code to follow consistent style rules for indentation, spacing, and bracket alignment.
Developers need this when working on team projects, maintaining a codebase with multiple contributors, or simply keeping files readable.
This guide covers 5 steps requiring approximately 3 minutes and basic familiarity with Visual Studio Code.
Prerequisites
Before you start, make sure you have everything ready.
- VSCode version 1.85 or later (works on Windows, macOS, Linux)
- A code file open in the editor (JavaScript, Python, HTML, CSS, JSON, or any supported language)
- Optional: Prettier or ESLint extension installed from the VS Code Marketplace
- Time needed: 2-3 minutes
- Skill level: Beginner
Step One: How Do You Access the Format Document Command?
The format document command applies your configured code style rules to the entire file, fixing indentation settings, whitespace formatting, and line wrapping in one action.
Action
Press Shift + Alt + F on Windows or Shift + Option + F on Mac.
Alternative path: Edit > Format Document from the menu bar.
Your code reorganizes instantly based on the active formatter.
Purpose
This keyboard shortcut is the fastest way to clean up messy code without manually adjusting every line.
Step Two: How Do You Configure Default Formatter Settings?
The default formatter setting tells VSCode which code beautifier to use when multiple extensions can handle the same file type, like choosing between Prettier and the built-in formatter for JavaScript.
Action
Open settings: File > Preferences > Settings (or Ctrl + Comma).
Search for Editor: Default Formatter in the search bar.
Select your preferred formatter from the dropdown. Most developers pick Prettier for front-end development work.
Purpose
Without a default formatter configured, VSCode might prompt you every time or use an unexpected extension.
Setting this once saves repeated interruptions. You can also learn how to set up Prettier in VSCode for more detailed configuration.
Step Three: How Do You Enable Format on Save?
The format on save feature automatically applies formatting rules every time you save a file, so you never commit poorly styled code to source control.
Action
Go to File > Preferences > Settings.
Search for Editor: Format On Save.
Check the box to enable it. Your code now formats automatically with every Ctrl + S.
Purpose
Auto formatting on save removes the extra step of manually triggering the format command.
This is especially useful during code refactoring sessions where you save frequently.
Step Four: How Do You Format a Selection of Code?
Sometimes you only need to format a specific block rather than the entire document, like when you paste code from another file or fix one messy function.
Action
Highlight the lines you want to format.
Press Ctrl + K then Ctrl + F on Windows, or Cmd + K then Cmd + F on Mac.
Only the selected code updates. The rest stays untouched.
Purpose
Selective formatting gives you control when working in files with mixed coding standards or legacy code you cannot fully reformat.
Step Five: How Do You Configure Language-Specific Formatting?
Language-specific settings let you define different tab size, indentation rules, and formatter preferences for each programming language in your workspace.
Action
Open the Command Palette with Ctrl + Shift + P.
Type “Preferences: Open Settings (JSON)” and select it. You can also learn how to open settings.json in VSCode through other methods.
Add language-specific blocks like this:
“ "[python]": { "editor.defaultFormatter": "ms-python.python", "editor.tabSize": 4 }, "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.tabSize": 2 } `
Purpose
Python typically uses 4-space indentation while JavaScript projects often prefer 2 spaces.
Language-specific configuration keeps each file type formatted according to its community standards. This matters for back-end development and front-end work alike.
Verification
After completing the steps, confirm everything works correctly.
- Open any code file and press Shift + Alt + F
- Check that indentation aligns properly
- Verify bracket alignment matches your style preference
- Make a small edit and save; confirm auto-format triggers
- Look for the formatter name in the bottom status bar
If formatting applied correctly, your code should show consistent spacing and proper line wrapping throughout the file.
Troubleshooting
Issue: Formatter Not Working
Solution: Check if you have a formatter extension installed for that language.
Go to Extensions (Ctrl + Shift + X) and search for Prettier, Beautify, or a language-specific formatter.
Some languages require dedicated extensions. Python needs the Python extension; HTML and CSS work with Prettier or Beautify.
Issue: Wrong Formatter Being Used
Solution: Right-click in the editor and select “Format Document With…” to see all available formatters.
Pick your preferred one and click “Configure Default Formatter” at the bottom of the list.
This overrides the global setting for that specific file type. Understanding linting in programming can also help you choose the right tools.
Issue: Format on Save Not Triggering
Solution: Check these settings in order:
- Editor: Format On Save must be enabled (checkbox ticked)
- Files: Auto Save should not be set to “afterDelay” (conflicts with format on save)
- Workspace settings might override user settings; check both
Also verify no configuration management file like .editorconfig is conflicting with your VSCode settings.
Issue: Inconsistent Formatting Across Team
Solution: Create a .vscode/settings.json file in your project root with shared formatter rules.
Commit this to your repository. Every team member gets identical settings when they open the project.
Add a .prettierrc file for Prettier-specific rules. This is part of good software development best practices.
Related Processes
- How to indent multiple lines in VSCode
- How to autoformat in VSCode
- How to comment in VSCode
- How to find and replace in VSCode
- Code review process for maintaining code quality
FAQ on How To Format Code In VSCode
What is the keyboard shortcut to format code in VSCode?
Press Shift + Alt + F on Windows or Shift + Option + F on Mac. This triggers the format document command instantly. The shortcut works for any supported language including JavaScript, Python, HTML, and CSS.
Why is my VSCode formatter not working?
You likely need a formatter extension installed. Check the VS Code Marketplace for Prettier, Beautify, or language-specific formatters. Also verify your default formatter setting points to an installed extension, not “none.”
How do I set Prettier as my default formatter?
Go to File > Preferences > Settings and search “Default Formatter.” Select “Prettier – Code formatter” from the dropdown. You can also configure this per language in your settings.json file for more control.
Can I format only selected code instead of the whole file?
Yes. Highlight the code section you want to format. Press Ctrl + K then Ctrl + F on Windows. On Mac, use Cmd + K then Cmd + F. Only the selection gets reformatted.
How do I enable auto format on save in VSCode?
Open Settings with Ctrl + Comma. Search for “Format On Save” and check the box. Every time you save a file with Ctrl + S, VSCode applies your formatting rules automatically. Great for maintaining consistent code style.
What is the difference between Prettier and ESLint for formatting?
Prettier handles code style like indentation, spacing, and line wrapping. ESLint focuses on code quality and catching errors. Many developers use both together. ESLint finds bugs while Prettier makes code readable.
How do I format JSON files in VSCode?
Open the JSON file and press Shift + Alt + F. VSCode’s built-in formatter handles JSON by default. For advanced options, install the Prettier extension which provides more JSON formatting control and consistent bracket alignment.
Why does format on save not work for some files?
Check if that file type has a registered formatter. Some languages need extensions first. Also verify workspace settings are not overriding user settings. Files Auto Save set to “afterDelay” can also conflict with format on save.
How do I format Python code in VSCode?
Install the Python extension from Microsoft. Then install a Python formatter like Black or autopep8. Set it as default formatter for Python files in settings.json. Now Shift + Alt + F formats Python with proper indentation settings.
Can different team members share the same formatting settings?
Yes. Create a .vscode folder in your project root with a settings.json file inside. Add your formatter rules there. Commit this to your repository. Everyone who clones the project gets identical workspace settings automatically.
Conclusion
You now know how to format code in VSCode using keyboard shortcuts, editor configuration, and auto formatting features.
The setup takes minutes. The time saved adds up to hours every month.
Consistent code style improves readability across your entire development environment. It makes code reviews faster and reduces merge conflicts in team projects.
Pick a code beautifier like Prettier or Beautify. Set your default formatter. Enable format on save. Configure language-specific rules for Python, JSON, and other file types you work with daily.
Your editor handles the tedious formatting work now. Focus on writing logic instead of fixing whitespace.
Clean, organized source code is easier to debug, easier to maintain, and easier to hand off. That is what separates professional codebases from messy ones.
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.
- 4 Scalable Hosting Providers for Growing Small Business Websites - April 9, 2026
- 7 Best Private Equity CRM Platforms for Middle-Market Deal Teams [2026 Comparison] - April 8, 2026
- Markdown Cheat Sheet - April 8, 2026
