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:
- -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.
- VS Code penceresinin sol tarafındaki "Uzantılar" sekmesine gidin.
- ara ESLint uzantısı ve kurun.
- Uzantı yüklendikten sonra, VS Code ayarlarını açın (Dosya > Tercihler > Ayarlar veya Ctrl +, tuşlarına basarak).
- Ayarlar düzenleyicide "kaydedildiğinde kod eylemleri"ni arayın.
- "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.