![\"Automatically](\"https:\/\/itsfoss.com\/content\/images\/2025\/05\/automatically-format-code-on-save.webp\")
<\/p>\n<\/p>\n
Manually formatting code can be tedious, especially in fast-paced or collaborative development environments. <\/p>\n
While consistent formatting is essential for readability and maintainability, doing it by hand slows you down and sometimes leads to inconsistent results across a project.<\/p>\n
In this article, I\u2019ll walk you through the steps to configure Visual Studio Code to automatically format your code each time you save a file. <\/p>\n
We’ll use the VS Code extension called Prettier<\/a>, one of the most widely adopted tools for enforcing code style in JavaScript, TypeScript, and many other languages. <\/p>\n By the end of this guide, you’ll have a setup that keeps your code clean with zero extra effort.<\/p>\n To start, you’ll need the Prettier – Code Formatter<\/strong> extension. This tool supports JavaScript, TypeScript, HTML, CSS, React, Vue, and more.<\/p>\n Open VS Code, go to the Extensions<\/strong> sidebar (or press Click on Install<\/strong> and reload VS Code if prompted.<\/p>\n Now that Prettier is installed, let\u2019s make it run automatically whenever you save a file.<\/p>\n Open Settings<\/strong> via In the search bar at the top, type This tells VS Code to auto-format your code whenever you save a file, but that\u2019s only part of the setup.<\/p>\n If saving a file doesn\u2019t automatically format your code, it\u2019s likely due to multiple formatters being installed in VS Code. Here\u2019s how to make sure Prettier is set as the default:<\/p>\n Now try saving your file again. If Prettier is correctly selected, it should instantly reformat the code on save.<\/p>\n In some cases, you might want to save a file without<\/em> applying formatting, for example, when working with generated code or temporary formatting quirks. To do that, open the Command Palette again and run \u201cSave Without Formatting.\u201d<\/strong><\/p>\n Prettier works well out of the box, but you can customize how it formats your code by adding a Here\u2019s a simple example:<\/p>\n This configuration tells Prettier to use single quotes, add trailing commas where valid in ES5 (like in objects and arrays), and omit semicolons at the end of statements.<\/p>\n There are many other options available such as adjusting print width, tab width, or controlling how JSX and HTML are handled.<\/p>\n You can find the full list of supported options in Prettier\u2019s documentation<\/a>, but for most projects, a few key settings in Create or open any file, JavaScript, TypeScript, HTML, etc. Add some poorly formatted code. <\/p>\n Then simply save the file ( As you can see, Prettier neatly indents and spaces each part of the html code, even across different embedded languages.<\/p>\n It doesn’t matter if you are vibe coding<\/a> or doing everything on your own, proper formatting is a sign of writing good code.<\/p>\n We\u2019ve already covered the fundamentals of writing clean, consistent code – indentation<\/a>, spacing, and word wrap<\/a>, and automatic formatting builds directly on top of those fundamentals.<\/p>\n Once configured, it removes the need to think about structure while coding, letting you focus on the logic.<\/p>\nStep 1: Install Prettier extension in VS Code<\/h2>\n
Ctrl + Shift + X<\/code>), and search for Prettier<\/strong><\/a>.<\/p>\n![\"Automatically](\"https:\/\/itsfoss.com\/content\/images\/2025\/05\/prettier-vscode-extension.png\")
<\/figure>\nStep 2: Enable format on save<\/h2>\n
Ctrl + ,<\/code> or by going to File > Preferences > Settings<\/strong>.<\/p>\n![\"Automatically](\"https:\/\/itsfoss.com\/content\/images\/2025\/05\/accessing-settings.png\")
<\/figure>\nformat on save<\/code> and then Check the box for Editor: Format On Save<\/strong>.<\/p>\n![\"Automatically](\"https:\/\/itsfoss.com\/content\/images\/2025\/05\/format-on-save.png\")
<\/figure>\nTroubleshooting<\/h2>\n
\n
Ctrl + Shift + P<\/code> (or Cmd + Shift + P<\/code> on Mac) to bring up the Command Palette.<\/li>\n![\"Automatically](\"https:\/\/itsfoss.com\/content\/images\/2025\/05\/format-document-1.png\")
<\/figure>\n\n
![\"Automatically](\"https:\/\/itsfoss.com\/content\/images\/2025\/05\/configure-formatter.png\")
<\/figure>\n\n
![\"Automatically](\"https:\/\/itsfoss.com\/content\/images\/2025\/05\/multiple-formatter.png\")
<\/figure>\n![\"Automatically](\"https:\/\/itsfoss.com\/content\/images\/2025\/05\/save-without-format-1.png\")
<\/figure>\nOptional: Advanced configuration<\/h2>\n
.prettierrc<\/code> configuration file at the root of your project.<\/p>\n{\n \"singleQuote\": true,\n \"trailingComma\": \"es5\",\n \"semi\": false\n}\n<\/code><\/pre>\n.prettierrc<\/code> go a long way.<\/p>\nTry It Out<\/h2>\n
<html><head><style>body{background:#fff;color:#333;font-family:sans-serif}<\/style><\/head><body><h1>Hello<\/h1><script>document.querySelector(\"h1\").addEventListener(\"click\",()=>{alert(\"Hello World!\")})<\/script><\/body><\/html>\n<\/code><\/pre>\n![\"Automatically](\"https:\/\/itsfoss.com\/content\/images\/2025\/05\/html-code-unformatted-1.png\")
<\/figure>\nCtrl + S<\/code> or Cmd + S<\/code>), and watch Prettier instantly clean it up.<\/p>\n![\"Automatically](\"https:\/\/itsfoss.com\/content\/images\/2025\/05\/saving-unformatter-html-code-file.gif\")
<\/figure>\nWrapping Up<\/h2>\n