Setup React Project dengan Vite, ESLint, Prettier, dan Husky

Jika Anda ingin membuat proyek React baru dengan alat yang efisien dan berkualitas, Anda mungkin ingin mempertimbangkan untuk menggunakan Vite, ESLint, Prettier, dan Husky. Berikut adalah panduan langkah demi langkah untuk menyiapkan proyek React dengan alat-alat ini.

Vite

Vite adalah sebuah bundler yang sangat cepat untuk JavaScript dan TypeScript. Untuk menginstal Vite, Anda bisa menggunakan npm dengan menjalankan perintah berikut:

npm init @vitejs/app nama-proyek

ESLint

ESLint adalah alat linting yang dapat membantu Anda menemukan dan memperbaiki masalah dalam kode JavaScript Anda. Untuk menginstal ESLint, Anda bisa menggunakan npm dengan menjalankan perintah berikut:

npm install eslint --save-dev

Prettier

Prettier adalah alat formatting yang dapat membantu Anda menjaga kode Anda tetap rapi dan mudah dibaca. Untuk menginstal Prettier, Anda bisa menggunakan npm dengan menjalankan perintah berikut:

npm install prettier --save-dev

Husky

Husky adalah alat yang memungkinkan Anda untuk menjalankan skrip sebelum commit dilakukan. Ini sangat berguna untuk memastikan bahwa kode Anda selalu dalam kondisi yang baik sebelum disimpan ke repositori. Untuk menginstal Husky, Anda bisa menggunakan npm dengan menjalankan perintah berikut:

npm install husky --save-dev

Langkah Terakhir

Setelah menginstal semua alat di atas, Anda perlu mengonfigurasikan mereka untuk bekerja bersama. Anda dapat menemukan panduan lengkap untuk mengatur Vite, ESLint, Prettier, dan Husky di dokumentasi resmi masing-masing alat.