Currently, I and my team are working on a Javascript application using NodeJS and ReactJS. We use ESLint to use a coding standard with AirBnB config. We’re satisfied with it so far.

I’m using Webstorm 2016 for code. Great features. But something is missing on it. On Visual Studio Code and Atom, we can fix the ESLint issue on save. But not it Webstorm 2016. It’s still a requested feature based on this Stackoverflow answer.

However, Webstorm provides a plugin called File Watcher. This plugin will “watch” changes on our code and will run a specific task if there’s a change. For more information, please refer here. I’m using File Watcher to auto fix ESLint issue on our code. This is how I set up a File Watcher:

  1. Install a File Watcher plugin. You can find it on Preferences > Plugins > Search for “File Watchers”. Check it and click Apply button. You need to restart Webstorm afterward
Preferences > Plugins > Search for "File Watchers" Preferences > Plugins > Search for "File Watchers"
  1. Go to Preferences > Tools > File Watchers. Create a new File Watcher by clicking the + button. Choose custom template
  1. Change the File Type to Javascript
  2. Adjust your Scope to your project directory or whatever folder you want to include
  3. Add ESLint binary path on the Watcher Settings > Program. If you install ESLint locally (per project), you can find ESLint on node_modules/bin and the path will look like this
$ProjectFileDir$/node_modules/.bin/ESLint

If you install ESLint globally (and/or use nvm), you can check ESLint path by executing which ESLint on the terminal. Since I’m using nvm, my ESLint path looks like this

/Users/vicz/.nvm/versions/node/v7.0.0/bin/ESLint
  1. Add --fix $FileName$ to Watcher Settings > Arguments
  2. Click on the Watcher Settings > Other Options to expand hidden options and add $FileDir to Watcher Settings > Other Options > Working Directory
  3. Uncheck the Immediate file synchronization

References:
https://stackoverflow.com/questions/29221136/lint-only-on-save-intellij-webstorm
https://stackoverflow.com/questions/38883634/how-can-i-run-ESLint-fix-on-my-javascript-in-intellij-idea-webstorm-other-je
https://www.jetbrains.com/help/webstorm/2016.3/file-watchers.html