Autofix ESLint Issue on Webstrom 2016
I’m using Webstorm 2016 for code. Great features. But there’s something missing on it. On Visual Studio Code and Atom, we can fix 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 setup a File Watcher:
- 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.
2. Go to
Preferences > Tools > File Watchers. Create a new File Watcher by clicking the
+ button. Choose
3. Change the
File Type to
4. Adjust your
Scope to your project directory or whatever folder you want to include.
eslint binary path on the
Watcher Settings > Program. If you install ESlint locally (per project), you can find
node_modules/bin and the path will looks like this
If you install ESLint globally (and/or use
nvm), you can check
eslint path by execute
which eslint on terminal. Since I’m using
eslint path looks like this
--fix $FileName$ to
Watcher Settings > Arguments.
7. Click on the
Watcher Settings > Other Options to expand hidden options and add
Watcher Settings > Other Options > Working Directory.
8. Uncheck the
Immediate file synchronization.