ESLint + SublimeText 3 = ♥️♥️♥️♥️♥️

Anda pengguna Sublime Text 3? Ingin coding-style Javascript anda konsisten? Terlalu lama men-jomblo? Mahasiswa tingkat akhir? ESLint solusinya!

Apa itu ESLint?

ESLint adalah utility Javascript untuk linting dibuat oleh Nicholas C. Zakas pada bulan Juni 2013. Terus Lint itu apa??

ESLint is an open source project originally created by Nicholas C. Zakas in June 2013. Its goal is to provide a pluggable linting utility for JavaScript.

Lint itu sebenarnya adalah software, kalau di Wikipedia ia disebut sebagai UNIX utility untuk memperingatkan kita, jika ada baris kode yang suspicious alias mencurigakan pada bahasa C. Namun sekarang Lint sekarang sudah di-generalisasi untuk semua bahasa pemrograman dengan tugas memperingatkan kita bahwa ada baris kode yang mencurigakan atau berpotensi menghasilkan bug.

Lalu apa tujuan kita memasang ESLint? Tentu sama dengan tujuan Lint diciptakan, namun dengan bonus mengarahkan coding-style pada project menjadi lebih konsisten.

Prerequisite

Sebelum memulai apa saja yang harus disiapkan? Tentunya Sublime Text 3 😝 dan jangan lupa NodeJS juga.

  1. Sublime Text 3 + Package Control (Bagi yang belum install package control silahkan ikuti langkah-langkah disini)
  2. NodeJS pastinya.

Lint is life, Lint is love.

Sublime-nya sudah dibuka belum? 😆 Kalau sudah sekarang kita akan install package Sublime yang dibutuhkan. Package yang dibutuhkan adalah:

  1. SublimeLinter
  2. SublimeLinter-contrib-eslint

Sekarang kita akan memasang package tersebut, tekan Cmd + Shift + P. Lalu akan muncul pada layar sebuah input untuk mencari package seperti gambar di bawah ini.

Menampilkan halaman install package Sublime.

Kalau sudah muncul Install Package langsung tekan Enter. Kemudian akan loading sebentar yang disusul dengan munculnya box baru lagi untuk mencari package yang ingin kita install.

Kemudian langsung dipasang aja kedua package tadi.

SublimeLinter & SublimeLinter-contrib-eslint

Lanjut install ESLint dengan flag -g

$ npm install -g eslint

Kalau sudah selesai instal eslint, kita akan initialize project baru. Jangan lupa buat folder dan masuk folder sebelum npm init. 👍 Kemudian dilanjutkan dengan membuat dua buah file baru. File pertama adalah index.js kita akan gunakan untuk test eslint, apakah sudah berjalan dengan baik, file kedua adalah .eslintrc sebagai file konfigurasi.

$ npm init -y
$ touch index.js .eslintrc

Buka Sublime dan kita masukan ESLint rules pada file .eslintrc. Kita akan coba ambil langsung konfigurasinya dari website resmi ESLint. Rulesnya akan kita ubah. Rules yang saya gunakan disini adalah menggunakan space dengan jarak 2 spasi.

{
"parserOptions": {
"ecmaVersion": 6,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"rules": {
"indent": ["error", 2]
}
}

Nah, kalau sudah coba kita tambahkan baris kode untuk mengetahui apakah ESLint sudah berjalan sesuai semestinya. Tambahkan koding di bawah ini ke file index.js hanya untuk uji coba.

const express = require('express')
const app = express()
app.listen(3000, err => {
if(err) { // jarak spasi 4
console.error(err) // jarak spasi 8
}
console.log('Server is listening.') // jarak spasi 4
})

Setelah di-save apakah muncul peringatan? 😁

Peringatan muncul setelah proses save.

Conclusion

Ok, kita sudah berhasil mengintegrasikan ESLint pada Sublime. Jadi harapannya dengan “terhubungnya” ESLint dan Sublime ini, coding-style pada sebuah project akan lebih konsisten terutama untuk project yang dikerjakan oleh sebuah team yang terdiri dari banyak engineer.

Tips

Masih banyak yang harus dieksplorasi lagi tentunya ☹️. Disini saya akan membagikan beberapa informasi dan beberapa tips sepengetahuan saya.

Mungkin ada pertanyaan

Apa saja sih “rules”-nya ESLint?

  • Untuk rules, teman-teman bisa lihat disini.

Males ketik, banyak banget rules-nya

  • Tentu teman-teman bisa meng-extends beberapa rules yang sudah dibuat oleh developer lain. Salah satunya yang sering digunakan adalah milik AirBnB. Dengan catatan teman-teman harus mengikuti coding-style yang sudah ditentukan oleh mereka.

Nambah .eslintrc folder project jadi gak enak dipandang

  • Teman-teman bisa hapus file .eslintrc dan menempatkan konfigurasi pada file package.json dengan key eslintConfig seperti gambar di bawah ini.
Konfigurasi ESLint pada package.json

Akhir kata hanya itu yang bisa saya bagikan. Mungkin teman-teman ada yang punya pengalaman lebih jauh tentang ESLint? Kalau ada, silakan dibagikan pada kolom komentar. 😉 Kalau ada salah-salah mohon dikoreksi juga agar lebih bermanfaat lagi bagi teman-teman yang lain.

Jika artikel ini bermanfaat, jangan lupa di-share dan klik icon hati berwarna hijau. 😁