Setup ESLint, Prettier, dan Husky di ReactJS

Pengembangan perangkat lunak adalah proses yang kompleks dan memerlukan perhatian terhadap detail-detail kecil untuk memastikan kualitas kode yang baik. Salah satu cara untuk mencapai ini adalah dengan menggunakan alat bantu seperti ESLint, Prettier, dan Husky dalam proyek React.

Apa itu ESLint?

ESLint adalah alat linting JavaScript yang membantu kita menemukan dan memperbaiki kesalahan atau gaya kode yang tidak konsisten dalam kode JavaScript kita. Dengan ESLint, kita dapat menetapkan aturan linting yang sesuai dengan preferensi atau menggunakan aturan linting yang sudah ada untuk memastikan kode kita tetap konsisten dan mudah dibaca.

Popular Style Guide dalam JavaScript

Ada beberapa style guide yang populer dalam dunia JavaScript, seperti Google, Standard, dan AirBnB. Setiap style guide memiliki aturan-aturan tertentu untuk gaya penulisan kode yang konsisten. Pada tutorial ini, kami akan menggunakan style guide AirBnB karena popularitasnya dan rekomendasi kuat dari komunitas React.

Kelebihan Style Guide AirBnB

Konsistensi Kode: Style guide AirBnB memberikan aturan yang ketat untuk gaya penulisan kode, yang memastikan konsistensi di seluruh proyek. Hal ini memudahkan pengembang untuk membaca, memahami, dan berkolaborasi dengan kode yang ditulis oleh pengembang lain dalam tim atau komunitas.
Praktik Terbaik: Style guide AirBnB dibuat berdasarkan praktik terbaik dalam pengembangan perangkat lunak, yang diperoleh dari pengalaman panjang dan penelitian yang mendalam oleh tim pengembangan di AirBnB.
Kompatibilitas dengan Ekosistem: Style guide AirBnB sering digunakan oleh banyak proyek dan komunitas di seluruh dunia, termasuk dalam proyek-proyek besar dan terkenal. Menggunakan style guide yang populer ini akan memudahkan Kita untuk berkolaborasi dengan proyek-proyek lain.

Apa itu Prettier?

Prettier adalah alat yang digunakan untuk memformat ulang kode secara otomatis sesuai dengan aturan yang telah ditentukan. Dengan Prettier, Kita tidak perlu khawatir tentang gaya kode karena Prettier akan melakukan pemformatan kode secara konsisten dan otomatis.

Apa itu Husky?

Husky adalah Library JavaScript yang memungkinkan Anda untuk menjalankan skrip sebelum atau setelah perintah Git tertentu, seperti commit atau push. Dengan Husky, Anda dapat memastikan bahwa kode Anda memenuhi standar kualitas sebelum di-commit ke repositori Git Anda.

Dalam Blog ini, kita akan membahas langkah-langkah untuk menyiapkan proyek React dengan ESLint, Prettier, dan Husky menggunakan style guide AirBnB.

Tutorial: Setup React dengan ESLint, Prettier, dan Husky

Sebelum kita mulai, pastikan telah membuat proyek React menggunakan Vite. Jika belum memilikinya, Anda dapat membuatnya dengan menjalankan perintah berikut di terminal:

npm create vite@latest

untuk konfigurasinya saya seperti ini :

kemudian jalankan perintah berikut untuk pindah ke folder project kita

cd .\setup-react\

selanjutnya buka visual studio code atau teks editor kalian. jika menggunakan visual studio code dapat menggunakan perintah ini :

code .

kemudian buka terminal visual studio code dan jalankan perintah ini untuk menginstall package yang dibutuhkan :

npm install

selanjutnya kita akan menganti port yang akan kita gunakan menggunakan port 3000, kita dapat menentukannya di file vite.config.js. ubah seperti ini :

pada kode diatas kita menambahkan server dengan port 3000 untuk menentukan port yang akan digunakan. selanjutnya kita akan mensetup ESLint kita. pertama, install terlebih dulu ESLint dengan perintah berikut pada terminal :

npm init @eslint/config

Selama inisialisasi, Anda akan diminta untuk menjawab beberapa pertanyaan disini saya menggunakan pilihan ini untuk pertanyaannya:

