131

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?

Improve this question
1
  • Accepted answer is outdated. I used nixklai and then uptoyou answers. Commented May 8, 2022 at 6:37

9 Answers 9

Reset to default
214

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

enter image description here

Next go to Preferences | Keymap and search there for 'eslint'. Now you can add for example the shortcut 'control + shift + L'.

enter image description here

Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

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.
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.
What if you do other projects than javascript :)
@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.
@MikhailBatcer, I just fixed it
|
57

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.

Improve this answer

4 Comments

"Apply ESLint Code Style Rules" - too easy, thank you @nixklai
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."
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.
Same for .prettierrc
43

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.

enter image description here

Improve this answer

7 Comments

OK, there are loads of comments saying that "this should be the accepted answer", in 2022 this should be the accepted answer!
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 thanks a lot, i'm open to update if you provide more info
@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
@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...
|
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" enter image description here

Improve this answer

2 Comments

This just runs eslint --fix <path-to-current-file> for you.
would be nice to have a shortcut keybinding for it.
14

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"

Improve this answer

Comments

2

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 :)

Improve this answer

Comments

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.

Improve this answer

1 Comment

Now WebStorm does support ESLint "out of the box" and it works as expected to help style your code, see jetbrains.com/webstorm/whatsnew/#v2017-2-eslint
0

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

enter image description here

enter image description here

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

enter image description here

Improve this answer

Comments

0

enter image description here

WebStorm 2023.3.2

Go to Preferences | Language & Frameworks | JavaScript | Code Quality Tools | ESLint, select the automatic one and the run eslint -fix option, this fix the problem if there are config files such as .eslintrc file in your root directory.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.