Editör Kurulumu

Doğru şekilde yapılandırılmış bir editör, kodun daha kolay okunmasını ve daha hızlı yazılmasını sağlayabilir. Hatta yazarken hataları tespit etmenize bile yardımcı olabilir! İlk kez bir editör kuruyorsanız veya mevcut editörünüzü iyileştirmek istiyorsanız, birkaç önerimiz var.

Bunları öğreneceksiniz

  • En popüler editörler hangileri
  • Kodunuzu otomatik olarak nasıl biçimlendirirsiniz

Editörünüz

Günümüzün en popüler editörlerinden biri olan VS Code, geniş bir eklenti pazarına sahip olmasının yanı sıra GitHub gibi popüler servislerle iyi bir entegrasyona sahiptir. Aşağıda listelenen özellikler VS Code’a eklenti olarak yüklenebilir ve bu VS Code’u daha fazla yapılandırılabilir hale getirir!

React topluluğunun kullandığı diğer popüler editörler:

  • WebStorm, Javascript için özel olarak tasarlanmış entegre bir geliştirme ortamıdır.
  • Sublime Text, Halihazırda JSX ve TypeScript desteği ile birlikte sözdizimi vurgusu ve otomatik tamamlama özelliğine sahiptir.
  • Vim, her türlü metni oluşturmayı ve değiştirmeyi daha verimli hale getirmek için oluşturulmuş, son derece yapılandırılabilir bir metin düzenleyicisidir. Çoğu UNIX sisteminde ve Apple OS X’te “vi” olarak bulunur.

Bazı düzenleyiciler bu özelliklerle birlikte gelir, ancak diğerleri bir eklenti kurmanızı gerektirebilir. Emin olmak için seçtiğiniz editörünüzün hangi desteği sağladığını kontrol edin!

Linting

Kod linter araçları kodunuzu yazarken problemleri bulmanızı ve düzeltmenizi sağlar. ESLint popüler bir açık kaynak JavaScript linter aracıdır.

** eslint-plugin-react-hooks kurallarını projeniz için etkinleştirdiğinizden emin olun. ** Bu özellikler önemlidir ve en ciddi hataları erken aşamada yakalarlar. Önerilen eslint-config-react-app ön ayar bunları içeriyor.

Biçimlendirme

Kodunuza katkıda bulunan başka bir kişiyle yapmak isteyeceğiniz son şey tab ve boşluklar hakkında bir tartışmaya girmektir! Neyse ki, Prettier kodunuzu önceden ayarladığınız kurallara uyacak şekilde biçimlendirerek düzenler ve temizler. Prettier’ı çalıştırın ve tüm tab’lar boşluklara dönüştürülecek ve girintileriniz, alıntılarınız vb. de yapılandırmaya uyacak şekilde değiştirilecektir. İdeal kurulumda Prettier, dosyanızı kaydettiğinizde çalışacak ve bu düzenlemeleri sizin için hızlıca yapacaktır.

Prettier VSCode eklentisini aşağıdaki adımları takip ederek yükleyebilirsiniz:

  1. VS Code’u açın
  2. Hızlı Aç’ı kullanın (Ctrl/Cmd+P’ye basın)
  3. Yapıştırın ext install esbenp.prettier-vscode
  4. Enter’a basın

Kayıt sırasında biçimlendirme

İdeal olarak, kodunuzu her kaydetme işleminde biçimlendirmelisiniz. VS Code bunu sizin için yapacak ayarlara sahiptir!

  1. VS Code’da CTRL/CMD + SHIFT + P ‘ye basın.
  2. ”settings” yazın
  3. Enter’a basın
  4. Arama çubuğunda, “format on save” yazın
  5. ”format on save” kutucuğunun seçili olduğundan emin olun!

ESLint ön ayarınızın biçimlendirme kuralları varsa bunlar Prettier ile çakışabilir. ESLint’in yalnızca mantıksal hataları yakalamak için kullanılabilmesi için eslint-config-prettier kullanarak ESLint ön ayarınızdaki tüm biçimlendirme kurallarını devre dışı bırakmanızı öneririz. Bir çekme isteği (pull request) birleştirilmeden önce dosyaların biçimlendirilmesini zorunlu kılmak istiyorsanız, sürekli entegrasyonunuz için prettier --check kullanın.