Prettier is one of the best code formatter out there at the time of this post.

To add prettier visit this url and follow installation instructions.

(https://github.com/prettier/prettier) you first need to install it globally via yarn or npm.

$ npm install -g prettier

Once its done installing you should see the see where it is located in your terminal.
Very Likely will be this path:

$ /usr/local/bin/prettier -> /usr/local/lib/node_modules/prettier/bin/prettier.js

Now in WebStorm, Follow this steps:

1) navigate to WebStorm > Preferences > Tools > External Tools

2) Click on the + icon to add a new external tool.

3) fill out the Name and under the Tool Settings, fill out Program, Arguments, and Working directory.

In previous version of webstorm “Arguments” are shown as “Parameters”

Program: /usr/local/lib/node_modules/prettier/bin/prettier.js

Arguments: –write –single-quote –trailing-comma=all $FilePathRelativeToProjectRoot$

Working directory: $ProjectFileDir$

The arguments  single-quote –trailing-comma=al are the default,  you can specify additional parameters. Find that information Here https://prettier.io/docs/en/

Once you are done click OK and Apply

Finally all you need to do is setup the hotkey to make prettier run.

Keybindings in WebStorm

To set the keybindings for Prettier, navigate to WebStorm > Preferences > Keymap

Once there “Keymap” use the search input box to search for prettier

Double click on Prettier and add keyboard shortcut. People on my team always use in Mac command + shift + p  and Ctrl + shift + p in Windows. Feel free to place your own.

You are now all set up, now just press your set keybinding on any file and it should automatically prettify the file that you are currently viewing.

LEAVE A REPLY

Please enter your comment!
Please enter your name here