How To Auto-Format Code in VS Code

If you’re thinking about learning to code or already write it every day, a reliable code editor, like Visual Studio Code, is a must-have. As you write code, you have to think about formatting, as it makes it easier for human beings to read it.

All those specific rules about indents and line spacing are essential but also easy to forget about as you focus on your work.

That’s why VS Code allows you to utilize auto-formatting extensions that can help you along the way. Some auto-formatting extensions can format more than one programming language, while you’ll need to integrate specialized extensions for others.

How To Auto Format HTML

Hyper Text Markup Language or HTML is a coding language used to build and display web pages. Web developers and software engineers use HTML every day and can benefit from an auto-formatting tool.

If your code editor of choice is VS Code, here’s how you can find Prettier, a popular code formatter, and turn on the auto-format feature.

1. Open Visual Studio Code on your computer.
   
2. Navigate to the extension tab on the left side of the screen. It’s represented as four blocks.
   
3. In the search bar field, enter “Prettier code formatter.”
   
4. You will get multiple search results, but select the one that was made by Prettier, not another person or company.
   
5. Click the “Install” button, and the extension will download within seconds.
   

Once you’ve installed the Prettier formatter, you can turn on the auto-format feature and ensure a consistent styling as you write code.

1. Open or create a new HTML file in VS Code.
   
2. Go to “Settings,” located in the bottom-left corner of the screen.
   
3. Enter “Format” in the search box and switch to the “User” tab.
   
4. Click the “Default Formatter” option and select “Prettier” from the list.
   
5. Scroll down a bit until you see the “Editor: Format On Save” option.
   
6. Check the box next to this option.
   
7. Go back to your file and check if the setting works.

Prettier should automatically format your HTML files as you save them.

Auto Format JSON

The JavaScript Object Notation or JSON is classified as a language-independent data interchange format. Mobile apps and computer programs use JSON files to read data from the servers and display them on the screen.

When you create a JSON file in the Visual Studio Code editor, you also need to mind the formatting. The good news is that you can use the Prettier formatter extensions in the VS Code to enforce a consistent style on your JSON files.

Here’s everything you need to do to turn on the auto-formatting feature for JSON files.

1. Launch VS Code and go to the designated extensions tab on the left side of the window.
   
2. Search for “Prettier code formatter” in the search field.
   
3. The first result is usually the one you want to click. However, to be sure, select the one that has “Prettier” listed as a developer.
   
4. Click “Install” and wait a few seconds for the formatter to download.
   
   

When the Prettier formatter is installed, ensure the auto-format feature is on by following these steps.

1. Create a new JSON file or open one that hasn’t been formatted yet.
2. Click “Settings” in the bottom-left corner.
   
3. Search for “Format.”
   
4. Click the “Default Formatter” section. from the drop-down list, select “Prettier.”
   
5. Scroll down and stop when you see the “Editor: Format On Save” option.
   
6. Click the checkbox next to this option.
   
7. Verify that the auto-format feature works.

That’s all there is to it. The Prettier extension in the VS Code editor makes the auto-formatting effortless.

Auto Format Python

These days, Python is one of the most popular programming languages and is widely used by web developers and coding enthusiasts. It is used to design and build software and websites, analyze data, automate tasks, and much more.

If you’re using VS Code to edit the Python file, you will need to use the correct formatter. While Prettier works for many different programming languages, it isn’t compatible with Python.

Fortunately, VS Code offers a solution. One of the best Python formatters in VS Code is Black, and it can be used to format code whenever you save a file automatically. However, before using Black, you need to download Microsoft’s Python extension for VS Code:

1. Open VS Code and search “Python” in the search box.
   
2. Make sure it’s Microsoft’s extension and click “Install.”
   
3. To install the Phyton formatter, enter the following text in your virtual environment: “$ pip install black”.
4. Go to “Settings” in VS Code and search “Phyton formatting provider.”
   
5. From the drop-down menu, select “Black.”
   
6. Scroll down and locate the “Editor: Format On Save” option.
   
7. Check the box next to this option.
   

Black, the Python formatter will now automatically format code every time you save the file.

VS Code Auto Format On Save

You can turn on the auto-formatting feature regardless of which programming language or code formatter you’re using in VS Code.

Most developers are using multiple code formatting extensions in VS Code, so you can ensure each of them automatically formats the file as you save it.

Here’s how that works.

1. Open Visual Studio Code editor.
   
2. Click the “Settings” gear icon in the bottom-left corner.
   
3. Search “Formatter” and click the “Editor: Default Formatter” option.
   
4. From the drop-down menu, select whichever code formatter you want to use.
   
5. Scroll down a bit and check the box next to the “Editor: Format On Save” option.
   

You can repeat the process for every code formatter you’re using in VS Code.

FAQs

Why is auto “Format On Save” not working?

If you have the “Format On Save” option in a VS Code formatter, and it’s not working correctly, you’re likely dealing with a glitch.

Perhaps the formatter version you have is experiencing issues, and you need to check if there’s an update available. However, the problem might not be on your end, and the glitch will be cleared by VS Code developers.

How do I turn off auto format in VS Code?

Disabling the auto-formatting feature is a breeze. Follow these steps to turn off auto format.

1. Open VS Code editor and click the “Settings” icon.

2. Search “Formatter” and select the formatter for which you want to disable auto format.

3. Find the “Editor: Format On Save” option and uncheck the box next to it.

Effortless Code Auto Formatting in Visual Studio Code

One of the best aspects of using VS Code is its well-designed interface, allowing even beginners to find their way around the editor.

Proper and continuous code formatting is essential for readable code, but these conventions can be cumbersome if you have to do them manually.

But the good news is that VS Code editor has numerous code formatters that can make it easier and faster to write readable code.

Whether it’s Prettier, Black, or any other extension, users always have the option to auto-format code the moment they save the file.

Which programming language do you use, and which formatter works best? Let us know in the comments section below.