How to make WebStorm format code according to eslint?

Question

I\'ve specified eslint configuration for my WebStorm project. But it does not seem to apply to code reformat feature. For example, it continues to format import { somethin

Answer 1

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"

Answer 2

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.

Answer 3

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"

Answer 4

A temporary fix for now that I've been using is to export my ESLint config to JSCS. It works pretty nicely with WebStorm and PHPStorm!

I used this package called Polyjuice, and here is the output from my eslint config.

Answer 5

The best way is to automate it by using a Macro.

1. Go to Edit | Macro | Start Macro Recording
2. Go to File | Save All
3. Press Strg + Shift + A
4. Search for eslint and run it.
5. Go to Edit | Macro | Stop Macro Recording
6. Go to Edit | Macro | Edit Macros and remove everything expect the two Action:...
7. Go to File | Settings | Keymap | Macros and add Strg + S on the Macro

This works great and makes it a lot more easier to work :)

Answer 6

(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'.