Menggabungkan Prettier dan ESLint: Panduan Linters dan Formatters untuk Kualitas Kode yang Lebih Baik

Wednesday, March 19, 2025 Post a Comment

Dalam pengembangan perangkat lunak modern, menjaga kode yang bersih, konsisten, dan bebas dari kesalahan adalah hal yang sangat penting untuk kolaborasi dan keberlanjutan proyek jangka panjang. Alat seperti Prettier dan ESLint, sebagaimana ditampilkan pada gambar di atas, memainkan peran penting dalam mencapai tujuan ini. Bersama-sama, mereka berfungsi sebagai kombinasi linters dan formatters yang memastikan keterbacaan kode, konsistensi, dan kepatuhan terhadap praktik terbaik.

Apa Itu Linters dan Formatters?

Sebelum membahas Prettier dan ESLint, penting untuk memahami peran linters dan formatters dalam pemrograman:

Linters: Alat ini menganalisis kode Anda untuk mencari potensi kesalahan, menegakkan standar pengkodean, dan menyoroti pola yang tidak sesuai. Linters sangat membantu dalam menemukan masalah seperti variabel yang tidak terdefinisi, kode yang tidak dapat dijalankan, atau sintaks yang salah.
Formatters: Alat ini secara otomatis memformat kode Anda agar sesuai dengan gaya yang telah ditentukan sebelumnya. Mereka memastikan konsistensi dalam hal indentasi, pemenggalan baris, dan spasi, sehingga pengembang dapat fokus pada fungsionalitas daripada perbedaan gaya.

Apa Itu ESLint?

ESLint adalah salah satu linters paling populer dalam ekosistem JavaScript. ESLint memastikan bahwa kode Anda mematuhi aturan dan standar tertentu. Pengembang dapat menyesuaikan aturan ESLint berdasarkan preferensi mereka atau menggunakan panduan gaya yang sudah ada seperti Airbnb, Google, atau Standard.

Fitur Utama ESLint:

Deteksi Kesalahan: Menandai kesalahan sintaks, masalah logika, dan bug potensial.
Aturan yang Dapat Disesuaikan: Memungkinkan tim untuk menegakkan gaya pengkodean yang disukai.
Integrasi: Bekerja secara mulus dengan IDE seperti VSCode, memberikan umpan balik secara real-time.

Contoh Aturan ESLint:


"rules": {
  "no-console": "warn"
}

Aturan ini akan memberikan peringatan kepada pengembang setiap kali pernyataan console.log digunakan dalam kode.

Apa Itu Prettier?

Prettier adalah formatter kode yang berorientasi pada gaya dan berfungsi secara otomatis. Tidak seperti ESLint, Prettier tidak menegakkan aturan berbasis logika; alih-alih, alat ini memastikan bahwa kode Anda memiliki tampilan yang konsisten, terlepas dari gaya pengkodean individu pengembang.

Baca Juga

Fitur Utama Prettier:

Format Otomatis: Memformat kode secara otomatis saat menyimpan atau melalui perintah tertentu.
Dukungan Bahasa: Bekerja dengan JavaScript, TypeScript, CSS, HTML, dan lainnya.
Aturan yang Telah Ditentukan: Memberikan output yang konsisten tanpa memerlukan banyak konfigurasi.

Contoh Konfigurasi Prettier:


{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2
}

Konfigurasi ini memastikan bahwa tanda titik koma ditambahkan, tanda kutip tunggal digunakan, dan indentasi adalah dua spasi.

Mengapa Menggabungkan Prettier dan ESLint?

Meski ESLint dan Prettier kuat secara mandiri, kombinasi keduanya memastikan konsistensi gaya dan kode yang bebas dari kesalahan. Namun, fungsi yang tumpang tindih di antara keduanya dapat menyebabkan konflik. Misalnya, ESLint mungkin menegakkan aturan gaya tertentu yang diformat berbeda oleh Prettier.

Manfaat Penggabungan:

Alur Kerja yang Efisien: ESLint menangani kesalahan berbasis logika, sementara Prettier berfokus pada gaya.
Produktivitas Pengembang: Dengan kedua alat ini, tim dapat menghemat waktu dan menghindari perdebatan tentang gaya pengkodean.
Kode Bersih dan Konsisten: Memastikan kode yang dapat dibaca dan bebas dari kesalahan.

Bagaimana Cara Mengintegrasikan Prettier dan ESLint?

Instal Alatnya:


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

Konfigurasikan ESLint:
Tambahkan eslint-config-prettier dan eslint-plugin-prettier untuk menyelesaikan konflik:
```
{
  "extends": [
    "eslint:recommended",
    "plugin:prettier/recommended"
  ]
}
```
Tambahkan Konfigurasi Prettier:
Opsional, buat file .prettierrc untuk menyesuaikan Prettier:
```
{
  "printWidth": 80,
  "singleQuote": true
}
```
Jalankan Kedua Alat:
Tambahkan skrip ke package.json untuk melakukan linting dan pemformatan kode:
```
"scripts": {
  "lint": "eslint .",
  "format": "prettier --write ."
}
```
Integrasikan dengan IDE Anda:
Konfigurasikan IDE Anda (misalnya, VSCode) untuk menjalankan ESLint dan Prettier secara otomatis saat file disimpan.

Kesimpulan

Prettier dan ESLint, ketika digabungkan, menawarkan solusi yang ampuh untuk menjaga kualitas kode. Sebagaimana terlihat pada gambar, kedua alat ini saling melengkapi dengan sempurna di bawah kategori linters dan formatters. Dengan mengintegrasikan keduanya ke dalam alur kerja Anda, Anda dapat memastikan bahwa kode Anda tidak hanya fungsional tetapi juga bersih, konsisten, dan mudah dikelola.

FAQ

Apakah Prettier dapat menggantikan ESLint?
Tidak, Prettier berfokus pada pemformatan, sedangkan ESLint menegakkan aturan berbasis logika.
Bahasa apa saja yang didukung oleh Prettier dan ESLint?
ESLint mendukung JavaScript, sedangkan Prettier mendukung berbagai bahasa seperti JavaScript, TypeScript, HTML, CSS, dan lainnya.
Bagaimana cara mengatasi konflik antara Prettier dan ESLint?
Gunakan eslint-config-prettier untuk menonaktifkan aturan yang konflik di ESLint.
Apakah wajib menggunakan kedua alat tersebut?
Tidak wajib, tetapi menggabungkannya memastikan alur kerja yang lebih andal.
IDE apa yang mendukung Prettier dan ESLint?
IDE populer seperti VSCode, WebStorm, dan Atom mendukung kedua alat ini dengan sangat baik.

Mahpudeen Blog