How to configure ESLint to work with PhpStorm to autofix ESLint errors

Question

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.

Answer 1

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. ie 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

Answer 2

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