Meningkatkan Produktifitas Development dengan Husky dan lint-staged

Menjadi seorang developer di masa sekarang ini menuntut kita untuk melakukan segala sesuatu dengan cepat dan tepat. Oleh karena itu, banyak dari kita selalu mencari tools untuk mengindari sebuah proses yang berulang agar demi meraih produktifitas yang maksimal. Contoh, ketika kita bekerja dalam sebuah tim, biasanya memiliki standard tersediri dalam menulis kode. Standard disini banyak macamnya, seperti penulisan variable, function dan styling dari kode yang kita tulis. Sebagai seorang JavaScript Developer, maka tools seperti ESLint dan Prettier pun wajib kita gunakan. Cuma, walaupun penggunaan ESLint dan Prettier sudah terintegrasi dengan IDE yang kita gunakan, akan tetapi jika prosesnya tidak kita paksa ketika developer melakukan commit, bisa jadi aturan ESLint dan Prettier tadi menjadi tidak berguna bukan?

Coba bayangkan, semisal ada developer di tim kamu, melakukan suatu commit ulang karena pada proses Continous Integration gagal hanya untuk memberikan titik koma.

Kasihan bukan? :D Selain kasihan, ada hal yang harus dibayar dari kesalahan remeh temeh itu!

Pre-Commit Hook!

Secara default, Git memberikan sebuah fitur yang memperbolehkan kita melakukan sesuatu sebelum git melakukan commit. Misal kita set di pre-commit ini untuk melakukan Linting, maka ketika kita mengesekusi perintah git commit -m 'fix: something to fix' misalnya, maka si Git akan melakukan Linting terlebih dulu dari sebelum git menyimpan hasil commit dari yang kita lakukan.

Cuma, untuk bisa mengimplementasikan itu cukup sulit menurut saya :D Oleh karena itu, butuh tools tambahan untuk memudahkan kita dalam melakukan setup git pre-commit ini. Belum lagi jika kamu mau tambahin perintah misalkan post-commit dan lain sebagainya.

Memperkenalkan, Husky dan Lint-staged!

Husky merupakan sebuah tool javascript yang membuat Git Hooks menjadi sangat mudah! Ya beneran mudah, kamu cukup tambahkan huksy ke dependensi kamu dengan cara npm install husky --save-dev. Setelah itu bisa kamu atur git hooksnya di package.json, seperti ini misalkan:

{
  "husky": {
    "hooks": {
      "pre-commit": "npm test",
      "pre-push": "npm test",
      "...": "..."
    }
  }
}

Jadi, perintah itu memiliki arti:

• pre-commit: npm test, yaitu si Husky akan menjalankan pre-commit npm test ketika developer melakukan commit.
• pre-push: npm test, yaitu si Husky akan menjalankan pre-push npm test ketika developer melakukan push ke remote origin.

Mudah bukan? Oke, sekarang apa itu Lint-staged?

Masih ingat dengan masalah commit ulang karena kelupaan titik koma yang saya mention sebeleumnya kan? Nah, dengan menggunakan tool lint-staged ini kita bisa menghindari masalah seperti itu.

Caranya pun sangat mudah, kita tinggal tambahkan dependensi lint-staged npm install lint-staged --save-dev. Kemudian tambahkan di package.json seperti ini misalkan:

"lint-staged": {
    "*.js": [
      "prettier --config .prettierrc --write",
      "eslint --fix",
      "git add"
    ]
  },

Jadi, perintah itu memiliki arti:

• *js, lint-staged akan aktif hanya di file yang berekstensi .js saja
• Jika filenya merupakan file .js, maka dia akan melakukan perintah
  • prettier --config .prettierrc --write, yaitu untuk menyesuaikan style kode kita sesuai aturan yang kita tulis di .prettierrc
  • eslint --fix, yaitu untuk melakukan pemeriksaan kode sesuatu aturan ESlint yang kita tulis dan dia akan auto-fix jika memang bisa.
  • git add jika dua proses diatas benar dan bisa jadi ada perubahan, maka perlu di add ulang di perintah Git-nya.

Keren bukan? Sekarang bagaimana mengintegrasikan keduanya?

Pada dasarnya, dengan bantuan Husky, kita bisa mengesekusi perintah apa saja dengan aturan dari Git Hooks yaa, seperti pre-commit yang saya jelaskan diatas. Jadi agar ketika developer melaukan commit, si Husky bisa jalan, maka kita bisa taruh codenya di pre-commit dengan merubah package.json menjadi seperti dibawah ini:

...
"husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.js": [
      "prettier --config .prettierrc --write",
      "eslint --fix",
      "git add"
    ]
  },
...

Dan ketika ada perubahan di file .js, maka akan seperti ini hasil dari Husky x Lint-staged.

Jika gagal dalam validasi data, maka hasilnya akan seperti ini dengan menampilkan errornya dimana.

Dan jika berhasil, maka hasilnya akan seperti ini.

]

Bagaimana? keren bukan kedua tools ini? Segera terapkan di workflow developmentmu dan tingkatkan produktifitasmu!