Biar codenya lebih rapi, lebih sesuai standard, dan enggak pusing bacanya
Halo, sepertinya sudah sangat lama sekali saya buka Medium. Bahkan saya enggak inget apa yang terakhir kali saya tulis di platform ini. Kali ini saya kembali, wasyah
Di kesempatan kali ini saya ingin nulis terkait hal yang saya pelajari lebih dalam kemarin, meskipun sebenernya selama 5 tahun karir professional saya ini, saya udah pake. Tapi baru akhirnya saya paham dan bisa bener-bener merasa lebih pede untuk implement di code saya. Dan hal yang saya pelajari lagi tak lain dan tak bukan adalah setting up ESLint-Prettier di VSCode.
Perlu diketahui lagi, biar saya enggak dianggap noob banget, saya tuh udah pake eslint dari dulu, sudah paham tentang rules-rulesnya juga, tapi nge-integrate antara eslint, prettier, dan VSCode seamlessly itu perkara lain. Hahaha
Mari langsung kita masuk ke topiknya saja deh ya….
Sebelumnya perlu diketahui secara singkat kalo prettier itu sebuah code formatter, yang mana tool ini membantu supaya code kita lebih enak dipandang. Sedangkan eslint itu sendiri linter, yang bertugas untuk memastikan code yang kita tulis itu sesuai standard yang umum dipakai dan penulisan code kita ini efektif.
Jadi meskipun keduanya sering dijadikan sebuah combo maut, keduanya punya fungsi yang berbeda.
Oke, sekarang beneran kita masuk ke pembahasan utama. Untuk meng-setup ESLint-Prettier di VSCode, kita perlu melakukan beberapa hal ini:
- Setting up ESLint
- Setting up Prettier
- Integrate dengan VSCode
Prerequisites
- VSCode dengan extension ESLint dan Prettier
Setting up your ESLint
Untuk setup ESLint sebenernya banyak caranya, kita bisa melakukan dengan cara manual, init melalui npm, maupun langsung dengan memilih config yang populer. Tapi jalan yang saya pilih adalah dengan menggunakan npm init
npm init @eslint/config
Dengan code ini kita akan disuguhi dengan beberapa pertanyaan kaya gimana ESLintnya mau dipake, gimana behavior impor/export codebase kita, framework apa yang kita pake dan mau pake popular style atau enggak. Kita bisa pilih menyesuaikan kebutuhan masing-masing codebase kita. No silver bullet
Setelahnya kita akan dikasih list library yang perlu diinstall dan tinggal pilih Yes , kemudian tunggu aja. Voila, ESLint sudah berhasil terinstall di codebase.
Setelah eslint ini berhasil terinstall dia akan melakukan scan terhadap codebase kita sesuai rules-rules yang diberikan di config filenya yang biasanya namanya eslintrc.* atau eslint.config.* untuk file config yang baru.
Step 1 Done
Setting-up the Prettier
Langkah selanjutnya yaitu menginstall prettier ke code kita supaya codenya jadi lebih rapi.
Untuk step ini biasanya juga ada beberapa cara, cara yang paling umum digunakan adalah menginstall Prettier ke VSCode kita dan menambahkan rules-rules ke file confignya .prettierrc .
Tapi untuk hal ini catch nya biasanya ada beberapa rules yang conflict satu sama lain antara ESLint yang sudah kita define dengan si prettier tadi. Maka di post kali ini saya menggunakan approach yang berbeda yaitu dengan menggunakan eslint-plugin-prettier sehingga antara rules yang telah kita apply ke file eslint config tidak conflict dengan prettier.
Mula-mula kita install dulu packagenya
npm install --save-dev eslint-plugin-prettier eslint-config-prettier
npm install --save-dev --save-exact prettier
Kemudian kita tambahkan prettier ke config eslint yang telah ter-generate tadi
// File: eslintrc.js
{
// ...
// tempatkan prettier di paling belakang untuk override
// styling dari config/plugin yang lain
extends: [..., "plugin:prettier/recommended"],
// ...
rules: {
"prettier/prettier": [
"error",
{
// kalau mau tambah custom config
}
]
}
}
Dengan menambahkan ke extends sebenernya sudah cukup untuk implement prettier ke code kita, tapi kalau mau nambahin rules yang lain bisa juga tambahin secara manual di bagian rules
Step 2 done
Setelah menginstall eslint dan prettier tadi, bukan berarti langsung usable, maksudnya code kita tidak akan secara otomatis di-fix ketika ada issue kecuali kita menambahkan script ke package.json untuk nge-lint code kita, misalnya:
"scripts": {
// ...
"lint": "eslint --quiet --fix"
}
Tapi tentu saja ini masih ribet kecuali kita integrate script ini dengan tools lain, kita harus run script nya secara manual biar code kita terdetect dan bisa difix. Yakali masak gitu, rugi dong
Maka dari itu kita masuk ke last step…
Integrate the tools with VSCode
Ini bagian yang sebenernya singkat banget, kita cuma perlu nambahin/ubah file config vscode kita menjadi:
{
"editor.formatOnSave": true,
"editor.formatOnPaste": true,
"[javascript][javascriptreact][typescript][typescriptreact]": {
"editor.formatOnSave": false
},
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit"
}
}
Dari config di atas kita enggak pengen melakukan formatting ketika nge-save code dengan formatter biasa, tapi kita pengen nyuruh si eslint untuk ngefix code kita aja.
Oh iya, sekali lagi jangan lupa untuk install Prettier dan ESLint di VSCode nya ya.
Setelahnya, code kita sudah ready to go untuk diajak tempur.
—
Saya menggunakan approach ini karena seringkali saya ketika pake prettier dia conflict dengan si eslint jadi kadang malah eslint nya yang perlu mengalah atau malah saya harus kasih eslint ignore ke code saya, yang mana ini bukan best practice.
Tapi sekali lagi, approach ini bukanlah silver bullet untuk menginstall ESLint ke codebase kita, banyak cara lain dan as long as it works, it works. 😉