Untuk "How would you like to use ESLint?", Pilih "To check syntax, find problems, and enforce code style".
Untuk "What type of modules does your project use?", Pilih "JavaScript modules (import/export)".
Untuk "Which framework does your project use?", Pilih "React" sebagai framework/library yang digunakan.
Untuk "Does your project use TypeScript?", Pilih "No"
Untuk "Where does your code run?", Pilih "No"
Untuk "How would you like to define a style for your project?", Pilih "Use Popular style guide"
Untuk "Which style guide do you want to follow?" Pilih "Airbnb"
Untuk "What format do you want your config file to be in?" Pilih "JavaScript"

Kemudian install semua package yang dibutuhkan, setelah itu untuk melihat apakah ESLint telah bekerja gunakan perintah berikut pada terminal :

npm run lint

maka akan muncul beberapa error penulisan kode javascript.

note: pastikan package.json memiliki script lint ini :

"scripts": {
    ...
    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    ...
  },

sebelum memperbaiki semua error penulisan kode yang ada, kita akan melakukan ignore untuk beberapa folder. buat file .eslintignore kemudian isi seperti berikut :

node_modules
dist
vite.config.js

di sini kita melakukan ignore untuk folder node_modules, dist, dan vite.config.js. selanjutnya kita akan menginstall prettier agar kode dapat di format secara otomatis sesuai dengan style guide yang telah digunakan. masukkan perintah berikut pada terminal:

npm install -D prettier eslint-config-prettier

eslint-config-prettier adalah paket yang digunakan untuk menonaktifkan aturan ESLint yang bertentangan dengan aturan yang diterapkan oleh Prettier. Setelah menginstall prettier dan eslint-config-prettier. selanjutnya kita melakukan konfigurasi eslint. Buka file .eslintrc.cjs, kemudian isi seperti berikut:

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: ['airbnb', 'prettier'],
  overrides: [
    {
      env: {
        node: true,
      },
      files: [
        '.eslintrc.{js,cjs}',
      ],
      parserOptions: {
        sourceType: 'script',
      },
    },
  ],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  rules: {
    'react/react-in-jsx-scope': 'off'
  },
  plugins: ['react'],
  settings: {
    react:{
      version: 'detect'
    }
  }
};

disini kita melakukan perubahan dan penambahan pada extends, rules, plugins, dan settings. berikut penjelasannya:

extends : Properti ini menunjukkan daftar konfigurasi yang digunakan sebagai basis untuk konfigurasi Anda. Di sini, Kita menggunakan konfigurasi dari Airbnb dan Prettier.
rules : Properti ini digunakan untuk menetapkan aturan ESLint khusus yang akan diterapkan dalam proyek Kita. Di sini, Kita menonaktifkan aturan react/react-in-jsx-scope yang ditetapkan oleh Airbnb, yang memungkinkan penggunaan React tanpa impor React
plugins : Properti ini menentukan daftar plugin ESLint yang digunakan dalam proyek Kita. Di sini, Kita menggunakan plugin react untuk menambahkan aturan spesifik untuk kode React.
settings : Properti ini memungkinkan Anda menetapkan konfigurasi tambahan untuk plugin tertentu. Di sini, Anda menetapkan versi React yang akan dideteksi oleh plugin react dengan nilai 'detect', yang berarti plugin akan mencoba mendeteksi versi React yang digunakan dalam proyek Anda secara otomatis.

selanjutnya buat file .prettierrc untuk membuat aturan di prettier. masukkan kode seperti berikut :

{
    "endOfLine": "lf",
    "trailingComma": "es5",
    "tabWidth": 2,
    "printWidth": 80,
    "singleQuote": true
}

Berikut adalah penjelasan kodenya :

"endOfLine": "lf": Menentukan jenis karakter akhir baris yang digunakan dalam berkas. Dalam hal ini, 'lf' menunjukkan bahwa karakter baris baru (end of line) menggunakan karakter baris baru (line feed).
"trailingComma": "es5": Menentukan penanganan koma ekstra (trailing comma) dalam struktur data seperti array dan objek. Dalam hal ini, "es5" menunjukkan bahwa koma ekstra akan ditambahkan setelah elemen terakhir dalam array atau objek, kecuali untuk elemen terakhir.
"tabWidth": 2: Menentukan jumlah spasi yang digunakan untuk setiap level indentasi. Dalam hal ini, setiap level indentasi akan terdiri dari 2 spasi.
"printWidth": 80: Menentukan panjang maksimum baris kode sebelum Prettier memutuskan untuk memisahkan kode ke baris baru. Dalam hal ini, panjang maksimum baris adalah 80 karakter.
"singleQuote": true: Menentukan apakah Prettier akan menggunakan tanda kutip tunggal atau ganda untuk string. Dalam hal ini, menggunakan tanda kutip tunggal (true) untuk string tunggal.

