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 { something } from 'somewhere' as import {something} from 'somewhere'.

Is there a way to make WebStorm to format code according to eslint configuration?

Accepted answer is outdated. I used `nixklai` and then `uptoyou` answers. — Mikhail Batcer, May 08 '22 at 06:37

score 202 · Answer 1 · answered Sep 07 '17 at 14:51

202

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

answered Sep 07 '17 at 14:51

phse

2,681
2
20
14

1

This is applicable on Webstorm also. Thanks. – Ahmed Hassanien Mar 26 '19 at 13:35
1

I think this is the recommended answer because I only want to fix the current file and not to run the eslint command and fix the whole project due to VCS problems when we work in a team project. – hermeslm Jul 10 '19 at 15:34
26

It's super stupid that IntelliJ not realises that eslint is configured and opt for using this as the default formatter. Just as VS Code does it. – 5422m4n Aug 27 '19 at 14:03
3

What if you do other projects than javascript :) – Steve Moretz May 03 '21 at 14:31
@stevemoretz yeah +1, this is kinda sucky... I've tried keeping both bindings, but ESLint is either run first or not at all. I've opted to set it to a different, but close shortcut. – Marv Nov 04 '21 at 09:43
This is outdated. Please see uptoyou answer – Mikhail Batcer May 08 '22 at 06:36
1

@MikhailBatcer, I just fixed it – SiberianGuy May 12 '22 at 11:44

score 47 · Answer 2 · answered Mar 04 '20 at 12:57

47

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.

answered Mar 04 '20 at 12:57

nixklai

579
4
7

"Apply ESLint Code Style Rules" - too easy, thank you @nixklai – MeerArtefakt Jan 17 '22 at 21:14
This answer updates settings within WebStorm to match the eslint (and prettier) rules. "ESLint: The project code style and editor settings were updated based on '.eslintrc.json'. The following rule was applied: prettier/prettier." – Jared Dickson Jan 20 '22 at 15:06
This should be the accepted answer as it is the only one that fits the use-case raised in the initial question, which is to make WebStorm format like this on its own, rather than fix the formatting after the fact. – AntoineB Mar 09 '22 at 10:26

score 32 · Answer 3 · answered Mar 22 '17 at 21:26

32

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"

answered Mar 22 '17 at 21:26

Oyvind Habberstad

1,004
11
14

4

This just runs `eslint --fix ` for you. – Rory O'Kane Dec 12 '17 at 21:08
2

would be nice to have a shortcut keybinding for it. – bvdb Jan 26 '21 at 13:11

score 27 · Accepted Answer · edited Jan 30 '23 at 04:36

27

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.

edited Jan 30 '23 at 04:36

Pang

9,564
146
81
122

answered Nov 22 '21 at 21:56

uptoyou

1,427
19
24

OK, there are loads of comments saying that "this should be the accepted answer", in 2022 this should be the accepted answer! – Matthew Dolman Apr 06 '22 at 03:46
Your answer works but is incomplete. It doesn't cover the steps for eslint and did not specify that you have to do the same as for .eslintrc.js i.e. right click .prettierrc.json and apply prettier rules. – joeyj Apr 07 '22 at 10:26
@joeyj thanks a lot, i'm open to update if you provide more info – uptoyou Apr 07 '22 at 11:53
1

@uptoyou sure, so what worked for me were these steps: 1. install eslint and setup eslintrc.js 2. install prettier and setup prettierrc.json 3. install eslint-config-prettier and extend eslintrc to include prettier 4. right click and apply eslint style rules 5. right click and apply prettier 6. ensure "run eslint --fix on save" is checked 7. ensure "on reformat code action" is checked (this step is the one from your answer without which, CTRL + L mess the formatting of the JS code a lot). Note though if eslint and prettier aren't applied first, your answer does not fix the formatting problem – joeyj Apr 10 '22 at 23:03
@uptoyou, actually please ignore the above. After using the suggested steps for a while, it does seem webstorm/phpstorm still doesn't understand properly how to mix both tool. The only way I get a consistent behaviour is when running them via CLI with ```eslint . --fix --ext .js,.vue && npx prettier --write .```. The formatting shortcuts are unusable for me... – joeyj Apr 14 '22 at 05:04
I've changed the accepted answer to this one – SiberianGuy May 12 '22 at 11:43
in 2022, this one worked for me. Didn't touched eslint settings at all. – rufatZZ Sep 22 '22 at 12:24

anstarovoyt · Answer 5 · 2018-02-27T16:15:28.963

13

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"

edited Feb 27 '18 at 16:15

answered Jan 19 '17 at 10:30

anstarovoyt

7,956
2
27
35

score 1 · Answer 6 · answered Apr 27 '17 at 19:33

1

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.

answered Apr 27 '17 at 19:33

Cameron

1,524
11
21

Now WebStorm does support ESLint "out of the box" and it works as expected to help style your code, see https://www.jetbrains.com/webstorm/whatsnew/#v2017-2-eslint – Cameron Oct 06 '17 at 17:03

score 0 · Answer 7 · answered Oct 22 '19 at 16:14

score 0 · Answer 8 · answered Feb 23 '21 at 01:41

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

How to make WebStorm format code according to eslint?

8 Answers8

Solved for me in 2021 :

Linked