Prettier! And how to install into your editor...

Benjamin Langenaken — Fri, 17 Jun 2022 14:03:02 +0000

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 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.

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.

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:

VS Code

PhpStorm

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

VS Code

PhpStorm

Prettier configuration

You can add your own custom configuration for Prettier using a configuration file.
Inside this configuration file you can then specify your preferred options.

I myself use below settings inside my .prettierrc file:

{
    "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:

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

Without/false:

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

singleQuote: true
Consistently use single quotes instead of double quotes

With/true:

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

Without/false:

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

trailingComma: "es5"
Trailing commas where valid in ES5 (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":

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

"none":

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

bracketSpacing: false
Avoid having any spaces inside your brackets

With/true:

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

Without/false:

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!

Forem: Benjamin Langenaken

Prettier! And how to install into your editor...

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

Ok you got me convinced. But how to install it?

Prettier configuration