Panduan gaya Airbnb adalah serangkaian pedoman untuk menulis kode yang rapi dan konsisten. Ini dirilis pada tahun 2012 dan sejak itu menjadi salah satu panduan gaya paling populer untuk proyek JavaScript.
Ini memberikan seperangkat pedoman untuk menulis kode yang konsisten yang mudah dipertahankan dengan menerapkan berbagai gaya aturan tentang lekukan, komentar, panjang baris maksimum, konvensi penamaan variabel, kutipan, dan definisi fungsi. Untuk menyiapkan panduan gaya Airbnb dalam proyek JavaScript, Anda perlu menggunakan alat linting seperti ESLint.
Instal ESLint
ESLint adalah JavaScript sumber terbuka alat linting yang membantu pengembang menulis kode bersih dengan menemukan dan memperbaiki masalah. Itu dapat mendeteksi masalah dalam kode Anda seperti kesalahan sintaksis, parameter tidak valid, dan variabel yang tidak ditentukan. Ketika Anda menjalankan ESLint dengan
- -memperbaiki tag, itu secara otomatis mengidentifikasi dan memperbaiki masalah yang dapat diperbaiki dalam kode sehingga menghemat waktu Anda.Anda dapat menggunakan ESLint untuk menerapkan panduan gaya seperti panduan gaya Airbnb.
Untuk memulai, jalankan perintah berikut di terminal untuk menginstal ESLint sebagai dependensi dev:
npm install --save-dev eslint eslint-config-airbnb
Kemudian inisialisasi ESLint.
npx eslint --init
Anda akan dimintai pertanyaan tentang proyek Anda. Saat diminta dengan:
? Bagaimana Anda ingin menggunakan EsLint?
Pilih opsi ini:
> Untuk memeriksa sintaks, temukan masalah dan terapkan gaya kode
Jawab pertanyaan berikutnya sesuai proyek Anda hingga Anda menemukan perintah berikut.
? Bagaimana Anda ingin menentukan gaya untuk proyek Anda?
Kemudian jawab sebagai berikut.
> Gunakan panduan gaya populer
Pilih panduan gaya Airbnb untuk prompt berikutnya.
? Panduan gaya mana yang ingin Anda ikuti?
> Airbnb:
Terakhir, instal dependensi yang diperlukan dengan memilih "Ya" di prompt berikutnya.
Setelah instalasi selesai, Anda harus memiliki .eslintsrc.json file di root folder Anda.
Menyesuaikan Panduan Gaya Airbnb
Panduan gaya Airbnb memungkinkan penyesuaian. Anda dapat menambahkan aturan tambahan atau mengganti aturan yang ada di .eslintsrc.json file konfigurasi.
Misalnya, untuk mengizinkan maksimal 80 karakter per baris, Anda dapat menambahkan aturan ini di bagian aturan.
{
"memanjang": [
"plugin: bereaksi/disarankan",
"airbnb"
],
"aturan": {
"max-len": ["kesalahan", { "kode": 80 }]
}
}Menjalankan ESLint di package.json
Tambahkan skrip di package.json file untuk menjalankan ESLint.
"skrip": {
"serat": "eslint"
}
Jalankan skrip lint untuk memeriksa kesalahan linting dengan menjalankan perintah ini.
npm menjalankan serat
Anda juga dapat menambahkan skrip untuk memperbaiki masalah dalam kode menggunakan --memperbaiki bendera.
"skrip": {
"serat": "eslint",
"serat: perbaiki": "npm jalankan serat -- --fix"
},
Berlari npm menjalankan serat: perbaiki di terminal akan secara otomatis memperbaiki masalah apa pun yang dapat diperbaiki oleh linter.
Aktifkan Linting saat Simpan di Kode VS
Menjalankan skrip setiap kali Anda ingin melakukan lint pada kode Anda bisa membosankan. Ikuti langkah-langkah di bawah ini untuk mengaktifkan linting saat menyimpan di VS Code.
- Buka tab "Extensions" di sisi kiri jendela VS Code.
- Cari untuk ekstensi ESLint dan menginstalnya.
- Setelah ekstensi diinstal, buka pengaturan VS Code (File > Preferences > Settings atau dengan menekan Ctrl +,).
- Di editor pengaturan, cari "tindakan kode saat menyimpan".
- Klik "Edit di settings.json" dan tambahkan pengaturan berikut ke pengaturan.json mengajukan.
{
"editor.codeActionsOnSave": {
"sumber.fixAll.eslint": BENAR
},
"eslint.validasi": ["javascript"],
"eslint.run": "diSimpan",
}
Ini memungkinkan ekstensi ESLint untuk secara otomatis memperbaiki kode Anda saat Anda menyimpan.
Manfaat Menggunakan Style Guide
Manfaat utama menggunakan panduan gaya seperti panduan gaya Airbnb adalah membantu Anda mempertahankan basis kode yang konsisten. Ini berguna dalam tim karena pengembang dapat memahami dan berkontribusi pada basis kode dengan mudah. Ini juga membantu Anda menerapkan praktik terbaik dan menghindari kesalahan pengkodean umum.
