2.7 KiB
id | title |
---|---|
webstorm | Webstorm Setup |
SetUp
With ESLint Integration
If you are using the ESLint integration for prettier via eslint-plugin-prettier all you need to do is simply add a hotkey for eslint --fix
. To do this go to File | Settings | Keymap for Windows and Linux WebStorm | Preferences | Keymap, type Fix ESLint Problems
in search box and add a keyboard shortcut.
See this documentation about configuring keyboard shortcuts.
Standalone
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
prettier
(if you haveprettier
installed locally, see "Configure External Tool" above) - Arguments set
--write [other opts] $FilePath$
- Working directory set
$ProjectFileDir$
- Auto-save edited files to trigger the watcher: Uncheck to reformat on Save only (otherwise code will jump around while you type).