How to make WebStorm format code according to eslint?
(Described steps and screenshots are from IntelliJ IDEA 2017.2)
You can add a keyboard shortcut to action 'Fix ESLint Problem'. Ensure plugin 'JavaScript Support' is installed and enabled.
First got to Preferences | Language & Frameworks | JavaScript | Code Quality Tools | ESLint and enable it. You will need to define your 'Node interpreter', 'ESlint package' and optional 'Configuration file'.
Next go to Preferences | Keymap and search there for 'eslint'. Now you can add for example the shortcut 'control + shift + L'.
I have just installed WebStorm 2017 and I do not know if this works for WS 2016. Instead of pressing Option + Command + L, to reformat your code, you could press Option + Enter when your cursor is close to an ESLint error. This will open up the context menu, then select the "ESLint: Fix current file"
If you are using a newer version of WebStorm like me, you can import the ESLint rules into WebStorm by right-clicking on the .eslintrc.js
(or other ESLint configuration files) and then click the "Apply ESLint Code Style Rules" option as shown here.
Do note as the time of writing, you will also need to exclude the indentation of <script>
tags in the "Settings" or "Preference" Menu. An awesome guy wrote a short write-up on how to do that.
Update: the answer is obsolete. The best solution is described in https://stackoverflow.com/a/46099408/1057218
Unfortunately you cannot import eslint code style configuration (WEB-19350) but you can configure the code style manually.
See the settings: "File | Settings | Editor | Code Style | JavaScript"
For import braces:
"Spaces" -> "ES6 import / export braces"