Prettier! And how to install into your editor...
Tags: prettier, vscode, beginners, tutorial
Published: 2022-06-17 14:03:02

Have you ever spent too much time formatting your code? 
Making sure your indentations are correct, having a semicolon at the end of every line, or just trying to make your code more readable? 
Then look no further, [Prettier](https://prettier.io/) is here to help.

---


## So what's this Prettier all about, and why should I start using it??

Basically Prettier auto-formats your code as desired, saving you time and energy which you can then use to focus on your coding instead.
The code formatting will be consistent for the whole project, or even for a whole team working on the same project.
You can also add the option to auto-format your code every time you save your files. Very handy indeed...

It is important to note though that Prettier is an opinionated code formatter. This means that you can't completely choose how you want your code to be formatted. The team behind Prettier already did the [heavy lifting for you](https://github.com/prettier/prettier/blob/main/CHANGELOG.md).

Prettier also supports a wide array of languages. 
Including JavaScript, TypeScript, PHP, HTML, CSS, SCSS, the list goes on...
It also supports frameworks like React, Vue and Angular.
<br>
## Ok you got me convinced. But how to install it?

The easiest way to get up and running with Prettier is to install the plugin directly inside [your editor of choice](https://prettier.io/docs/en/editors.html):

**VS Code**
![prettier - vscode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mloe90xejkv8f0poawqo.jpg)

**PhpStorm**
![prettier - phpstorm](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zhfxwsx271io3mawzeoe.jpg)


Oh, and make sure you activate the "format on save" option inside your IDE settings:

**VS Code**
![save - vscode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vnrqs0v4s9gazhhta6t3.jpg)

**PhpStorm**
![save - phpstorm](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v08z8ers7x2rgxci25qi.jpg)
<br>
## Prettier configuration

You can add your own custom configuration for Prettier using a [configuration file](https://prettier.io/docs/en/configuration.html).
Inside this configuration file you can then specify your preferred [options](https://prettier.io/docs/en/options.html).

I myself use below settings inside my .prettierrc file:

```JSON
{
	"printWidth": 80,
	"tabWidth": 4,
	"useTabs": true,
	"semi": true,
	"singleQuote": true,
	"trailingComma": "es5",
	"bracketSpacing": false
}
```

**printWidth: 80**
Define after how many characters your code will wrap onto a new line

**tabWidth: 4**
Specify the number of spaces per indentation-level

**useTabs: true**
Indent lines with tabs instead of spaces

**semi: true**
Print semicolons at the end of statements

With/true:
```js
const otherPlayerGrid = document.getElementById('OtherPlayer-Grid');
```

Without/false:
```js
const otherPlayerGrid = document.getElementById('OtherPlayer-Grid')
```

**singleQuote: true**
Consistently use single quotes instead of double quotes

With/true:

```js
const otherPlayerGrid = document.getElementById('OtherPlayer-Grid');
```

Without/false:

```js
const otherPlayerGrid = document.getElementById("OtherPlayer-Grid");
```

**trailingComma: "es5"**
Trailing commas where valid in [ES5](https://www.w3schools.com/js/js_es5.asp#mark_trailing_commas) (objects, arrays, etc.).
(These can come in handy when you need to add elements to your array or object without the need to add a comma to the previous element first...)

"es5":
```js
	letters: [
		"AZERTYUIOP".split(""),
		"QSDFGHJKLM".split(""),
		["Enter", ..."WXCVBN".split(""), "Backspace"],
	],
```

"none":
```js
	letters: [
		"AZERTYUIOP".split(""),
		"QSDFGHJKLM".split(""),
		["Enter", ..."WXCVBN".split(""), "Backspace"]
	],
```

**bracketSpacing: false**
Avoid having any spaces inside your brackets

With/true:

```js
import { allWords3, guessWords3 } from './dictionaries/words3';
```

Without/false:

```js
import {allWords3, guessWords3} from './dictionaries/words3';
```
---

Hopefully you now have a better grasp of how Prettier can simplify your coding exploits.
Also, when working in a team you'll be able to avoid the endless discussions about which coding style is better, since the code will be "Prettified" the same way for every person. That's right.

Now off you go, Prettify everything!