How to enable Prettier VScode

"Learn how to use Prettier in VSCode to improve your code formatting with a simple example."

Enabling Prettier in Visual Studio Code

Prettier is an opinionated code formatter which supports many programming languages including JavaScript, HTML, CSS, and more. It is designed to make code more readable and easier to maintain by automatically formatting it according to a set of rules. To enable Prettier in Visual Studio Code, you will need to install the Prettier extension.

To install the Prettier extension, open the Extensions view by pressing ⇧⌘X (Windows, Linux Ctrl+Shift+X). Search for Prettier - Code formatter and click Install. After installation, the Prettier extension can be enabled by clicking the toggle in the bottom right of the Extensions view.

Once the extension is enabled, it will automatically format code when the file is saved. To customize the formatting rules, open the User Settings view by pressing ⇧⌘, (Windows, Linux Ctrl+,). In the search bar, type "prettier" to show all of the available options. To configure the formatting rules, select the checkbox next to each rule and press the Enter key.

To see the results of the formatting changes, open a file and save it. The file will be automatically formatted according to the rules that were set in the User Settings view. To disable formatting on a specific file, open the File > Preferences > Settings view and add the following line:

"prettier.disableLanguages": ["javascript"]

This will disable formatting on .js files, but formatting will still be enabled on other files. To disable formatting on all files, add the following line instead:

"prettier.disable": true

By enabling Prettier in Visual Studio Code, you can ensure that your code is consistently formatted and easier to read. To learn more about the available options, see the Prettier Documentation.