Otomatisasi Dan Konsistensi Code Saat Anda Ngoding
Apakah kode konsisten di seluruh developer? Apakah Anda selalu memperbaiki errors lint dan masalah pemformatan secara manual sebelum melakukan? Jika demikian, artikel ini untuk Anda
Saat bekerja dengan banyak programmer, gaya kode tidak konsisten dan selalu sulit untuk mempertahankan kode konsisten yang dapat dibaca dan dipelihara.
Untungnya, ada satu cara mudah untuk meningkatkan basis kode Anda menggunakan linter. Ini tidak hanya meningkatkan kode, tetapi juga mengintegrasikan seluruh kode tim. Dengan bantuan linter, gaya pengkodean yang berbeda oleh beberapa developer telah diintegrasikan untuk membuat kode akhir lebih mudah dibaca dan dipelihara.
Artikel ini menggunakan ESLint, Prettier, Husky, dan Lint-Staged untuk mengotomatiskan proses dan memastikan bahwa kode Anda diformat dan diperbaiki dari errors pemrograman seperti errors sintaks.
Catatan: Ada alat lain yang menurut saya berguna saat bekerja dengan tim bernama "Commitzen", yang digunakan untuk menentukan cara standar untuk menetapkan aturan untuk pesan commit. Alat ini untuk hari lain.
Saatnya menyelami paket-paket yang diperlukan untuk menginstal dan menggunakannya di aplikasi berikutnya.
1.Instalasi paket yang dibutuhkan
Pertama, Anda perlu menginstal semua paket yang diperlukan. Ini adalah:
- ESLint — digunakan untuk Pengurai untuk memeriksa kode dan melaporkan bug, errors pengkodean, atau errors ketik.
- Prettier — Alat untuk memformat kode berdasarkan konfigurasi. Ini akan dijelaskan nanti.
- Lint-Staged — Digunakan untuk menjalankan linter pada file git bertahap dan menghindari melakukan kode buggy.
- Husky — Alat yang bekerja dengan Git hooks seperti pre-commit, commit-msg, post-commit dan lainnya.
Jika Anda menggunakan manajer paket npm, perintah yang perlu Anda jalankan untuk menginstal keempat paket adalah:
npm install --save-dev eslint prettier lint-staged husky
2.Konfigurasi ESLint
Selanjutnya, mari konfigurasikan paket yang diinstal dan mulai dengan ESLint. Perintah yang digunakan untuk menginisialisasi ESLint adalah:
npx eslint --init
Layar berikut akan muncul, Anda perlu menjawab beberapa pertanyaan sesuai kebutuhan, dan konfigurasi Anda akan disimpan sesuai dengan itu.
File konfigurasi terlihat seperti ini:
{
"env": {
"browser": true,
"es2021": true
},
"extends": [
"plugin:react/recommended",
"standard"
],
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": "latest"
},
"plugins": [
"react"
],
"rules": {
}
}
Alih-alih menjalankan perintah npx, Anda juga dapat membuat file bernama .eslintrc.json dan menempelkan konfigurasi di atas untuk melihat seluruh daftar pertanyaan.
Baca selengkapnya tentang aturan ESLint sebelum meninjau dokumentasi aturan ESLint.
3.Konfigurasi untuk Prettier
Untuk mengonfigurasi Prettier, Anda perlu membuat file .prettierrc.json di folder root aplikasi Anda dan menempelkan konfigurasi berikut.
{
"bracketSpacing": true,
"semi": true,
"singleQuote": true,
"trailingComma": "all",
"printWidth": 80,
"tabWidth": 2
}
Ada berbagai opsi untuk mengonfigurasi Prettier. Lihat dokumentasi Prettier.
Jika Anda ingin mengabaikan beberapa file dari format menggunakan prettier, tambahkan file .prettierignore ke folder aplikasi root dan tambahkan file di sana.
Misalnya, file dan folder berikut tidak diperlukan untuk pemformatan dan dapat ditambahkan ke file .prettierignore.
package-lock.json
node_modules
4.Konfigurasi panggung lint
Konfigurasi Lint-Staged tidak sulit, jadi buka file package.json dan terakhir, setelah konfigurasi lainnya, tambahkan bagian konfigurasi berikut seperti ini:
{
...
... "lint-staged": {
"**/*.{js,jsx}": ["eslint . --fix", "prettier --write ."]
}
}
"** / *. {Js, jsx}" Skrip ini berjalan di seluruh aplikasi. Dengan kata lain, semua file dengan ekstensi js dan jsx, tetapi jika Anda ingin menjalankan lint-staged hanya untuk file di folder src, tulis sebagai berikut. menginstead skrip ini:
"src/*.{js,jsx}": ["eslint . --fix", "prettier --write ."]
Dalam konfigurasi di atas, "..." menunjukkan konfigurasi lain dan Anda tidak perlu menambahkan titik-titik ini ke file package.json.
5. Konfigurasi husky
Bagian terakhir dari konfigurasi keseluruhan adalah husky, dan ada beberapa cara untuk mengkonfigurasi husky, tetapi saya akan membuatnya sesederhana mungkin di sini. Sekali lagi, Anda perlu membuka file package.json dan menambahkan skrip berikut setelah semua konfigurasi lainnya.
{
...
... "scripts": {
< ---- other scripts remains here ---- > "execute-husky": "npx husky install && npx husky add .husky/pre-commit \"npx --no-install lint-staged\""
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
}
}
Sekarang saya telah menambahkan konfigurasi di atas ke file package.json, menjalankan skrip "execute-husky" yang menginstal Husky juga memicu kait pra-commit. Anda dapat menjalankan perintah "execute-husky" menggunakan perintah npm berikut:
npm run execute-husky
Sekarang semua konfigurasi selesai. Kemudian commit perubahan Anda dan lihat hasilnya.
semoga artikel ini dapat bermanfaat untuk anda, sampai jumpa di artikel selanjutnya :)