Edit

Webstorm Setup

Configure External Tool

https://blog.jetbrains.com/webstorm/2016/08/using-external-tools/

Go to File | Settings | Tools | External Tools for Windows and Linux or WebStorm | Preferences | Tools | External Tools for OS X and click + to add a new tool. Let’s name it Prettier.

• Program set prettier

If on the other hand you have prettier installed locally, replace the Program with $ProjectFileDir$/node_modules/.bin/prettier (on OS X and Linux) or $ProjectFileDir$\node_modules\.bin\prettier.cmd (on Windows).

• Parameters set --write [other opts] $FilePathRelativeToProjectRoot$
• Working directory set $ProjectFileDir$

Process directories

• Clone the External tool created above and name it Prettier Directories
• Parameters set --write [other opts] $FileDirRelativeToProjectRoot$/**/{*.js,*.jsx}

Usage

• Cmd-Shift-A on OS X or Ctrl+Shift+A on Windows and Linux
• Type: 'prettier' and hit enter

Configure Keymap

Now when you setup External Tool I guess you want to add hotkey for it. Go to File | Settings | Keymap for Windows and Linux WebStorm | Preferences | Keymap and type external tool name in search box.

See this documentation about configuring keyboard shortcuts.

Using File Watcher

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

Go to File | Settings | Tools | File Watchers for Windows and Linux or WebStorm | Preferences | Tools | File Watchers for OS X and click + to add a new tool. Let’s name it Prettier.

• File Type: JavaScript
• Scope: Current File
• Program set the full path to a prettier executable, such as /Users/developer/repo/jest/node_modules/.bin/prettier (on OS X and Linux) or C:/\Users\developer\repo\jest\node_modules\.bin\prettier.cmd (on Windows).
• Arguments set --write [other opts] $FilePath$
• Working directory set $ProjectFileDir$
• Immediate file synchronization: Uncheck to reformat on Save only (otherwise code will jump around while you type).