Kenalan dengan ESLint, Linter Javascript

Written on May 02, 2020 • 5 min read

Lint atau linter adalah alat untuk menganalisa source code untuk menandai errors, bug, code convention dan memverifikasi kualitas kode.

Di artikel kali ini saya akan menjelaskan salah satu tools atau module yang sangat membantu kita dalam mengerjakan sebuah projek yaitu ESLint salah satu linter JavaScript yang terkenal.

Jika kamu belum tau apa itu ESLint, ESLint adalah sebuah tools untuk melakukan static analyzes kode kita agar kita tau dengan cepat menemukan masalah atau potensi bug dari kode yang sudah kita buat.

Kenapa Harus Pasang Linter

ESLint adalah hal wajib bagi kamu yang mau membuat aplikasi Javascript, karena dengan kita mengintegrasi projek kita dengan ESLint kode yang kita buat akan menjadi lebih konsisten dan minim dengan bug jika kita mengikuti anjuran dari ESLint. Berikut adalah keuntungan ketika kita mengintegrasikan projek kita dengan ESLint.

Find Problems

ESLint secara otomatis menganalisa kode kita apakah memiliki potensi bug, sesuai standar/konvesi yang sudah di define di konfigurasi ESLint atau tidak. Keuntungannya disini kita cepat mendapatkan feedback loop yang diberikan oleh ESLint, kita tidak harus mengecek dulu kode kita sudah sesuai best practice belum atau adakah di kode kita ini yang akan berpotensi memunculkan bug kedepannya. Dan kita langsung diberitahu potensial error atau warning oleh ESLint jika code editor kita support.

Fix Automatically

Selain menganalisa dan memverifikasi kode kita apakah sudah sesuai dengan konvesi atau tidak memiliki potensi bug, fitur yang keren lainnya adalah ESLint dapat membenarkan kode kita jika ada yang salah. Jika di VSCode akan ada icon lampu 💡, jika kita klik akan muncul sugesti untuk fix-nya seperti apa.

Customize

Dengan ESLint juga kita bisa mengkustomisasi konfigurasi, parser dan rules yang akan digabungkan dengan rules built-in dari ESLint sesuai kebutuhan projek kita. ESLint jgua sekarang sudah support dengan Typescript, jadi jika kamu ingin mencari linter untuk Typescript, tinggal gunakan saja ESLint. Dukungan komunitas untuk ESLint juga banyak sekali, jadi kamu tidak usah bingung jika ingin menggabungkan React + ESLint atau Vue + ESLint kamu bisa mencari plugin-nya disini. Terdapat sekali banyak dukungan, kamu hanya tinggal mencarinya di NPM.

Integrasi Ke Projek

Nah sekarang bagaimana sih cara mengintegrasikan ESLint ke projek kita? Di sini saya akan memberitahukan cara dan step-by-step agar projek kalian bisa ter-install ESLint.

Cara mengintegrasikan ESLint ke sebuah projekpun tidak begitu sulit. Jika sudah memiliki JavaScript projek di repository Bukalapak cara install-nya cukup mudah, tinggal menjalankan script di bawah.

### NPM
npm install -d eslint
### Yarn
yarn add --dev eslint

Setelah selesai install ESLint selanjutnya jalankan command berikut untuk menginisiasi projek menggunakan linter.

### NPM versi >= v5.2.0
npx eslint --init

Maka akan muncul seperti gambar di bawah ini.

Kita diberikan 3 pilihan. Yang pertama menggunakan 3 config yang sering dipakai yaitu:

Yang kedua kita define sendiri basic rules yang akan digunakan dan yang ketiga sesuai itu meng-inspect files JavaScript di-project. Disini saya sarankan menggunakan opsi kedua agar lebih mudah dan fleksible untuk custom-nya. Jika pilih yang ketiga akan diberikan pertanyaan seperti gambar di bawah ini.

Lalu kita akan dibuatkan files .eslintrc.js. Contoh isi file-nya seperti di bawah ini.

module.exports = {
  env: {
    browser: true,
    es6: true,
  },
  extends: 'eslint:recommended',
  parserOptions: {
    ecmaVersion: 2015,
    sourceType: 'module',
  },
  rules: {
    indent: ['error', 4],
    'linebreak-style': ['error', 'unix'],
    quotes: ['error', 'single'],
    semi: ['error', 'never'],
  },
}

Di file tersebut kita bisa meng-custom rules kita sendiri atau ambil rules yang sudah disediakan oleh komunitas. List rules dapat dilihat ditautan berikut. Untuk melihat command apa saja yang dapat dilakukan oleh ESLint gunakan command npx [eslint](https://eslint.org/) --help.

Setelah kita melakukan integrasi dengan projek ketika editor kita support dengan ESLint akan muncul underscor merah atau kuning seperti gambar di bawah ini.

Ini menandakan bahwa code yang kita buat tidak sesuai dengan aturan yang sudah di-define oleh ESLint. Kita dipaksa untuk ubah code tersebut agar underscore merah tersebut hilang.

Show Error And Fix

Tambahkan juga script di file package.json seperti script di bawah ini.

/* package.json */
{
  // ...
  "scripts": {
    "lint:scripts": "eslint --fix --ext .js --ignore-path .gitignore ."
  }
  // ...
}

Jika sudah ditambahkan script tersebut kita tinggal menjalankan command yarn lint:scripts atau npm run lint:scriptspada terminal. Jika terdapat kesalahan pada kode yang sudah kita buat maka akan muncul error atau warning setelah menajalankan linter. Contoh error seperti gambar di bawah ini.

ps. Untuk flag --fix itu berfungsi untuk otomatis melakukan perbaikan terhadap kode yang dapat diperbaiki oleh linter sedangkan yang tidak bisa hanya akan dimunculkan dihasil terminal. Untuk flag --ext untuk mem-filter file dengan extension apa saja yang akan dicek oleh ESLint.

Flag --fix tidak 100% membenarkan kode kita, ada juga yang perlu dibenarkan manual. Tapi seenggaknya kita udah diingetin sama ESLint.

Summary || TLDR;