Prettier : Membuat Kode Lebih Rapi, Konsisten, dan Mudah Dibaca

itechnobuzz.com – Dalam pengembangan perangkat lunak, menjaga konsistensi format kode adalah hal yang sangat penting. Kode yang rapi dan mudah dibaca tidak hanya membantu Anda memahami alur logika, tetapi juga memudahkan kolaborasi dengan tim. Prettier, sebuah code formatter, hadir sebagai solusi untuk memastikan bahwa kode Anda tetap terorganisir dengan baik tanpa harus repot memformat secara manual.

---

Apa Itu Prettier?

Prettier adalah sebuah alat open-source yang digunakan untuk memformat kode secara otomatis. Dengannya, Anda tidak perlu lagi khawatir tentang indentasi, spasi, atau tata letak kode, karena alat ini akan mengatur semuanya untuk Anda. Perangkat ini mendukung berbagai bahasa pemrograman dan framework seperti:

• JavaScript
• TypeScript
• HTML
• CSS (termasuk SCSS dan Less)
• JSON
• Markdown
• GraphQL
• YAML

---

Mengapa Menggunakan Prettier?

1. Konsistensi Format Kode
   Memastikan kode Anda memiliki gaya yang seragam di seluruh proyek. Ini sangat penting dalam tim dengan banyak pengembang, di mana gaya penulisan sering kali berbeda-beda.
2. Meningkatkan Produktivitas
   Anda tidak perlu membuang waktu untuk memformat kode secara manual. Anda bisa fokus pada logika dan fitur aplikasi.
3. Mudah Digunakan
   Dapat diintegrasikan dengan editor kode populer seperti Visual Studio Code, WebStorm, atau Atom, sehingga proses pemformatan bisa dilakukan hanya dengan satu klik atau pintasan keyboard.
4. Menghindari Debat Gaya Penulisan
   Dalam pengembangan tim, perbedaan gaya penulisan sering kali menjadi perdebatan. Dengan ini, semua orang akan mengikuti standar yang sama.

---

Cara Menggunakan

Berikut langkah-langkah untuk memulai :

1. Instalasi

Anda bisa menginstal menggunakan npm atau yarn:

Atau:

2. Konfigurasi

Prettier dapat dijalankan tanpa konfigurasi, tetapi jika Anda ingin menyesuaikan pengaturan, buat file konfigurasi bernama .prettierrc di root proyek Anda. Contoh konfigurasi:

• semi: Menentukan apakah akan menggunakan titik koma di akhir baris.
• singleQuote: Mengatur penggunaan tanda kutip tunggal.
• tabWidth: Mengatur jumlah spasi dalam tabulasi.

3. Menjalankan Program

Untuk memformat file, jalankan perintah:

Contoh:

4. Integrasi dengan Editor

• Visual Studio Code: Instal ekstensi Prettier dari marketplace. Setelah itu, atur format otomatis dengan menambahkan berikut di pengaturan:
  
• WebStorm: Prettier terintegrasi secara bawaan. Aktifkan fitur ini di pengaturan.

5. Integrasi dengan Git

Untuk memastikan format kode selalu konsisten sebelum commit, tambahkan Prettier ke pre-commit hook menggunakan Husky:

---

Contoh Sebelum dan Sesudah Prettier

Sebelum :

Sesudah :

Prettier menambahkan spasi, mengganti tanda kutip, dan memecah kode panjang menjadi lebih mudah dibaca.

---

Keuntungan Menggunakannya Dalam Proyek

1. Kolaborasi Lebih Baik
   Ketika semua anggota tim menggunakannya, kode menjadi lebih seragam, mengurangi kesalahpahaman saat review.
2. Mempermudah Code Review
   Format kode yang konsisten memungkinkan reviewer fokus pada logika kode, bukan pada gaya penulisan.
3. Mendukung Proyek Skala Besar
   Sangat cocok untuk proyek besar dengan ratusan file, karena Anda dapat memformat semuanya secara otomatis.

---

Ini adalah alat sederhana namun sangat berguna untuk menjaga konsistensi dan kualitas format kode. Dengan menggunakannya, Kamu tidak hanya menghemat waktu tetapi juga meningkatkan kolaborasi dalam tim. Jadi, jika Anda belum mencoba perangkat ini , sekarang adalah waktu yang tepat untuk mulai menggunakannya.