Setting up ESLint auto format with IntelliJ

As far as I know, there is no way to make IntelliJ auto fix ESLint error automatically when you save file without an additional plugin.

Prerequisite

Install eslint package in your project by,

yarn add --dev eslint

How

1. Install IntelliJ plugin called File Watchers

2. After installing the package and restart IntelliJ, go to File Watchers preferences by preferences -> Tools -> File Watchers and press + to add a new config.

3. In this window we’re gonna setup file type to watch and program to run and how to run it.

In this example, I’m working with Vue project, so I’ll put

file type: Vue.js Template and the others as following,

Program

$ProjectFileDir$/node_modules/eslint/bin/eslint.js

Arguments

--fix $FileName$

Working Directory

$FileDir$

In Advance Options section, only checked Trigger the watcher on external changes so this command will run only when I pressed save by my own cmd + s

The result should be as following

Press ok, and apply everything

Then…… finished! 🎉

Hope you enjoy more productive in your beloved IDE/Text Editor. ✌️