How to configure ESLint auto fix on save in WebStorm/PHPStorm?

Question

I am trying to create a custom file watcher in WebStorm that will auto fix ESLint errors on save. In Settings > Tools > File Watchers I created a new file watcher with the following settings:

• File type: Any
• Scope: All places
• Program: /home/user/Projects/todo-app/eslint-autofix.sh
• Arguments: blank
• Output paths to refresh: blank
• Other options > Working directory: /home/user/Projects/todo-app

eslint-autofix.sh:

#!/usr/bin/env bash

./node_modules/.bin/eslint --fix

Then I made an ESLint error and pressed Ctrl + S to save. The following error pops up:

/home/user/Projects/todo-app/eslint-autofix.sh
/usr/bin/env: ‘node’: No such file or directory

How to fix this error?

Solution 1

On WebStorm 2020.1.1, there is a checkbox called Run eslint --fix on save.

Also see:

• https://www.jetbrains.com/help/webstorm/eslint.html#ws_js_eslint_activate

Solution 2

According to this article, settings should be as the following:

• File type: Any (or JavaScript)
• Scope: Project files
• Program: $ProjectFileDir$/node_modules/.bin/eslint
• Arguments: --fix $FilePath$
• Output paths to refresh: $FileDir$

Solution 3

Just to extend on jstice4all's & gotjosh's solution:

I was able to get the FileWatcher to ESLint for some projects, but it wasn't working with the plugin extends: '@react-native-community'

@react-native-community/eslint-config#overrides[2]:
    Environment key "jest/globals" is unknown

Turns out that the @react-native-community plugin needs to be ran from the project folder itself in order to load the environment variables, whereas the file watcher runs from the node_module/eslint path. To get it to work I had to add the following config:

• Working Directory: $ProjectFileDir$

Screenshot Config

Comments

[Dmitrii]

Doesn't built-in ESLint integration work for you? It's under File | Settings | Languages & Frameworks | JavaScript | Code Quality Tools | ESLint

[jstice4all]

It does. But I want to autofix ESLint errors on save so I don't have to run eslint --fix manually.

[lena]

try starting PhpStorm from terminal - does the problem persist?

[gotjosh]

to avoid absolute path use: $ProjectFileDir$/node_modules/.bin/eslint, and I also recommend to not use the advanced autosave options for linting/prettier (it then reformats while you are still typing) - also be aware that webstorm treats JSX and javascript as different filetypes, and you can only select one file type for the watcher (so i made a duplicate for JavaScript and React JSX)

[jstice4all]

Good point, thanks. I will update my answer with your solution.

[dipenparmar12]

Same settings available in WebStrom 2020.3.1. @Thanks

[MittenMits]

This doesn't work for me.