Cek kesalahan kode JavaScript dengan JSHint. Proses linting dalam pemrograman komputer merupakan sebuah proses menganalisa kode statis untuk menemukan error atau masalah seperti kesalahan sintaks dan penggunaan kode yang rawan. Alat yang digunakan untuk melakukan proses linting biasanya disebut lint atau linter. Nah untuk Javascript, salah satu tool nya yaitu JSHint.
JSHint tersedia untuk digunakan pada berbagai platform. Salah satu tool ini yang tersedia secara online yaitu jshint.com. Ada juga command line tool via Node.js, JavaScript API, multiple text editor, dan plugin IDE untuk JSHint. Anda bisa melihat daftar lengkap dari tool JSHint yang tersedia untuk lingkungan kerja yang berbeda pada halaman donwload dan install di website JSHint.
Menurut website tersebut, dua cara yang paling umum dalam menggunakan tool JSHint adalah dengan command line tool dan API. Berikut ini penjelan singkatnya yang bisa Anda simak.
Tes Error JavaScript melalui Command Line Tool
1) Jika Anda tidak belum menginstal Node.js di komputer Anda, maka Anda harus mendownload dari websitenya dan menginstallnya terlebih dahulu. Untuk mengecek apakah Node.js sudah terinstal dengan sukses di komputer, Anda bisa menggunakan perintah npm -version
di command line interface (CLI) dan ini akan menampilkan kepada Anda versi Node.js yang terinstal di komputer (atau juga bisa dengan menjalankan perintah npm
dan lihat apa yang terjadi).
2) Untuk mengisntall tool JSHint, jalankan perintah npm install jshint
di CLI. Jika Anda ingin mengecek apakah JShint sudah terinstal, jalankan perintah jshint -version
untuk melihat versinya. Jika berhasil maka instalasi JSHint sudah berhasil Anda lakukan.
3) Untuk menjalankan tool ini, masuk ke direktori yang ada kode JavaScript yang ingin Anda cek melalui CLI, lalu jalankan perintah (misal kode Anda bernama test.js) berikut jshint test.js
. Hasil analisa dari tools tersebut terhadap kode JavaScript akan tampail, kira-kira seperti berikut ini:
Cek Error melalui API JavaScript
1) Download file yang di kompres dari link Github ini, dan unzip file tersebut. Pada folder dist yang terdapat disitu, Anda bisa menemukan file jshint (API librarry).
2) Untuk menggunakan API tersebut, tambahkan file JavaScript jshint ke proyek yang sedang Anda kerjakan, dan tautkan ke halaman web Anda. API nya bisa mengakses kode JavaScript menggunakan fungsi/object bernama JSHINT
. Dibawah ini adalah contoh kode HTML yang disertai dengan penggunaan API JavaScript milik JSHint untuk menganalisa kode JavaScript yang ada di array source
dan menampilkan hasil analisa pada halaman tersebut.
3) Kita melewatkan array source
yang berisi source code JavaScript untuk dianalisa dan objek options
berisikan opsi linting sebagai parameter di fungsi JSHINT
. Hasil analisa (sebuah objek JSON) diambil dari properti fungsi JSHINT
yang disebut data
.
4) JSON.stringify
digunakan untuk tampilan saja disini, yaitu untuk menampilan hasil yang dikembalikan dari fungsi data dalam fortmat string pada halaman tersebut. String JSON secara lebih jelas tampak seperti dibawah ini, bagian yang ditandai adalah error yang ditemukan oleh JSHINT dalam kalimat sederhana.
Pilihan linting
Pilihan linting atau linting options memungkinkan kita untuk melakukan pengaturan proses linting. Kita lebih spesifik tipe error apa yang akan dianalisa dan mana yang tidak ingin diperiksa. Pada contoh sebelumnya dua opsi linting diberi nama undef
dan unused
.
undef
tidak mendefinisikan variabel, dan unused
akan menandai variabel yang dideklarasikan namun tidak digunakan.
Anda bisa melihat banyak opsi seperti ini pada halaman berikut ini, jika Anda ingin mencari sebuah opsi lainnya, terdapat kolom pencarian pada bagian kanan atas.
Jika Anda menggunakna tool CLI melalui Node.js, Anda bisa menulis opsi linting didalam sebuah package.json
dibagian properti jshintConfig
pada direktori yang sama. Anda juga bisa menambahkan opsi sebagai arahan dalam kode JavaScript.
Masih banyak cara untuk mengkonfigurasi opsi linting dalam proyek Anda berdasarkan pada alat yang digunakan. Anda bisa melihatnya pada bagian konfigurasi nya disini.
Comments