I've defined some rules in ESLint config file. This file is attached in

Preferences
  ->Languages and Frameworks
     ->JavaScript
       ->Code Quality Tools
         ->ESLint

And I see it works fine because in code editor every rule is shown when there appear to be an error which doesn't match them. Also when I use "Code inspector"

Code
  -> Inspect code

Inspector finds all the errors and shows them in little window at the bottom. There is also a possibility to apply autofix to each of this errors but when I try to do this I got redirected to ESLint config page in PhpStorm preferences section. It looks like this:

there should be a link which should fix that automaticly when I click on it but instead there is a link which just opens ESLint config popup window:

How can I get this to work fine? I've been trying to look in PhpStorm docs about it but no success.

I've defined some rules in ESLint config file. This file is attached in

Preferences
  ->Languages and Frameworks
     ->JavaScript
       ->Code Quality Tools
         ->ESLint

And I see it works fine because in code editor every rule is shown when there appear to be an error which doesn't match them. Also when I use "Code inspector"

Code
  -> Inspect code

Inspector finds all the errors and shows them in little window at the bottom. There is also a possibility to apply autofix to each of this errors but when I try to do this I got redirected to ESLint config page in PhpStorm preferences section. It looks like this:

there should be a link which should fix that automaticly when I click on it but instead there is a link which just opens ESLint config popup window:

How can I get this to work fine? I've been trying to look in PhpStorm docs about it but no success.

• javascript
• phpstorm
• webstorm
• eslint

• Have you checked if the paths are valid that you put in there? E.g. pops up in NetBeans, too if the paths are bad. If yes you should probably file a bug report. Guys at intelliJ tend to have good support imho. – m02ph3u5 Commented Sep 13, 2015 at 7:52
• 2 ESLint is a 3rd party tool; IDE just has nice integration that allows to display all issues reported by that tool inside IDE window in a similar fashion as built-in (native for IDE) inspections work. Issues reported by 3rd party tools are not mapped to built-in inspections -- they are completely separate things. I'm not 100% sure, but considering that ESLint works with whole file, there would no way to fix only 1 error instance... – LazyOne Commented Sep 13, 2015 at 11:28
• What process is going to do the auto-fixing for you? ESLint is not capable of auto-fixing the errors, well at least not jet. It is on the wishlist for v. 2 as you can see here. Anyway, you might want to take a look at the fixmyjs gulp plugin. Here is some more info on fixmyjs. – DavidDomain Commented Sep 13, 2015 at 11:49
• @DavidDomain I had lot of things to fix after changing some rules in ESLint config and I wanted to automate the process, thats all :) LazyOne actually ESLint is supported by PhpStorm natively, same as other tools like JSHint or JSLint. Those others tools works fine with inspector letting him do the autofixing which is also shown in PhpStorm docs. m02ph3u5 paths are valid because IDE uses those rules when I'm editing a file, it just doesn't work when I try to use it in inspect mode – lukasz Commented Sep 13, 2015 at 12:56
• It's not an answer to your question, but atom's plugin (linter-eslint) has the ability to auto-fix when you save a file. – IanVS Commented Dec 27, 2016 at 20:48

2 Answers 2

I haven't found a way to do this in any IDE (PhpStorm/Atom/Sublime/WebStorm). However you can fix some issues through the command line by running eslint --fix.

You need a basic understanding of ESLint, to follow these steps:

1) Install ESlint:

Globally:

npm i -g eslint eslint-config-airbnb

(Airbnb's style guide is extensively used - http://nerds.airbnb.com/our-javascript-style-guide/.)

OR locally (preferrable):

Installing locally is preferable if you've a local node_modules directory. Run this command from your Project Directory:

npm i --save-dev eslint eslint-config-airbnb

(You can then run eslint from ./node_modules/.bin/eslint)

2) Create a .eslintrc file in your project directory with the following line.

{ "extends": "airbnb" }  // We installed airbnb's style guide in step 1.

3) Backup/Commit your source code files

Backup the files you want to lint; the following command might change several lines.

4) Run eslint --fix as follows:

eslint --fix path/to/file.js

eslint --fix path/to/files/*.jsx

This will fix 10s of errors in your files!

5) If eslint --fix stops at some error, fix it manually then run again

I noticed that eslint --fix doesn't fix all erros in one go. i.e. it will sometimes run till a particular point in file, then stop at errors it can't handle automatically.

If you remove the topmost issue that eslint is stuck on, running the command again fixes more errors in the file. Rinse, Repeat.

--

eslint added some new features in 2015. Hope the '--fix' option becomes better in future: http://eslint.org/blog/2015/09/eslint-v1.5.0-released

You can add shortcut to run ESLINT . I have done same setting for phpstrom .Working fine at my end

Refer:https://medium.com/@jm90mm/adding-prettier-to-webstorm-a218eeec04d2

Also for autosave fix ,you can refer this

https://medium.com/@netczuk/even-faster-code-formatting-using-eslint-22b80d061461