Not
Bu sayfaya erişim yetkilendirme gerektiriyor. Oturum açmayı veya dizinleri değiştirmeyi deneyebilirsiniz.
Bu sayfaya erişim yetkilendirme gerektiriyor. Dizinleri değiştirmeyi deneyebilirsiniz.
Visual Studio'daki kod düzenleyicisine bu kısa girişte, Visual Studio'nun kodu yazmayı, gezinmeyi ve anlamayı kolaylaştırma yollarından bazılarını inceleyeceğiz.
Tavsiye
Visual Studio'yu henüz yüklemediyseniz ücretsiz yüklemek için Visual Studio indirmeleri
Bu makalede JavaScript geliştirme hakkında bilgi sahibi olduğunuz varsayılmaktadır. Eğer değilseniz, önce Node.js ve bir Express uygulaması oluşturma gibi bir öğreticiye bakmanızı öneririz.
Yeni proje dosyası ekleme
Projenize yeni dosyalar eklemek için IDE'yi kullanabilirsiniz.
Projeniz Visual Studio'da açıkken, Çözüm Gezgini'nde (sağ bölme) bir klasöre veya proje düğümüne sağ tıklayın veYeni Öğe Ekle'yi> seçin.
Tüm öğe şablonlarını görmüyorsanız, Tüm Şablonları Gösteröğesini ve ardından öğe şablonunu seçin.
Yeni Dosya iletişim kutusundaki Genel kategorisinin altında, JavaScript Dosyası gibi eklemek istediğiniz dosya türünü seçin ve ardından Aç'ı seçin.
Yeni dosya projenize eklenir ve düzenleyicide açılır.
Sözcükleri tamamlamak için IntelliSense kullanma
IntelliSense, kodlama yaparken çok değerli bir kaynaktır. Bir türün kullanılabilir üyeleri hakkındaki bilgileri veya bir metotun farklı aşırı yüklenmeleri için parametre ayrıntılarını gösterebilir. Aşağıdaki kodda, Router() yazdığınızda, geçirebileceğiniz bağımsız değişken türlerini görürsünüz. Buna imza yardımı adı verilir.
IntelliSense'i kullanarak, bir sözcüğü kesinleştirmeye yetecek kadar karakter yazdıktan sonra da tamamlayabilirsiniz. İmlecinizi aşağıdaki koddaki dizenin data arkasına koyar ve yazarsanız get, IntelliSense size kodda daha önce tanımlanan veya projenize eklediğiniz bir üçüncü taraf kitaplığında tanımlanan işlevleri gösterir.
IntelliSense, programlama öğelerinin üzerine geldiğinizde türler hakkında bilgi de gösterebilir.
Dil hizmeti, IntelliSense bilgilerini sağlamak için TypeScript d.ts dosyalarını ve JSDoc açıklamalarını kullanabilir. En yaygın JavaScript kitaplıkları için d.ts dosyaları otomatik olarak alınır. IntelliSense bilgilerinin nasıl alındığı hakkında daha fazla bilgi için bkz. JavaScript IntelliSense.
Söz dizimlerini denetleme
Dil hizmeti, söz dizimi denetimi ve lint denetimi sağlamak için ESLint kullanır. Düzenleyicide söz dizimi denetimi seçeneklerini ayarlamanız gerekiyorsa Araçlar>Seçenekleri>JavaScript/TypeScript>Linting'i seçin. Linting seçenekleri sizi genel ESLint yapılandırma dosyasına işaret eder.
Aşağıdaki kodda, ifadede yeşil söz dizimi vurgulama (yeşil dalgalı çizgiler) görürsünüz. Söz dizimi renklendirmenin üzerine gelin.
Bu iletinin son satırı, dil hizmetinin virgül (,) beklediğini belirtir. Yeşil dalgalı çizgi bir uyarıyı gösterir. Kırmızı dalgalı çizgiler bir hata olduğunu gösterir.
Alt bölmede Hata Listesi sekmesine tıklayarak dosya adı ve satır numarasıyla birlikte uyarıyı ve açıklamayı görebilirsiniz.
Bu kodu, önüne ,virgül ("data") ekleyerek düzeltebilirsiniz.
Linting hakkında daha fazla bilgi için Linting bölümüne bakın.
Kodu yorum satırına al
Visual Studio'daki menü çubuğunun altındaki düğme satırı olan araç çubuğu, kod yazarken daha üretken olmanıza yardımcı olabilir. Örneğin, IntelliSense tamamlama modunu değiştirebilirsiniz (IntelliSense eşleşen yöntemlerin listesini görüntüleyen bir kodlama yardımıdır, satır girintisini artırabilir veya azaltabilir ya da derlemek istemediğiniz kodu açıklama satırı yapabilirsiniz. Bu bölümde, bazı kodlara açıklama ekleyeceğiz.
Düzenleyicide bir veya daha fazla kod satırı seçin ve ardından araç çubuğundaki Seçili satırları yoruma dönüştür düğmesini 
seçin. Klavyeyi kullanmayı tercih ediyorsanız, Ctrl+Ktuşlarına basın Ctrl+C.
JavaScript açıklama karakterleri // , kodu açıklama satırı yapmak için seçilen her satırın başına eklenir.
Kod bloklarını daralt
Bazı kod bölgelerinin görünümündeki dağınıklığı azaltmak isterseniz, onları katlayabilirsiniz. İşlevin ilk satırının kenar boşluğunda eksi işareti bulunan küçük gri kutuyu seçin. Alternatif olarak, klavye kullanıcısıysanız imleci oluşturucu kodunun herhangi bir yerine getirin ve Ctrl+, Ctrl+M tuşlarına basın.
Kod bloğu yalnızca ilk satıra daraltılır, ardından bir üç nokta (...) gelir. Kod bloğunu yeniden genişletmek için, artık artı işareti olan aynı gri kutuya tıklayın veya Ctrl+Mtuşlarına basın Ctrl+M yeniden basın. Bu özellik Anahat oluşturma olarak adlandırılır ve özellikle uzun işlevleri veya sınıfların tamamını daralttığınızda kullanışlıdır.
Tanımları görüntüleme
Visual Studio düzenleyicisi bir türün, işlevin vb. tanımını incelemeyi kolaylaştırır. Bunun bir yolu, tanımı içeren dosyaya gitmektir. Örneğin programlama öğesine başvurulacak her yerde Tanıma Git'i seçin. Odağınızı çalıştığınız dosyadan uzaklaştırmayan daha da hızlı bir yol, Göz Atma Tanımı kullanmaktır. Aşağıdaki örnekteki yöntemin tanımına render göz atalım.
render öğesine sağ tıklayın ve içerik menüsünden "Tanıma Göz At" seçeneğini seçin. Alternatif olarak, Alt+F12tuşlarına da bas.
Yöntemin tanımıyla render birlikte bir açılır pencere görüntülenir. Açılır pencere içinde kaydırma yapabilir, hatta göz atılan koddan başka bir türün tanımına göz atabilirsiniz.
Açılan pencerenin sağ üst kısmında "x" bulunan küçük kutuyu seçerek göz atılan tanım penceresini kapatın.
Gömmeli ipuçlarını görüntüle
Visual Studio 2022 sürüm 17.12'den itibaren, satır içinde işlenen kaynak koduyla ilgili ek bilgileri gösteren yerleşik ipuçları sunulmaktadır. Bu genellikle doğrudan düzenleyicinizde kodunuzdan çıkarılmış türleri, parametre adlarını ve diğer örtük bilgileri göstermek için kullanılır.
Yerleşik ipuçlarını yapılandırmak için:
Araçlar > Seçenekler > Metin Düzenleyicisi > Tüm Diller > Katman İpuçları'na gidin ve inlay ipuçlarını görüntülemek için bir seçenek belirleyin.
Araçlar > Seçenekler > Metin Düzenleyicisi > JavaScript/TypeScript > Gelişmiş > Genel'e gidin ve gizlemek veya göstermek istediğiniz iç ipuçlarını yapılandırın.
Varsayılan olarak, bu seçeneklerin çoğu devre dışıdır.
Kod parçacıkları kullan
Visual Studio, yaygın olarak kullanılan kod bloklarını hızlı ve kolay bir şekilde oluşturmak için kullanabileceğiniz kullanışlı kod parçacıkları sağlar.
Kod parçacıkları JavaScript de dahil olmak üzere farklı programlama dilleri için kullanılabilir. Şimdi kod dosyanıza bir for döngü ekleyelim.
İmlecinizi kod parçacığını eklemek istediğiniz yere getirin, sağ tıklayın ve Kod Parçacığı>Ekle Parçacığı'nı seçin.
Düzenleyicide Bir Kod Parçacığı Ekle kutusu görüntülenir. Genel seçeneğini seçin ve listede for öğesine çift tıklayın.
Bu işlem for kodunuza döngü kod parçasını ekler.
for (var i = 0; i < length; i++) {
}
Dilinize ait mevcut kod parçacıklarına bakmak için Düzenle>IntelliSense>Parçacık Ekle ve ardından dilinizin klasörünü seçin.
Metin düzenleyicisini yapılandırma
Araçlar > Seçenekleri > Metin Düzenleyicisi JavaScript/TypeScript'i seçerek JavaScript ve TypeScript için diğer metin düzenleyicisi >seçeneklerini yapılandırabilirsiniz.
Kullanılabilir seçenekler arasında biçimlendirmeyi denetleme özellikleri, kod doğrulama ve metin düzenleyicisinin diğer birçok yönü bulunur.