Getting started with Prettier — Modern JavaScript Tooling (Part 1)

Giorgi Kapanadze — Mon, 27 Jul 2020 14:36:23 +0000

Getting started with Prettier — Modern JavaScript Tooling (Part 1) Giorgi Kapanadze Mon, 07/27/2020 - 18:36

JavaScript has grown into an enormous ecosystem for the past couple of years, which makes learning this language exciting and challenging at the same time. The vast array of available tools and frameworks might be a roadblock for some junior developers who just can’t figure out where to start and what to use.

The general rule of thumb is to get the basics of the language first and move to nuts and bolts down the road. For sure, this is a valid approach. In my experience, though, some tools can be essential even for the absolute beginners, and knowing how to set up and use those can make the learning curve smoother.

So in this series of posts, I’ll be covering a couple of must-have (or, must-take-a-look) tooling of the modern JS ecosystem, as well as tips on how to use and integrate them in our projects.

Before we begin, let’s set up our environment. We won’t need much for the tools discussed in this post — just get the latest Node.js on your machine, if you don’t have it installed already. Node is compatible with all three operating systems, so you’re free to use your OS of choice for the development machine.

Coding style

Imagine that you’re working on a project with a couple of fellow developers. All those guys and gals will have their preferred coding styles — from indentation preferences to bracket placements, line wrapping, and commenting methods. The resulting code of a team without a strict coding style guidelines will be a mess to read and hard to follow through.

This is why the coding style and standards have to be agreed upon at the start of the project and followed by all members without any exceptions. But we’re all humans and we have this beautiful (but sometimes — annoying) thing called muscle memory. Muscle memory in our fingers helps us perform routine tasks without even thinking (like creating a code block for IF statement) but also prevents us from “switching” between those behaviors quickly. This is why it’s pretty hard to switch your coding mannerisms from project to project and it’s unreliable to hope that the coding styles will be followed by every team member all the time.

Prettier solves this problem by automating the code formatting.

Let’s create a new directory and initialize NPM in it. Open terminal, jump to the project folder and run npm init -y command. This will create the following project.json file for us:

Now we can add Prettier to our project. Use this command to install it in our project:

npm install --save-dev prettier

The --save-dev flag tells NPM to install this package only for the development environment (we won’t need it elsewhere since the code will be formatted during the development.) After the command is finished, we’ll have the node_modules folder in our project directory and the package.json will be updated as well (you’ll see the devDependencies group since the Prettier was installed for the dev environment only):

Now let’s make some mess for the Prettier to do its job. Create a new .js file and type some code without any formatting consistencies. Something like this:

This code has several formatting issues: for one, the strings are written with both types of quotes — single and double; the function block is indented with 4 spaces, while the if-statement block is using 2 spaces for the same job; some lines are too long; and so on.

Let’s put Prettier to work. Create a new script called format that runs the Prettier for us. Our package.json should look like this:

{
  "name": "modern-js",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
   "format": "prettier --write"
  },
  "keywords": [],
  "license": "ISC",
  "devDependencies": {
   "prettier": "^1.19.1"
  }
}

The scripts described in package.json lets us run complex commands from the node_modules/.bin directory in a shortcut-like manner. Let’s take a look inside this folder:

prettier is a regular executable JavaScript file. Scripts in package.json help us create a “shortcut” for a command like this:

./node_modules/.bin/prettier --write src/index.js

To run the same command with NPM script, we can just run this command from our project root directory (the same directory that holds package.json):

npm run format src/index.js

The last part of both commands — src/index.js — tells Prettier which file to format. After the command is finished, our messy file will look like this:

I think we can agree that this code is, indeed, prettier. But most importantly, it’s easier to read or quickly scan to understand its structure. The code is more consistent, line indentations are the same, if-else blocks look much better and chained methods are broken into lines.

But this style might not be the same as what your team has agreed on. For example, the team might consider 2-space indentation as their default, or to use single quotes for strings, instead of double ones. This is why Prettier rules are configurable and you can change the defaults with the .prettierrc file. Let’s create it in our project’s root directory and put this piece of JSON in it:

{
  "tabWidth": 4,
  "semi": true,
  "singleQuote": true
}

With this we’re letting Prettier know that we prefer 4 spaces for indentation (tabWidth); also that we want semicolons to be compulsory (semi) and to force single-quotes for writing string literals instead of double ones (singleQuote).

After running the format script again, we’ll get the src/index.js file formatted with our configured rules:

The configuration options we used are just a small part of the set prettier configuration options you can use to match its behavior with your project style guidelines.

Before we wrap up, let’s extend our format command a bit and make it more flexible to use. Most probably, we’ll be needing the formatting guidelines forced on all files in our project, not just on a single one. Instead of running the script on all files one by one, we can specify a file name pattern for Prettier that will pick up all .js files inside our src/ directory and it’s child directories as well.

Open the package.json file and add the following script to the scripts object:

"format:all": "prettier --write \"src/**/*.js\""

To see the new script in action, create some more .js files in the src/ directory; or create some directories in src/ and put the .js files inside those.

Now, when you run npm run format:all all your .js files in src/ directory will be (recursively) picked up by Prettier and re-formatted with rules specified in the .prettierrc configuration file.

In this small introduction to Prettier you’ve learned how to use it in terminal and with NPM scripts. It’s very easy to integrate this tool in your project workflow, configure it, and forget about code formatting altogether. You can never think about the formatting guidelines of a specific project, just focus on your code and Prettier will do the rest.

Prettier can also be integrated into your favorite code editor (for example, see extensions for VS Code, Atom, or Sublime editors). With integration like this, the code formatting will be performed every time you save the file, which makes using this tool even more comfortable and seamless.

Language English