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.
