Prettier kullanımı

Öncelikle prettier’den kısada bahsetmek istiyorum.

Prettier vscode benzeri kullandığımız editörde kodu formatlamak ve okunabiliriliğini arttırmak üzere geliştirilmiş bir eklentidir.

Kurulum

// Proje bazlı kullanmak için
yarn add -D prettier
// Global tanımlayıp tüm projelerde kullanmak için
yarn add -g prettier

Kurulumları yaptıktan sonra benim tercihim her kaydettiğimde bu formatlama işlemini yapması bu benim işimi daha pratik hale getirip hızlandıracak.

Ben bunu vscode üzerinden anlatacağım fakat kullandığınız editörde benzer ayarları bularak yapabilirsiniz.

Vscode Ayarları

• öncelikle eklentiler kısmından prettier i ekliyoruz.
• Ayarlara giriyoruz. ( Sol alt kısımda bulunan çark iconunun altında settings yada ayarlar a tıklayarak )
• Arama kısmına “Default Formatter” yazıp oradaki seçimi prettier yapıyoruz. Ardından oradan prettier’i seçiyoruz.
• Sonrasında her kaydettiğimizde formatlama işlemini yapmasını istiyorsak tekrar arama kısmına gelip “Format On Save” yazıp tikli hale getiriyoruz.

Prettier ayarları

Şimdi asıl konu başlığımıza gelmiş bulunuyoruz. Öncelikle prettier default ayarları ile kurulur ve biz bunları düzenleyebiliriz. Bunun için projemizin bulunduğu ana dizine bir config dosyası oluşturmamız yeterli olacaktır. Bu config dosyasının 2 farklı oluşturulma yöntemi var ben birini anlatacağım isterseniz araştırıp diğer yöntemide bulabilirsiniz fakat aralarında hiçbir fark olmadığını bilmenizi isterim.

Şimdi ana dizine bir dosya oluşturacağız ve bunun adını “ .prettierrc ” koyacağız.

sonrasında bu dosyamızın içine json formatında istediğimiz özellikleri yazıp değiştireceğiz.

Burda ben sık kullandığım 4 özelliği bir react projesi için güncelleyeceğim fakat prettier’in dökümanında daha fazla kaynak bulabilirsiniz.

{
  "singleQuote": true,
  "arrowParens": "avoid",
  "trailingComma": "none",
  "semi": false
}

• "singleQuote": true ⇒ bu default olarak tek tırnak için kullanılır.
• "arrowParens": "avoid" ⇒ bir arrow function oluşturduğumuzda x => x bu şekilde tanımlanmasını sağlar
• "trailingComma": "none" ⇒ bir object in son satırında virgül olup olmamasınına karar verir
• "semi": false ⇒ satır sonunda ';' işaretini kaldırır

benim sıklıkla kullandığım ayarlar bu şekilde bunları daha da detaylandırıp kullanabilirsiniz.