We earn commission when you buy through affiliate links.

This does not influence our reviews or recommendations.Learn more.

Visual Studio Code, popularly known as VS Code, is one of the most used code editors.

Auto-Formatting-in-VS-Code

VS Code has built-in support for Node.js, JavaScript, and TypeScript.

Microsoft is the company that developed this free and open-source code editor.

This feature is based on a configuration file specifying formatting rules on indentation, line breaks, and spacing.

Prettier

We use a simple HTML file of a login page to demonstrate how to enable auto-formatting.

We will use Prettier to auto-format the code.

  1. peek if your document has been formatted.

Settings

This extension will automatically format all the other code you write on your VS Code.

6.Adjust Prettier Configuration parameters: Prettier is set up to perform many things by default.

However, you’re free to still customize it to suit your needs.

formatter

Go toSettingson your VS Code, search forPrettier, and adjust the controls to your liking.

A Prettier configuration file will ensure you have a consistent code style for your project.

Create a.prettierrcfile with.jsonextension to configure your project prefs.

format

In this case;

you’re able to check outPrettier docsto understand how to create consistent configuration parameters.

For instance, formatters such asPrettierandBeautifysuit HTML and CSS.

On the other hand, you might useBlackorPythonextensions to format your Python code.

image-54

As you have seen, it’s possible for you to customize the prefs of the formatter.

The best approach is creating a .prettierrc.extension file to include all the configurations for your project.

you could use linters to check for style violations, syntax errors, and programming mistakes in your code.

VS Code has hundreds of shortcuts to save you time in formatting.

it’s possible for you to even customize these commands to something memorable.

The choice of an extension will differ depending on the language that you are using.

you might install multiple code formatters depending on the programming languages you use for your projects.

Always check the documentation of the formatter you choose for your code.

This will ensure you understand the languages it supports and how to make the best of it.

More for your code