Autofix ESLint Issue on Webstrom 2016
Currently, me and my team are working on 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 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 custom template.
3. Change the File Type to Javascript.
4. Adjust your Scope to your project directory or whatever folder you want to include.
5. 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 looks like this
$ProjectFileDir$/node_modules/.bin/eslintIf you install ESLint globally (and/or use nvm), you can check eslint path by execute which eslint on terminal. Since I’m using nvm, my eslint path looks like this
/Users/vicz/.nvm/versions/node/v7.0.0/bin/eslint6. Add --fix $FileName$ to Watcher Settings > Arguments.
7. Click on the Watcher Settings > Other Options to expand hidden options and add $FileDir to Watcher Settings > Other Options > Working Directory.
8. Uncheck the Immediate file synchronization.
References:
https://stackoverflow.com/questions/29221136/lint-only-on-save-intellij-webstorm
https://www.jetbrains.com/help/webstorm/2016.3/file-watchers.html
