ESLint

ESLint adalah sebuah library yang digunakan untuk melakukan pengecekan kode JavaScript yang kita buat. ESLint akan melakukan pengecekan kode JavaScript yang kita buat apakah ada kesalahan atau tidak. Jika ada kesalahan, maka ESLint akan memberikan pesan error.

kesalahan yang dimaksud adalah seperti penulisan variabel yang tidak sesuai, penulisan function yang tidak sesuai, dan lain-lain.

ESLint memiliki aturan-aturan yang sudah ditentukan. Jika kita ingin menambahkan aturan sendiri, kita bisa menambahkan aturan sendiri. Dengan menggunakan ESLint, kita bisa mengetahui kesalahan-kesalahan yang ada di kode JavaScript kita. Sehingga kode JavaScript yang kita buat menjadi lebih baik dan konsisten.

Instalasi ESLint

Untuk menginstall ESLint, kita bisa menggunakan pnpm (opens in a new tab). Kita bisa menginstall ESLint secara global atau lokal. Jika kita menginstall ESLint secara global, maka ESLint bisa digunakan untuk semua project yang ada di komputer kita. Jika kita menginstall ESLint secara lokal, maka ESLint hanya bisa digunakan untuk project yang kita install.

Untuk menginstall ESLint secara global, kita bisa menjalankan perintah berikut:

pnpm install -g eslint

Untuk menginstall ESLint secara lokal, kita bisa menjalankan perintah berikut:

pnpm install eslint

Instal Ekstensi

Instal ekstensi Visual Studio Code ESLint, untuk mempermudah kamu dalam menggunakan ESLint.

• ESLint (opens in a new tab)

Menggunakan ESLint

Setelah menginstall ESLint, kita bisa menggunakan ESLint. Untuk menggunakan ESLint, kita bisa menjalankan perintah berikut:

eslint <nama-file>

Contoh:

eslint index.js

Maka ESLint akan mengecek file index.js. Jika ada kesalahan, maka ESLint akan memberikan pesan error.

Menggunakan Konfigurasi ESLint

Kita bisa menggunakan konfigurasi ESLint. Konfigurasi ESLint bisa kita buat sendiri atau kita bisa menggunakan konfigurasi ESLint yang sudah ada. Konfigurasi ESLint yang sudah ada adalah konfigurasi yang dibuat oleh orang lain. Konfigurasi ESLint yang sudah ada bisa kita gunakan untuk project kita.

Untuk menggunakan konfigurasi ESLint yang sudah ada, kita bisa menjalankan perintah berikut:

eslint --init

Setelah menjalankan perintah di atas, kita akan diminta untuk menjawab beberapa pertanyaan. Pertanyaan-pertanyaan tersebut adalah pertanyaan yang akan digunakan untuk membuat konfigurasi ESLint.

Setelah menjawab pertanyaan-pertanyaan tersebut, maka konfigurasi ESLint akan dibuat. Konfigurasi ESLint akan disimpan di file .eslintrc.js.

Setelah konfigurasi ESLint dibuat, kita bisa menggunakan ESLint. Untuk menggunakan ESLint, kita bisa menjalankan perintah berikut:

eslint <nama-file>

Contoh:

eslint index.js

Maka ESLint akan mengecek file index.js. Jika ada kesalahan, maka ESLint akan memberikan pesan error.

Contoh konfigurasi ESLint:

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: ["ESLint:recommended", "plugin:prettier/recommended"],
  parserOptions: {
    ecmaVersion: 12,
    sourceType: "module",
  },
  rules: {},
};

Menggunakan Plugin ESLint

Kita bisa menggunakan plugin ESLint. Plugin ESLint adalah plugin yang digunakan untuk menambahkan aturan-aturan baru di ESLint. Plugin ESLint bisa kita buat sendiri atau kita bisa menggunakan plugin ESLint yang sudah ada. Plugin ESLint yang sudah ada adalah plugin yang dibuat oleh orang lain. Plugin ESLint yang sudah ada bisa kita gunakan untuk project kita.

Untuk menggunakan plugin ESLint yang sudah ada, kita bisa menginstall plugin ESLint tersebut. Untuk menginstall plugin ESLint, kita bisa menjalankan perintah berikut:

pnpm install <nama-plugin>

Contoh:

pnpm install eslint-plugin-prettier

Kemudian kita bisa melakukan konfigurasi plugin ESLint tersebut. Untuk melakukan konfigurasi plugin ESLint, kita bisa menambahkan plugin tersebut di file .eslintrc.js.

Contoh:

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: ["ESLint:recommended", "plugin:prettier/recommended"],
  parserOptions: {
    ecmaVersion: 12,
    sourceType: "module",
  },
  plugins: ["prettier"],
  rules: {},
};