Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

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?

like image 677
jstice4all Avatar asked Oct 09 '17 08:10

jstice4all


People also ask

How do I fix ESLint error automatically in WebStorm?

Fix problems automatically on saveOpen the Settings/Preferences dialog ( Ctrl+Alt+S ), go to Languages & Frameworks | JavaScript | Code Quality Tools | ESLint, and select the Run eslint --fix on save checkbox.

How do I enable ESLint auto fix?

If you have the ESLint extension installed you can use CTRL+SHIFT+P to open the Command Palette. Then search for ESLint: Fix all auto-fixable Problems and press ENTER (or RETURN ).

How do I fix the lint error in WebStorm?

WebStorm lets you automatically fix some of the issues reported by TSLint. To fix a specific error, place the cursor at the highlighted code, press Alt+Enter , and then select TSLint: fix current error from the list. To fix all the issues detected in the file, choose TSLint: fix current file.


2 Answers

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$
like image 185
jstice4all Avatar answered Sep 21 '22 17:09

jstice4all


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

enter image description here

like image 38
SmilingSun Avatar answered Sep 18 '22 17:09

SmilingSun