prettier/docs/webstorm.md

---

id: webstorm

title: WebStorm Setup

WebStorm 2018.1 and above

Use the Reformat with Prettier action (Alt-Shift-Cmd-P on macOS or Alt-Shift-Ctrl-P on Windows and Linux) to format the selected code, a file, or a whole directory.

Don't forget to install prettier first.

To use Prettier in IntelliJ IDEA, PhpStorm, PyCharm, and other JetBrains IDEs, please install this plugin.

For older IDE versions, please follow the instructions below.

Running Prettier on save using File Watcher

To automatically format your files using prettier on save, you can use a file watcher.

Go to Preferences | Tools | File Watchers and click + to add a new watcher. Let’s name it Prettier.

• File Type: JavaScript (or Any if you want to run prettier on all files)
• Scope: Project Files
• Program: full path to .bin/prettier or .bin\prettier.cmd in the project's node_module folder. Or, if Prettier is installed globally, select prettier on macOS and Linux or C:\Users\user_name\AppData\Roaming\npm\prettier.cmd on Windows (or whatever npm prefix -g returns).
• Arguments: --write [other options] $FilePathRelativeToProjectRoot$
• Output paths to refresh: $FilePathRelativeToProjectRoot$
• Working directory: $ProjectFileDir$
• Auto-save edited files to trigger the watcher: Uncheck to reformat on Save only.

WebStorm 2017.3 or earlier

Using Prettier with ESLint

If you are using ESLint with eslint-plugin-prettier, use the Fix ESLint Problems action to reformat the currect file – find it using Find Action (Cmd/Ctrl-Shift-A) or add a keyboard shortcut to it in Preferences | Kymap and then use it.

Make sure that the ESLint integration is enabled in Preferences | Languages & Frameworks | JavaScript | Code Quality Tools | ESLint.

Using Prettier as External Tool

Go to Preferences | Tools | External Tools and click + to add a new tool. Let’s name it Prettier.

• Program: prettier on macOS and Linux or C:\Users\user_name\AppData\Roaming\npm\prettier.cmd on Windows (or whatever npm prefix -g returns), if Prettier is installed globally
• Parameters: --write [other options] $FilePathRelativeToProjectRoot$
• Working directory: $ProjectFileDir$

If Prettier is installed locally in your project, replace the path in Program with $ProjectFileDir$/node_modules/.bin/prettier on macOS and Linux or $ProjectFileDir$\node_modules\.bin\prettier.cmd on Windows.

Press Cmd/Ctrl-Shift-A (Find Action), search for Prettier, and then hit Enter.

It will run prettier for the current file.

You can add a keyboard shortcut to run this External tool configuration in Preferences | Keymap.