Sizin gibi okuyucular MUO'yu desteklemeye yardımcı oluyor. Sitemizdeki bağlantıları kullanarak bir satın alma işlemi gerçekleştirdiğinizde, bir ortaklık komisyonu kazanabiliriz. Devamını oku.

Airbnb stil kılavuzu, temiz ve tutarlı kod yazmaya yönelik bir dizi yönergedir. 2012'de yayınlandı ve o zamandan beri JavaScript projeleri için en popüler stil kılavuzlarından biri haline geldi.

Çeşitli stilleri uygulayarak bakımı kolay, tutarlı kod yazmak için bir dizi yönerge sağlar. girintiler, açıklamalar, maksimum satır uzunluğu, değişken adlandırma kuralları, alıntılar ve işlev tanımları ile ilgili kurallar. Airbnb stil kılavuzunu bir JavaScript projesinde ayarlamak için ESLint gibi bir astarlama aracı kullanmanız gerekir.

ESLint'i yükleyin

ESLint, açık kaynaklı bir JavaScript'tir astar aracı geliştiricilerin sorunları bulup düzelterek temiz kod yazmasına yardımcı olur. Kodunuzdaki sözdizimi hataları, geçersiz parametreler ve tanımsız değişkenler gibi sorunları algılayabilir. ESLint'i şununla çalıştırdığınızda:

instagram viewer
- -düzeltmek etiketi, koddaki düzeltilebilir sorunları otomatik olarak tanımlar ve düzeltir, böylece size zaman kazandırır.

Airbnb stil kılavuzu gibi stil kılavuzlarını zorunlu kılmak için ESLint'i kullanabilirsiniz.

Başlamak için, ESLint'i dev bağımlılığı olarak kurmak üzere terminalde aşağıdaki komutu çalıştırın:

npm kurulum --save-dev eslint eslint-config-airbnb

Ardından ESLint'i başlatın.

npx eslint --init

Projenizle ilgili sorular sorulacak. ile istendiğinde:

? EsLint'i nasıl kullanmak istersiniz?

Bu seçeneği belirleyin:

> Sözdizimini kontrol etmek, sorunları bulmak ve kod stilini uygulamak için

Aşağıdaki istemi görene kadar sonraki soruları projenize göre yanıtlayın.

? Projeniz için bir stil tanımlamaya ne dersiniz?

Sonra aşağıdaki gibi cevap verin.

> Popüler bir stil kılavuzu kullanın

Bir sonraki istem için Airbnb stil kılavuzunu seçin.

? Hangi stil rehberini takip etmek istiyorsunuz?
> Airbnb'de:

Son olarak, bir sonraki komut isteminde "Evet"i seçerek gerekli bağımlılıkları kurun.

Kurulum bittiğinde, bir .eslintsrc.json klasörünüzün kök dizinindeki dosya.

Airbnb Stil Rehberini Özelleştirme

Airbnb stil rehberi özelleştirmeye olanak tanır. Ek kurallar ekleyebilir veya mevcut kuralları geçersiz kılabilirsiniz. .eslintsrc.json yapılandırma dosyası.

Örneğin satır başına maksimum 80 karaktere izin vermek için bu kuralı kurallar bölümünden ekleyebilirsiniz.

{
"uzanır": [
"eklenti: tepki ver/önerildi",
"airbnb"
],
"tüzük": {
"max-len": ["hata", { "kod": 80 }]
}
}

ESLint'i package.json'da çalıştırma

Şuraya bir komut dosyası ekleyin: paket.json ESLint'i çalıştırmak için dosya.

"Kodlar": {
"tüy": "eslin"
}

Bu komutu yürüterek herhangi bir lint hatası olup olmadığını kontrol etmek için lint betiğini çalıştırın.

npm tüy bırakma

Ayrıca, koddaki sorunları gidermek için bir komut dosyası da ekleyebilirsiniz. --düzeltmek bayrak.

"Kodlar": {
"tüy": "eslin",
"tüy: düzelt": "npm run tiftik -- --düzeltme"
},

Koşma npm run tiftik: düzeltme terminalde, linter'in çözebileceği sorunları otomatik olarak çözecektir.

VS Kodunda Kaydederken Linting'i Etkinleştir

Kodunuzu her dizmek istediğinizde bir komut dosyası çalıştırmak sıkıcı olabilir. VS Code'da kayıtta astarlamayı etkinleştirmek için aşağıdaki adımları izleyin.

  1. VS Code penceresinin sol tarafındaki "Uzantılar" sekmesine gidin.
  2. ara ESLint uzantısı ve kurun.
  3. Uzantı yüklendikten sonra, VS Code ayarlarını açın (Dosya > Tercihler > Ayarlar veya Ctrl +, tuşlarına basarak).
  4. Ayarlar düzenleyicide "kaydedildiğinde kod eylemleri"ni arayın.
  5. "Settings.json'da düzenle"ye tıklayın ve aşağıdaki ayarları ayarlar.json dosya.
{
"editor.codeActionsOnSave": {

"kaynak.fixAll.eslint": doğru
},
"eslint.doğrula": ["javascript"],
"eslint.run": "kaydedilmiş",
}

Bu, kaydettiğinizde ESLint uzantısının kodunuzu otomatik olarak düzeltmesini sağlar.

Stil Rehberi Kullanmanın Yararları

Airbnb stil kılavuzu gibi bir stil kılavuzu kullanmanın ana yararı, tutarlı bir kod tabanını korumanıza yardımcı olmasıdır. Geliştiriciler kod tabanını kolayca anlayıp katkıda bulunabilecekleri için bu, bir ekipte yararlıdır. Ayrıca, en iyi uygulamaları uygulamanıza ve yaygın kodlama hatalarından kaçınmanıza yardımcı olur.