How to make WebStorm format code according to eslint?
WebstormEslintWebstorm Problem Overview
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 { something } from 'somewhere' as import {something} from 'somewhere'.
Is there a way to make WebStorm to format code according to eslint configuration?
Webstorm Solutions
Solution 1 - Webstorm
(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'.
Solution 2 - Webstorm
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"
Solution 3 - Webstorm
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.
Solution 4 - Webstorm
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"
Solution 5 - Webstorm
Solved for me in 2021 :
Webstorm is using Prettier package and there is an option:
Preferences | Languages & Frameworks | JavaScript | Prettier -> On 'Reformat Code' action
Now Webstorm uses eslint rules to reformat the code on Reformat Code hotkey.
Solution 6 - Webstorm
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.
Solution 7 - Webstorm
The best way is to automate it by using a Macro.
- Go to Edit | Macro | Start Macro Recording
- Go to File | Save All
- Press Strg + Shift + A
- Search for eslint and run it.
- Go to Edit | Macro | Stop Macro Recording
- Go to Edit | Macro | Edit Macros and remove everything expect the two Action:...
- 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 :)
Solution 8 - Webstorm
For those still in trouble, I did all the steps of the answers above and it was not working at all.
For me the problem was the Node version I was using in my terminal (12.x) vs the .nvmrc and "engine" in the package.json of the project
After the two changes pointed above my eslint returned to work.
p.s: I'm assuming you have all the dependencies installed as well as a .eslintrc.* in the root of your project
