Adding Prettier To WebStorm

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

$ npm install -g prettier

The installation should output where it is located

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

Now in WebStorm, navigate toWebStorm > Preferences > Tools > External Tools

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

Then fill out the Name and under the Tool Settings, fill out Program, Parameters , and Working directory.

Program: /usr/local/lib/node_modules/prettier/bin/prettier.js
Parameters: --write --single-quote --trailing-comma=all $FilePathRelativeToProjectRoot$
Working directory: $ProjectFileDir$

Note: These options (—-single-quote --trailing-comma=al) in the Parameters field are specific parameters that I use and like, you can specify additional parameters according on here.

After you’re done filling out all the fields here, then click OK and Apply.

You should be all set, now all you need to do is setup the hotkey to make prettier run.

Setting up Prettier Keybindings in WebStorm

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

Under Keymap use the search input box to search for prettier

Double click on Prettier and add keyboard shortcut. I am on a Mac and I personally use command + shift + p

You are now good to go, now any file that you want to prettify, just go to that specific file in WebStorm and then press your set keybinding and it should automatically prettify the file that you are currently viewing.

Bonus: Run Prettier on File Save

To run prettier on file save, all you have to do is add a keyboard shortcut on Prettier to command + s