Saya dan tim sedang mengerjakan aplikasi Javascript dengan menggunakan NodeJS dan ReactJS. Kami menggunakan ESLint sebagai standart untuk kode kami dengan menggunakan konfigurasi ESLint dari AirBnB. Hingga saat ini kami cukup puas dengan konfigurasi ini.

Saya pribadi menggunakan Webstrom 2016 untuk kegiatan koding sehari-hari. Meskipun Webstrom 2016 cukup powerful, tapi ini tidak seperti di VSCode ataupun Atom dimana kita bisa memperbaiki kode kita secara otomatis dengan menggunakan plugin ESLint pada saat setiap kali kita menyimpan. Setelah Googling sana-sini, ternyata fitur perbaikan kode secara otomatis di Webstrom 2016 masih belum ada dan masih menjadi permintaan dari pengguna lainnya berdasarkan jawaban dari pertanyaan di Stackoverflow.

Ternyata, Webstrom (ataupun produk JetBrains lainnya) menyediakan plugin yang bernama File Watcher. Plugin ini dapat “melihat” (watch) perubahan pada kode kita dan akan melakukan suatu task tertentu jika terjadi perubahan. Informasi lebih lanjut, dapat membaca referensi berikut.

Akhirnya saya mencoba menggunakan plugin File Watcher tersebut supaya secara otomatis dapat memperbaiki kode kita yang ditandai memiliki masalah oleh ESLint. Jadi tidak perlu repot-repot memperbaiki kode yang berantakan. Berikut caranya untuk menggunakan File Watcher:

  1. Install plugin File Watcher. Kalian dapat menemukannya di menu Preferences > Plugins > Search for “File Watchers”. Centang pilihannya dan klik tombol Apply. Setelah itu kalian perlu restart Webstrom.
Preferences > Plugins > Search for "File Watchers" Preferences > Plugins > Search for "File Watchers"
  1. Cari menu Preferences > Tools > File Watchers. Buat File Watcher baru dengan menekan tombol +. Lalu pilih Custom Template
  1. Ubah File Type menjadi Javascript
  2. Sesuaikan Scope kalian ke direktori projek kalian atau direktori apapun yang ingin kalian masukkan
  3. Tambahkan binary ESLint ke path di menu Watcher Settings > Program. Jika kalian install ESLint secara local (maksudnya per projek), kalian dapat menemukan binary ESLint di <project_path>/node_modules/bin. Pathnya akan terlihat seperti ini
$ProjectFileDir$/node_modules/.bin/ESLint

Jika kalian install ESLint secara global (dengan/atau menggukan NVM), kalian dapat mencari path ESLint dengan mengeksekusi which eslint pada terminal. Contohnya jika saya menggunakan NVM, maka path-nya akan menjadi seperti ini (tergantung OS kalian)

/Users/vicz/.nvm/versions/node/v7.0.0/bin/ESLint
  1. Tambahkan parameter --fix $FileName$ ke Watcher Settings > Arguments
  2. Klik menu Watcher Settings > Other Options untuk melihat opsi tersembunyi dan tambahkan $FileDir ke Watcher Settings > Other Options > Working Directory
  3. Jangan centang menu Immediate file synchronization

Referensi:
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