Pembaca seperti Anda membantu mendukung MUO. Saat Anda melakukan pembelian menggunakan tautan di situs kami, kami dapat memperoleh komisi afiliasi. Baca selengkapnya.

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 dipelihara dengan menerapkan berbagai aturan gaya pada indentasi, komentar, panjang baris maksimum, konvensi penamaan variabel, tanda kutip, dan definisi fungsi. Untuk menyiapkan panduan gaya Airbnb dalam proyek JavaScript, Anda perlu menggunakan alat linting seperti ESLint.

Instal ESLint

ESLint adalah alat linting JavaScript sumber terbuka 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:

 ? How would you like to use EsLint?

Pilih opsi ini:

 > To check syntax, find problems and enforce code style

Jawab pertanyaan berikutnya sesuai proyek Anda hingga Anda menemukan perintah berikut.

 ? How would you like to define a style for your project?

Kemudian jawab sebagai berikut.

 > Use a popular style guide

Pilih panduan gaya Airbnb untuk prompt berikutnya.

 ? Which style guide do you want to follow?
> 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.

 {
  "extends": [
        "plugin:react/recommended",
        "airbnb"
    ],
  "rules": {
    "max-len": ["error", { "code": 80 }]
  }
}

Menjalankan ESLint di package.json

Tambahkan skrip di package.json file untuk menjalankan ESLint.

 "scripts": {
   "lint": "eslint"
}

Jalankan skrip lint untuk memeriksa kesalahan linting dengan menjalankan perintah ini.

 npm run lint

Anda juga dapat menambahkan skrip untuk memperbaiki masalah dalam kode menggunakan –memperbaiki bendera.

 "scripts": {
    "lint": "eslint",
    "lint:fix": "npm run lint -- --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.

  1. Buka tab “Extensions” di sisi kiri jendela VS Code.
  2. Cari untuk ekstensi ESLint dan menginstalnya.
  3. Setelah ekstensi diinstal, buka pengaturan VS Code (File > Preferences > Settings atau dengan menekan Ctrl +,).
  4. Di editor pengaturan, cari “tindakan kode saat menyimpan”.
  5. Klik “Edit di settings.json” dan tambahkan pengaturan berikut ke pengaturan.json mengajukan.
 {
"editor.codeActionsOnSave": {
  
    "source.fixAll.eslint": true
  },
  "eslint.validate": ["javascript"],
  "eslint.run": "onSave",
}

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.