Editör Kurulumu

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.

Önerilen editör özellikleri

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.

• React için önerilen ESLint ayarlarını kurmak (Node’un yüklüolduğundan emin olun!)
• ESLint’i, VSCode’a resmi eklenti ile entegre edin

** 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.