Konfigurasi ESLint dan Prettier di Proyek Express.js

3 min readJul 2, 2024

Pengantar

Dalam pengembangan aplikasi web, menjaga kode tetap bersih, konsisten, dan mudah dibaca adalah suatu keharusan. Dua alat yang sangat berguna untuk tujuan ini adalah ESLint dan Prettier. ESLint membantu kita menemukan dan memperbaiki masalah dalam kode JavaScript kita, sementara Prettier memastikan bahwa kode tersebut diformat secara konsisten. Dalam artikel ini, kita akan membahas cara mengkonfigurasi ESLint dan Prettier di proyek Express.js Anda.

Apa itu ESLint?

ESLint adalah sebuah alat linting yang menganalisis kode JavaScript untuk menemukan dan memperbaiki masalah berdasarkan aturan yang telah ditentukan. Alat ini sangat berguna untuk menjaga kualitas kode dan mencegah bug sejak dini.

Apa itu Prettier?

Prettier adalah code formatter yang secara otomatis memformat kode Anda untuk mengikuti gaya yang konsisten. Prettier sangat berguna untuk memastikan bahwa semua kode dalam proyek Anda memiliki format yang seragam, sehingga memudahkan dalam pembacaan dan pemeliharaan.

Mengapa Menggunakan ESLint dan Prettier?

Kualitas Kode: ESLint membantu memastikan bahwa kode Anda bebas dari kesalahan dan mengikuti best practices.
Konsistensi: Prettier memastikan bahwa semua kode Anda diformat dengan cara yang sama, terlepas dari siapa yang menulisnya.
Kolaborasi yang Lebih Baik: Dengan menggunakan kedua alat ini, tim Anda akan memiliki standar kode yang sama, memudahkan proses review dan kolaborasi.

Langkah-langkah Mengkonfigurasi ESLint dan Prettier di Proyek Express.js

1. Memulai Proyek Express.js

Jika Anda belum memiliki proyek Express.js, Anda bisa memulainya dengan langkah-langkah berikut:

mkdir my-express-app
cd my-express-app
npm init -y
npm install express

2. Menginstal ESLint

Instal ESLint secara lokal di proyek Anda:

npm install eslint --save-dev

Inisialisasi konfigurasi ESLint:

npx eslint --init

Ikuti instruksi yang diberikan untuk memilih konfigurasi yang sesuai dengan kebutuhan Anda.

3. Menginstal Prettier

Instal Prettier secara lokal di proyek Anda:

npm install prettier --save-dev

Buat file konfigurasi Prettier:

mkdir .prettierrc.json

Masukkan konfigurasi berikut di .prettierrc.json dan sesuaikan dengan kebutuhan

{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "arrowParens": "always",
  "endOfLine": "lf"
}

4. Mengintegrasikan ESLint dan Prettier

Agar ESLint dan Prettier dapat bekerja bersama dengan baik, kita perlu menginstal beberapa plugin tambahan:

npm install eslint-config-prettier eslint-plugin-prettier --save-dev

Perbarui konfigurasi ESLint (.eslintrc.json) Anda untuk menggunakan plugin dan konfigurasi Prettier:

{
  "extends": ["eslint:recommended", "plugin:prettier/recommended"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}

Mengatur Kode di package.json

Tambahkan kode untuk ESLint dan Prettier di package.json:

"scripts": {
  "lint": "eslint .",
  "format": "prettier --write ."
}

Sekarang, Anda bisa menjalankan linting dan formatting dengan perintah berikut:

npm run lint
npm run format

Tips dan Trik

Integrasi dengan Editor: Banyak editor kode seperti VSCode mendukung integrasi langsung dengan ESLint dan Prettier. Pastikan untuk menginstal ekstensi yang sesuai untuk pengalaman yang lebih mulus.
Pre-commit Hook: Anda bisa menggunakan tools seperti Husky untuk menjalankan ESLint dan Prettier sebelum commit untuk memastikan bahwa kode yang masuk ke repository selalu bersih dan terformat dengan baik.
Custom Rules: Jika Anda memiliki aturan khusus yang ingin diterapkan, Anda bisa menyesuaikan konfigurasi ESLint dan Prettier sesuai kebutuhan proyek Anda.

Kesimpulan

Mengkonfigurasi ESLint dan Prettier di proyek Express.js Anda adalah langkah penting untuk memastikan kualitas dan konsistensi kode. Dengan mengikuti panduan di atas, Anda akan memiliki proyek yang lebih mudah dikelola dan dipelihara, serta meningkatkan produktivitas tim Anda. Ingatlah bahwa menjaga standar kode yang baik adalah investasi jangka panjang yang akan memberikan banyak manfaat di masa depan.

Jika Anda ingin melihat contoh kode yang lengkap, Anda dapat mengunjungi repositori GitHub saya di sini.

Referensi: