Cara Cek Kesalahan Kode JavaScript dengan JSHint

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 (Image: davetayls.me)

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.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Jurnalweb</title>
</head>
<body>
<script src="jshint.js"> </script>
<script>  
	/* Array berisikan kode JavaScript yang akan dianalisa */
	var source = [
		'var obj = {}',
		'foo();'
	];
	/* Linting options (opsional) */
	var options = {
		undef: true,
		unused: true
	};
	/* Pemanggilan API */
	JSHINT(source);

	document.write(JSON.stringify(JSHINT.data())); 
</script>
</body>
</html>

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.

// -- test.js --
/* jshint undef: true, unused: true  */
foo();
a = 8;

Masih banyak cara untuk mengkonfigurasi opsi linting dalam proyek Anda berdasarkan pada alat yang digunakan. Anda bisa melihatnya pada bagian konfigurasi nya disini.