25

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?

jstice4all
  • 1,878
  • 4
  • 22
  • 33
  • Doesn't built-in ESLint integration work for you? It's under File | Settings | Languages & Frameworks | JavaScript | Code Quality Tools | ESLint – Dmitrii Oct 09 '17 at 10:20
  • It does. But I want to autofix ESLint errors on save so I don't have to run `eslint --fix` manually. – jstice4all Oct 09 '17 at 11:29
  • try starting PhpStorm from terminal - does the problem persist? – lena Oct 10 '17 at 18:08

3 Answers3

35

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$
jstice4all
  • 1,878
  • 4
  • 22
  • 33
  • 11
    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) – gotjosh Nov 12 '18 at 10:19
  • does not work for me – Idemax Apr 10 '23 at 14:54
33

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

Also see:

enter image description here

SmilingSun
  • 479
  • 4
  • 4
4

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

aelesia
  • 184
  • 7