Every so often I have to start up a new project. Whether that’s a brand new / greenfield starting from scratch project, or joining an existing team and cloning an existing repo, one of the very first things I want to get working is Prettier.
And more times than I can count, I have been left scratching my head wondering why Prettier just won’t run when I save a file.
Actually, the solution – in my case – has always been pretty simple.
But for completeness, and for my own future sanity, here is the full process.
Automatically Run Prettier on Save in Webstorm
Personally, I use WebStorm.
WebStorm can be easily configured to run Prettier whenever you make changes to a file. In my experience this process is a little unintuitive depending on how ‘already configured’ your project is.
So possibly two steps are required where you might think only one is needed.
First the obvious one. Trigger Prettier on save.
From your open project in WebStorm, click File > Settings…
Then in the top left hand corner, type ‘prettier’ into the search box. This will helpfully narrow down all of the many Settings to only those that have some mention of ‘Prettier’.
Now, check the ‘Automatic Prettier configuration‘ checkbox, and ‘Run on save‘.
This looks like it should work. And again, if you have already set up your project for other reasons, it might be fine.
But in my experience this is where I most frequently come unstuck.
You could now try clicking Apply and then OK.
However, I think it’s worth checking your Node JS interpreter settings whilst you’re here.
Ensure Node.js Interpreter Is Properly Configured
As I say above, depending on how long you have been working on this current project, you may or may not have already configured your Node interpreter setting in WebStorm.
On new projects, for me at least, it always defaults to “No executable found in $PATH.”
I think this is because I use NVM, and my version of Node isn’t global. Maybe. I’m not sure.
Make sure you have something selected here.
To quickly get to this screen, type in ‘node’ in the top left hand search field, and then navigate to Languages & Frameworks > Node.js.
From there, pick an option from the drop down list:
Make sure to Apply this.
If you now OK this menu, and get back to your editor view, you should find that pressing ctrl + s, or simply changing your file and waiting for ‘autosave’ to kick in, applies the Prettier formatting as expected.
And there you go.
That is the basic essentials of getting Prettier to run automatically on save in WebStorm. The key step, the one I tend to miss (and get confused by) is making sure you have a Node interpreter set up for your project.