Photo by Joshua Sukoff on Unsplash

Code Quality

Prettier Kullanımı (Formatter)

Kodların aynı formatta ve aynı şekilde görülmesi , kodun birbiri ile uyumu, kodun başkaları tarafından anlaşılabilirliğini arttırdığı için Kod Kalitesini otomatik olarak artı bir etkisi olur.

Prettier, geliştiricilerin kodlarını standart ve tutarlı bir şekilde otomatik olarak biçimlendirmelerini sağlayan popüler bir kod biçimlendirme aracıdır.

https://prettier.io/ web sayfasından bunun ile detaylıca bilgiye erişebilirsiniz. Burada basit anlamda kurulumundan ve kullanımından bahsediyor olacağım.

Ben VSCode kullandığım için VSCode editörü üzerinden bu konuyu anlatıyor olacağım. Ama diğer bir çok editörüde plugin olarak destekliyor.

Prettier Destekli Code Editorleri

• 1nci Adım: Extension Tab Aç
• 2nci Adım: Prettier Code Formatter Arat.
• 3ncü Adım: Prettier Code Formatter Tıkla.
• 4ncü adım: Prettier VSCode Yükle..

Prettier yükleme işlemini yaptıktan sonra [⌘,] basarak Settings ekranına ulaştığınızda buradan Prettier aratıp kurulup, kurulmadığına ve ne gibi özellikleri olduğunu kontrol edebilirsiniz.

Prettier Settings on VSCode..

Tabi istediğimiz yukarıdaki şekilde herkesin kendi makinesindeki formatlamayı yapması değil. Burada ortak bir konfigürasyon dosyası oluşturulup bunun git üzerinden paylaşılması daha mantıklı. Bu konuda Prettier sağlamış olduğu birkaç opsiyon bulunuyor. Detaylı bilgi için Prettier Configuration Files linkini okuyun.

Önce basit bir react uygulaması oluşturalım, bunun için CRA ve Vite kullanabilirsiniz.

1. Configurasyon Dosyası

Bu linkten örnek format alıyoruz. Ve bunu .prettierrc.json formatında package.json olduğu kısma koyuyoruz.

{ “trailingComma”: “es5”,
  “tabWidth”: 4,
  “semi”: false,
  “singleQuote”: true 
}

Src klasörünün altına prettier-sample.js isminde bir dosya oluşturuyorum.

1. TrailingComma

TrailingComma aşağıdaki resimde görüleceği üzere SampleObj ve arr son elemanın olduğu kısma ,(virgül eklenmesini sağlar.).

3 opsiyonu bulunuyor <es5|none|all>

Prettier TrailingComma Opsiyonu

2. TabWidth

Indentetion yani iç içe parantezlerin birbirine göre x ekseninde ne kadar içeri doğru kayacağını belirtebilmemizi sağlar default değeri 4 dür.

3. Semi

Statementların sonuna noktalı virgul koyulmasını sağlar.

4. SingleQuote

Stringlerin tek tırnak mı çift tırnak mı olduğuna karar vermenizi sağlar.

5. PrintWidth

Bir satırda kaç karakterden oluşan bir statement gözükecek. PrintWidth küçük olduğunda bunları bu sayılara gelmeden bölebilecekleri kısımdan böler.

6. ArrowParens

7. BracketSpace

8. Bracket Line

Diğer opsiyonlara bu link üzerinden bakarak değerlendirebilirsiniz

2. Nasıl Çalıştıracağız

Cmd + Shift + P ile açılan popup penceresinden veya Kod üzerinde sağ tıklayarak açılan Context Menu üzerinden Format Document diyerek ilgili dökümanı formatlayabilirsiniz.

Veya Settings altından Text Editör (Format on Save) seçilerek her değiştirilen dosyanın kaydedilişi sırasında formatlama otomatil olarak gerçekleşir.

Peki daha önceden geliştirdiğiniz bir projeyi tümden formatlamak istiyorsanız. Bu durumdam CLI (Command Line) üzerinden prettier çağırarak tüm dosyaların formatlanmasını sağlayabilirsiniz. CLI Linki

npm install prettier — global
prettier --write . 

çalıştırdığınızda tüm dosyaların formatlandığını görebilirsiniz. Prettier belli bir klasörde çalışmasını sağlayabildiğiniz gibi

sh-3.2# prettier — write ./src
src/App.css 22ms
src/App.js 27ms
src/App.test.js 8ms
src/index.css 4ms
src/index.js 6ms
src/prettier-sample.js 7ms
src/reportWebVitals.js 5ms
src/setupTests.js 2ms

sadece js dosyaları üzerinde de çalışacak hale getirebilirsiniz. Veya .prettierignore ile formatlamasını istemediğiniz klasör ve dosyaları çıkarabilirsiniz.

sh-3.2# prettier --write ./src
src/App.js 28ms
src/App.test.js 6ms
src/index.js 6ms
src/prettier-sample.js 7ms
src/reportWebVitals.js 4ms
src/setupTests.js 2ms

Okumaya Devam Et 😃

Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.