How to Set Up ESLint Autofix and Prettier on Save in WebStorm
Note: This post was updated in January 2022.
As you might know, WebStorm supports many technologies out of the box. This is true for widely used tools like ESLint and Prettier, too – you can start working with them without installing any plugins. Let’s see how you can set up WebStorm to run
eslint --fix as well as Prettier on saving a file with ⌘S / Ctrl+S.
These instructions will work for other JetBrains IDEs like IntelliJ IDEA, PhpStorm, and PyCharm, too. Please make sure you have the Prettier plugin installed in Preferences / Settings | Plugins – it isn’t bundled with some IDEs.
Set up ESLint to autofix files
First, you need to install and configure ESLint in your IDE. For information on how to do so, check out our documentation.
To enable running
eslint --fix on save checkbox. By default, WebStorm will run ESLint to autofix .js, .ts, .jsx, .tsx, .html, and .vue files. If you want to use it for other file types, don’t forget to specify them under the Run for files field using glob patterns.
If you want to tweak these settings for all new projects, from the main menu, go to File | New Projects Setup | Preferences / Settings for New Projects and make the same changes there.
Reformat code on save with Prettier
First, make sure you’ve installed and configured Prettier. You can find more information on how to do this here.
If you want to apply these settings for all new projects as well, go to File | New Projects Setup | Preferences / Settings for New Projects in the main menu and make the same changes there.
Alternative ways to run Prettier in WebStorm
There are two more ways to run Prettier in WebStorm:
- You can use a dedicated action for running Prettier, either by pressing ⌥⇧⌘P / Ctrl+Alt+Shift+P or by selecting Reformat with Prettier from the right-click context menu.
That’s about it! To learn more about Prettier, ESLint, and other technologies supported by WebStorm, check out our documentation.
The WebStorm team