Terkadang kamu dipusingkan oleh bug dalam kode mu dikarenakan lupa memberi tanda semicolon di akhir baris atau mengimport package yang tidak ada. Kamu bisa-bisa menghabiskan banyak waktu bermenit-menit hingga berjam-jam hanya untuk menemukan kesalahan sepele itu. Apalagi jika kode mu memiliki style yang buruk dan bikin mata sakit. Jika itu terjadi, ada baiknya kamu mulai menggunakan ESLint dan Prettier.
ESLint adalah tools yang membantu developer untuk menemukan masalah pada kode Javascript mereka tanpa harus mengeksekusinya terlebih dahulu. Contoh masalahnya yaitu lupa menaruh semicolon di akhir baris, terlalu banyak indentasi, mengimport package yang tidak ada, menuliskan variable yang tidak akan digunakan, dan lain sebagainya. Masalah yang ada akan ditandai dengan garis bawah berwarna merah.
ESLint sangat fleksibel untuk dikustomisasi. Kamu dapat memilih dan menggunakan rules yang sudah ada, memilih style populer buatan komunitas atau perusahaan, atau bikin punyamu sendiri. Style ESLint yang sangat populer untuk digunakan antara lain yaitu Standard, Google, dan AirBnB.
Dan disisi lain, Prettier adalah code formatter yang dapat membuat kode mu terlihat rapi dan indah. Prettier akan menghapus style asli kode mu dan merubahnya menjadi bentuk yang mudah dipahami. Beberapa syntax yang disupport yaitu Javascript, JSX, Flow, Typescript, CSS, LESS, SCSS, JSON, GraphQL dan Markdown.
Setup
Segera install ESLint dan Prettier melalui command line.
npm install --save-dev eslint prettier
Dan untuk ini akan kita gunakan style milik AirBnB.
./node_modules/.bin/eslint --init
Setelah itu, kita harus mengintegrasikan Prettier dengan ESLint.
npm install --save-dev eslint-plugin-prettier
Terkadang akan ditemukan konflik formatting antara ESLint dan Prettier yang memiliki preferensi yang berbeda. Kamu harus menonaktifkan rules yang konflik dan tetap membiarkan rules lain yang tidak mempengaruhi Prettier.
Segera install eslint-config-prettier untuk menyelesaikannya.
npm install --save-dev eslint-config-prettier
Ubah file .eslintrc.json sebagai berikut.
{
"extends": [
"airbnb-base",
"prettier"
],
"plugins": ["prettier"],
"rules": {
"prettier/prettier": "error"
}
}
Okay, Kita akan menggunakan Visual Studio Code sebagai Text Editor dan akan menginterasikannya dengan tools diatas. Kamu dapat mendownloadnya disini lalu install ekstensi ESLint dan Prettier dari Marketplace.
Penggunaan
Dan sekarang kita akan mencobanya. Pertama, ada beberapa kesalahan pada contoh kode dibawah ini.
Sekarang kamu dapat menekan tombol Ctrl + Shift + I, dan Voila ! kode mu sekarang terlihat lebih rapi dari sebelumnya. (Garis bawah berwarna merah masih muncul karena ada variable yang tidak terpakai dan telah mengimport package yang tidak ada).
Kesimpulan
Seperti yang kita ketahui, ESLint dan Prettier adalah tools terbaik yang membuat developer lebih bahagia dan tidak khawatir lagi terhadap style kode dan terhindar dari lupa install package. Sekian.