What is Prettier ? How to setup onVSCode

It’s a code formatter for many languages like JavaScript and technologies like React and Vue. The main reason to use is to define formatting patterns.

Prettier official logo

According to the official documentation: “Prettier is an opinionated code formatter”, it means Prettier comes with some defined rules of formatation. The main reason to use this tool is to define the formatting pattern of the code of your project, this way all of the developers involved in the project will have the same coding style by just pressing CTRL + S, it can also avoid comment in the code review like: “Hey, shouldn’t you use 2 tabs instead of 4?. In this article, we will simplify the official documentation and go straight to the point in the Prettier installation. I hope at the end of the article you will have this amazing tool working in your project.

Types of installation

We have some options:

• Code editor integration.
• Running Prettier using Commands.
• Git hooks.

The easiest one is the integration with the code editor, where you only need to install an extension, create a config file, and change some code editor settings.

Integrating Prettier With Vscode

Follow the steps below:

1. Install the Prettier extension for Vscode.
2. Create your Prettier config file (using bash to create the file).

echo {}> .prettierrc.json

1. In VSCode, Go to File > Preferences > Settings, search for prettier config path and insert the path to your prettier config file, in our case it’s just .prettierrc.json because we put in the root folder of the project.
2. Go to File > Preferences > Settings, search for Editor: Default Formatter and select Prettier — Code Formatter.

Optional Step (For a better Developer Experience)

1. Go to File > Preferences > Settings, search for Editor: Format on Save and then click in the checkbox to activate this option. This step will tell VSCode to format the file when you press CTRL + S, avoiding the needed of pressing the file formatatting shortcut.

This approach doesn’t oblige developers to use Prettier, it’s doesn’t enforce the needed of the setup, you still need to tell them to follow these steps, if this is what you want I recommend creating VSCode recommendations, but if it’s not what you want, I would say to use the other setups options to force developers to use Prettier in the project.

Below I picked an important note for the Code editor setup from the documentation: Don’t skip the regular local install! Editor plugins will pick up your local version of Prettier, making sure you use the correct version in every project. (You wouldn’t want your editor accidentally causing lots of changes because it’s using a newer version of Prettier than your project!) And being able to run Prettier from the command line is still a good fallback, and needed for CI setups.

Running Prettier using Commands

1. Install the prettier package, this is important to make sure the developers will have the same version of Prettier.

npm install --save-dev --save-exact prettier

Now you can run Prettier using the CLI, below are the most common commands, you can check the full list here:

• npx prettier — write (format all files).
• npx prettier — check (check if the files are formatted).

Customizing the formatting rules

Prettier come with some defined styles, but of course, you can custom that. To do this you need to create a file at the root of the project that will have all of the settings. The file can have different names, the main ones are .prettierrc and prettierrc.json,. You can find the list of all the different ways of naming this file in this link. For this tutorial, we will create a .prettierrc.json file.

Create manually this file or run the bash command below in the directory of your project:

touch .prettierrc.json

Inside the JSON file, you will add the rules you would like to change. Below I show some rules, but you can check the full list of possible rules here.

• Semicolons, choose if you want the end of the lines to have a semicolon.
• Tab Width, choose how many characters will be inserted when you insert a Tab.
• Quotes, choose what type you would like to use: Single or Double Quotes.
• Arrow Function Parentheses, choose if you would to avoid or always have the parentheses on your arrow functions.

The .prettierignore file

It’s a file where you tell Prettier what files and directories to ignore. The written of this file is the same as the .gitignore file, this configuration is very useful when you are running Prettier by the cli, for example, if you don’t specify anything, when you run npx prettier — write, the command will format all files include the files inside node_modules folder.

# Ignore the helpers and providers directories
/src/helpers
src/providers
# Ignore CSS Files
.css
# Next
.next
/out
# NPM
package-lock.json
# Markdowns
*.md

Conclusion

I started using Prettier in all of my projects and, I would say Prettier is one of the must-have extensions for the projects because it defines the project formatting rules and helps developers to deal with it.