Ana içeriğe geç

Editör Ayarları

Doğru yapılandırılmış bir editör, kodu daha okunabilir hale getirebilir ve yazma hızını artırabilir. Hatta kodu yazarken hataları yakalamanıza yardımcı olabilir! Eğer bu, bir editör ayarladığınız ilk kez ise veya mevcut editörünüzü iyileştirmek istiyorsanız, birkaç önerimiz var.

  • En popüler editörlerin neler olduğu
  • Kodunuzu otomatik olarak nasıl formatlayacağınız

Editörünüz {/your-editor/}​

VS Code günümüzde en popüler editörlerden biridir. Geniş bir uzantı pazarı vardır ve GitHub gibi popüler hizmetlerle iyi entegrasyon sağlar. Aşağıda listelenen çoğu özellik, VS Code'a uzantılar olarak da eklenebilir, bu da onu son derece yapılandırılabilir hale getirir!

React topluluğunda kullanılan diğer popüler metin editörleri şunlardır:

  • WebStorm JavaScript için özel olarak tasarlanmış bir entegre geliştirme ortamıdır.
  • Sublime Text JSX ve TypeScript desteğine ve yerleşik sözdizim vurgulama ile otomatik tamamlama özelliğine sahiptir.
  • Vim her türlü metin oluşturmayı ve değiştirmeyi çok verimli hale getirmek için yapılmış yüksek yapılandırılabilir bir metin editörüdür. Çoğu UNIX sistemlerinde "vi" olarak, Apple OS X ile birlikte de mevcuttur.

Önerilen metin editörü özellikleri {/recommended-text-editor-features/}​

Bazı editörler bu özelliklerle birlikte gelirken, diğerleri uzantı eklemeyi gerektirebilir. Seçtiğiniz editörün hangi desteği sağladığını kontrol edin!

Linting {/linting/}​

bilgi

Kod linters, kodunuzu yazarken sorunları bulmanıza yardımcı olur ve sorunları erkenden düzeltirsiniz.

ESLint JavaScript için popüler, açık kaynak bir linters'dır.

Projeniz için tüm eslint-plugin-react-hooks kurallarını etkinleştirdiğinizden emin olun. Bu kurallar, en ciddi hataları erkenden yakalamak için esastır. Önerilen eslint-config-react-app preset'i zaten bunları içerir.

Formatlama {/formatting/}​

Kodunuzu başka bir katkıda bulunanla paylaşırken girmek istemediğiniz son şey sekmeler ile boşluklar hakkında bir tartışmadır! Neyse ki, Prettier kodunuzu önceden tanımlanmış, yapılandırılabilir kurallara uyacak şekilde yeniden formatlayarak temizler. Prettier'ı çalıştırdığınızda, tüm sekmeleriniz boşluklara dönüştürülecek ve girintiniz, alıntılarınız vb. yapılandırmaya uygun olarak değiştirilecektir. İdeal bir yapılandırmada, Prettier dosyanızı kaydettiğinizde çalışacak ve bu düzenlemeleri hızlı bir şekilde yapacaktır.

Prettier uzantısını VSCode'da yüklemek için şu adımları izleyebilirsiniz:

  1. VS Code'u başlatın
  2. Hızlı Açma'yı kullanın (Ctrl/Cmd+P tuşlarına basın)
  3. ext install esbenp.prettier-vscode yazın
  4. Enter tuşuna basın

Kaydettiğinizde formatlama {/formatting-on-save/}​

İdeal olarak, her kayıtta kodunuzu formatlamalısınız. VS Code'da bunun için ayarlar vardır!

  1. VS Code'da CTRL/CMD + SHIFT + P tuşlarına basın.
  2. "settings" yazın
  3. Enter tuşuna basın
  4. Arama çubuğuna "format on save" yazın
  5. "format on save" seçeneğinin işaretli olduğundan emin olun!

Eğer ESLint preset'inizde formatlama kuralları varsa, bunlar Prettier ile çelişebilir. ESLint preset'inizdeki tüm formatlama kurallarını devre dışı bırakmanızı öneririz. Böylece ESLint yalnızca mantıksal hataları yakalamak için kullanılacaktır. Bir çekme isteği birleştirilmeden önce dosyaların formatlanmasını sağlamak istiyorsanız, sürekli entegrasyon için prettier --check komutunu kullanın.