giriiş
Kod biçimlendirmek her zaman zorlu bir iştir, ancak modern geliştirici araçları ekibinizin kod tabanında tutarlılığı otomatik olarak korumanızı sağlar. Bu makalede, Prettier'ı VS Code olarak da bilinen Visual Studio Code'da kodunuzu otomatik olarak biçimlendirecek şekilde ayarlayacaksınız.
Örnek amaçlı olarak, biçimlendirdiğiniz kodun bir örneği aşağıdadır:
const name = "James";
const person ={first: name
}
console.log(person);
const sayHelloLinting = (fName) => {
console.log(`Hello linting, ${fName}`)
}
sayHelloLinting('James');Kod biçimlendirme konusunda bilginiz varsa, bazı adımların yanlış olduğunu fark edebilirsiniz:
- Tek ve çift tırnak işaretlerinin birleşimi.
- Kişi nesnesinin ilk Özelliği kendi satırında olmalıdır.
- Fonksiyonun içindeki Console ifadesi girintili olmalıdır.
- Ok fonksiyon parametresinin etrafındaki isteğe bağlı parantezleri beğenebilirsiniz veya beğenmeyebilirsiniz.
Ön koşullar
- Visual Studio Code’u indirin ve kurun.
- Prettier'ı Visual Studio Code'da kullanmak için eklentiyi yüklemeniz gerekir. Bunun için VS Code eklentileri panelinde Prettier – Code Formatter araması yapın. İlk kez yüklüyorsanız, burada gösterilen Kaldır düğmesi yerine bir Yükle düğmesi göreceksiniz:
Adım 1 – Belgeyi Biçimlendir komutunu kullanma
Prettier eklentisi yüklendikten sonra, artık kodunuzu biçimlendirmek için kullanabilirsiniz. Başlamak için, Belgeyi Biçimlendir komutunu kullanmayı inceleyelim. Bu komut, biçimlendirilmiş aralık, satır kaydırma ve tırnak işaretleri ile kodunuzu daha tutarlı hale getirir.
Komut paletini açmak için şunu kullanabilirsiniz: COMMAND + SHIFT + P macOS'ta veya CTRL + SHIFT + P Windows'ta kullanın.
Komut paletinde Biçim'i arayın ve ardından Belge Biçimi Seçme.
Ardından, kullanılacak formatı seçmeniz istenebilir. Bunu yapmak için Yapılandır düğmesine tıklayın:
Daha sonra Prettier – Kod Biçimlendirici’yi seçin.
Kodunuz artık aralık, satır kaydırma ve sabit tırnak işaretleri ile biçimlendirildi:
const name = "James";
const person = { first: name };
console.log(person);
const sayHelloLinting = (fName) => {
console.log(`Hello linting, ${fName}`);
};
sayHelloLinting("James");Bu, CSS dosyalarında da işe yarar. Tutarsız girintiler, parantezler, yeni satırlar ve noktalı virgüller içeren bir şeyi düzgün biçimlendirilmiş koda dönüştürebilirsiniz. Örneğin:
body {color: red;
}
h1 {
color: purple;
font-size: 24px
}Aşağıdaki şekilde formatlanmıştır:
body {
color: red;
}
h1 {
color: purple;
font-size: 24px;
}Bu komutu incelediğimize göre, şimdi onu otomatik olarak nasıl çalıştırabileceğimize bakalım.
Adım 2 – Kaydetmedeki kodu biçimlendirme
Şimdiye kadar, kodunuzu biçimlendirmek için manuel olarak bir komut çalıştırmanız gerekiyordu. Bu işlemi otomatikleştirmek için, VS Code'da dosyalarınızı kaydederken otomatik olarak biçimlendirecek bir ayar seçebilirsiniz. Bu aynı zamanda, biçimlendirilmemiş kodun sürüm denetimine kaydedilmemesini de sağlar.
Bu ayarı değiştirmek için, KOMUT + macOS'ta veya CTRL + Ayarlar menüsünü açmak için Windows'ta tuşuna basın. Menü açıldığında, Editör: Kaydetme Sırasında Biçimlendir Arayın ve seçeneğin işaretli olduğundan emin olun:
Kurulum tamamlandıktan sonra kodunuzu her zamanki gibi yazabilirsiniz ve dosyayı kaydettiğinizde otomatik olarak biçimlendirilecektir.
Adım 3 – Daha güzel yapılandırma ayarlarını değiştirin
Prettier varsayılan olarak işin çoğunu sizin yerinize yapar, ancak ayarları özelleştirebilirsiniz de.
Ayarlar menüsünü açın. Ardından Prettier araması yapın. Bu, değiştirebileceğiniz tüm ayarları gösterecektir:
En yaygın ayarlardan bazıları şunlardır:
- Tek Tırnak – Tek ve çift tırnak arasında seçim yapın.
- Noktalı – Satır sonlarında noktalı virgül olup olmayacağını seçin.
- Sekme Genişliği – Bir sekmenin kaç boşluk ekleneceğini belirtin.
VS Code'daki yerleşik ayarlar menüsünü kullanmanın dezavantajı, ekibinizdeki geliştiriciler arasında tutarlılığı garanti edememesidir.
Adım 4 – Daha güzel bir yapılandırma dosyası oluşturun
VS Code'unuzdaki ayarları değiştirirseniz, başka birinin bilgisayarında tamamen farklı bir yapılandırma olabilir. Projeniz için bir yapılandırma dosyası oluşturarak ekibiniz genelinde tutarlı bir biçimlendirme oluşturabilirsiniz.
Yeni bir dosya adı daha güzelrc.uzantısı Aşağıdaki uzantılardan biriyle oluşturun:
ymlyamljsonjstoml
İşte JSON kullanan basit bir yapılandırma dosyası örneği:
{
"trailingComma": "es5",
"tabWidth": 4,
"semi": false,
"singleQuote": true
}Yapılandırma dosyaları hakkında daha fazla bilgi için daha şık Docs'a göz atın. Bunlardan birini oluşturup projenizde denediğinizde, ekipteki herkesin aynı biçimlendirme kurallarına uyduğundan emin olabilirsiniz.
giriiş
Tutarlı kod kullanmak iyi bir uygulamadır. Özellikle birden fazla iş birlikçiyle bir proje üzerinde çalışırken faydalıdır. Bir dizi ayar üzerinde anlaşmak, kodun okunabilirliğini ve anlaşılmasını kolaylaştırır. Kod girintisi gibi çözülmüş sorunlarla uğraşmak yerine, zorlu teknik sorunları çözmeye daha fazla zaman ayrılabilir.
