prettier/docs/webstorm.md

2.7 KiB
Raw Blame History

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. Lets 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$

Example

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. Lets name it Prettier.

  • File Type: JavaScript
  • Scope: Current File
  • Program set prettier (if you have prettier 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).

Example