pastikan visual studio code sudah terinstall extension ESLint dan Prettier.

save file atau Ctrl + Save dengan begitu beberapa error akan otomatis diperbaiki prettier. Selanjutnya pada file main.jsx ubah seperti berikut :

terdapat perubahan dengan menghapus jsx pada import App. selanjutnya lakukan perbaikan App.jsx seperti berikut :

disini kita merubah :

import viteLogo ke specific path local agar import lebih mudah dibaca
pada tag a yang menggunakan atribute target _blank , dengan menambahkan rel noreferrer dapat menghindari adanya celah keamanan potensial yang dikenal sebagai "tab nabbing" atau "window hijacking"
menambahkan type button pada tag button agar fungsi button lebih mudah dibaca dan sesuai yang di inginkan
mengganti parameter pada fungsi yang ada di tag button bagian onClick dari count menjadi value, ini agar code lebih mudah dibaca.

baik, selanjutnya kita akan menginstall husky pada project kita. gunakan perintah berikut pada terminal :

npm install -D husky lint-staged

disini kita juga menginstal lint-staged yang berguna untuk menjalankan skrip linting hanya pada file yang berubah sebelum dilakukan commit. Setelah menginstall husky, kita perlu membuat project react kita berada di repositori git lokal komputer. pastikan sudah menginstall git di komputer masing masing juga. jalankan perintah berikut pada terminal masing masing :

git init

sekarang kita dapat melakukan konfigurasi untuk lint-staged dan husky. masukkan code berikut pada package.json :

"scripts": {
    ...
    "lint:fix": "eslint . --fix --ext js,jsx,ts,tsx ./src"
    ...
  },
  "lint-staged": {
    "**/*.{js,jsx,ts,tsx}": [
      "npm run lint:fix"
    ]
  },

perintah diatas untuk menjalankan eslint pada file yang ada di folder src. selanjutnya jalankan perintah berikut pada terminal :

npx husky init

perintah diatas untuk menginialisasi folder .husky. Selanjutnya, masukkan masukkan code berikut pada file .husky/pre-commit:

npx lint-staged

selanjutnya jalankan perintah git add . dan git commit -m "setup react husky" untuk memastikan apakah husky sudah berjalan atau belum.

jika berhasil maka akan muncul seperti tampilan diatas. sebagai referensi setup project berikut link github tutorial ini.

Kesimpulan

Kesimpulan untuk blog ini dapat meliputi beberapa poin yaitu:

Pentingnya Alat Pemeriksa Kode: Menggunakan alat-alat seperti ESLint, Prettier, dan Husky dalam pengembangan perangkat lunak ReactJS sangat penting untuk memastikan kode yang konsisten, terstruktur dengan baik, dan memenuhi standar tertentu.
ESLint untuk Pemeriksaan Kode: ESLint adalah alat yang digunakan untuk menerapkan aturan linting pada kode JavaScript. Dalam blog ini, kita menggunakan konfigurasi ESLint dengan gaya guide AirBnB untuk memastikan konsistensi dan kepatuhan terhadap standar kode yang disepakati.
Prettier untuk Format Kode: Prettier adalah alat yang digunakan untuk memformat kode secara otomatis sesuai dengan aturan yang telah ditetapkan. Dengan mengintegrasikan Prettier dalam proyek ReactJS, kita dapat memastikan bahwa kode yang dikembangkan memiliki format yang seragam dan mudah dibaca.
Husky untuk Otomatisasi Proses: Husky adalah alat yang digunakan untuk mengaitkan skrip atau tindakan tertentu dengan peristiwa Git seperti commit atau push. Dalam tutorial, kita menggunakan Husky untuk menjalankan linting kode menggunakan ESLint dan Prettier secara otomatis setiap melakukan commit.
Kesimpulan dan Manfaat: Dengan mengikuti langkah-langkah dalam tutorial ini, kita dapat memastikan bahwa kode yang dikembangkan dalam proyek ReactJS memenuhi standar kode yang ditetapkan, memiliki format yang konsisten, dan terhindar dari kesalahan umum. Integrasi ESLint, Prettier, dan Husky dalam alur kerja pengembangan juga membantu meningkatkan produktivitas dan kualitas kode secara keseluruhan.