Ön Uç Geliştiriciler için 8 Güçlü Visual Studio Kod Uzantısı

Microsoft, Visual Studio Kodunun ilk kararlı sürümünü, ancak birkaç ay önce güçlü kod düzenleyicisini Mart 2016'ya kadar yayımlamasına rağmen, kodlama deneyimini bir sonraki seviyeye taşıyabilecek birçok uzantıya sahip. Resmi Visual Studio Kod uzantıları çoğu web geliştiricileri için çok yardımcı olabilecek Visual Studio Code Marketplace'te barındırılıyor.

Bu gönderi için, ön uç geliştirme ile ilgili bir sürü VS Code uzantısını test ettim ve en çok bulduğum kişilerin bir listesini çıkardım. sezgisel, kullanımı kolay ve kullanışlı. Bu herkes tarafından nihai bir liste değil. Pazara göz atmak için zaman ayırın ve özellikle birçok büyük eklenti henüz gelmediğinden, size neler sunabileceğini görün.

VS Kod Uzantıları Nasıl Yüklenir

Bir eklenti yüklemek, Visual Studio Kodunda olduğu gibi oldukça kolaydır. kod editöründe yapın. VS Kod Pazarı'nda her uzantının kendi sayfası vardır ve verilen uzantıyı bu sayfanın üstüne yükleyebileceğiniz komutu bulabilirsiniz..

Komut her zaman ile başlar harici kurulum terim. Bir eklenti yüklemek için basın CTRL + U Açma panelini başlatmak için VS Kodunun içinde, bu komutu kopyala-yapıştır içine ve nihayet kod düzenleyiciyi yeniden başlatın Yeni uzantı çalışması yapmak için.

8 Güçlü Visual Studio Kod Uzantıları

HTML Parçacıkları

HTML'yi Visual Studio Kodunda sık sık yazmak istiyorsanız, HTML Parçacıkları uzantısı, olduğu gibi kullanışlı bir araç olarak gelebilir. HTML için ayrıntılı destek ekler. Her ne kadar VS Code, HTML için temel desteğe sahip olsa da sözdizimi boyama, HTML Parçacıklar uzantısı çok daha fazlasını biliyor.

Muhtemelen bu eklentinin en kullanışlı özelliği, HTML etiketinin adını yazmaya başladığınızda (başlangıç açılı ayraç olmadan), hızlı bir şekilde HTML Parçacıklar bir liste görüntüler Her biri hakkında kısa bilgiler içeren mevcut seçeneklerin listesi.

İhtiyacınız olan öğeyi tıkladığınızda, HTML Parçacıkları tam HTML5 etiketini en yaygın özellikleriyle ekler. Örneğin, belgenize bir bağlantı (bağlantı etiketi) eklemek istiyorsanız, sadece bir bir VS Koduna, açılır kutuda doğru seçeneği seçin; HTML Parçacıkları gerekli olanı ekleyecektir. Herhangi bir güçlük çekmeden editörünüzün pasajı.

Bu uzantının yazarı, kullanımdan kaldırılmış öğelerin kaldırılmasına da dikkat eder, bu nedenle açılan listede bulamadığınız bir HTML etiketi kullanmak istiyorsanız, hala geçerli olup olmadığını kontrol etmeye değer.
HTML CSS Sınıfı Tamamlama

Çok sayıda kullanmanız gerekirse, HTML CSS Sınıfı Tamamlama işlemi yararlı bir uzantı olabilir. CSS sınıfları projende. Sık sık biz geliştiricilere olur, biz Bir sınıfın tam adından tam olarak emin değil, ama sadece pasif bilgi olarak zihnimizin arkasında oturuyor.

Bu akıllı uzantı, bu sorun için bir çözüm sunar. tüm CSS sınıflarının adlarını getirir Geçerli çalışma alanında, ve onlar hakkında bir liste görüntüler..

Diyelim ki, Zurb Vakfı'nı kullanarak bir site oluşturmak istiyorsunuz ve küçük ızgarayı kullanmak istiyorsunuz. Sınıfların tam olarak nasıl adlandırıldığını hatırlamıyorsunuz ama anlamsal adlarına sahip olduklarını biliyorsunuz..

HTML CSS Class Completion ile yalnızca sözcüğü yazmaya başlamanız gerekir. küçük, ve mevcut seçenekler aynı anda ekranda belirir, böylece ihtiyacınız olanı kolayca seçebilirsiniz.
Tarayıcıda Görüntüle

Tarayıcıda görüntüle, Visual Studio Code için basit ama güçlü bir eklentidir. Size izin vererek ön uç gelişimini kolaylaştırabilir Kodlama sırasında tarayıcıdaki çalışmanızın sonucuna hızlıca göz atın. HTML dosyanızı varsayılan tarayıcınızda doğrudan VS Kodundan tuşuna basarak açabilirsiniz. CTRL + F1 klavye kısayolu.

Tarayıcıda Görüntüle'nin sadece HTML'yi destekler, bu nedenle sitenizi görmek istiyorsanız, HTML dosyasını açmanız gerekir. Sen tarayıcıya bir CSS veya JavaScript dosyasından doğrudan erişemez.
Chrome için Hata Ayıklayıcı

Chrome için Hata Ayıklayıcı, Microsoft tarafından üretilmiştir ve şu anda en sık indirilen 4. Visual Studio Kod uzantısıdır..

Chrome için hata ayıklayıcı mümkün kılar Kod düzenleyiciden ayrılmadan Google Chrome'daki JavaScript hata ayıklama. Bu, tarayıcının gördüğü transpiled JavaScript ile çalışmanıza gerek olmadığı anlamına gelir; ancak hata ayıklama işlemini doğrudan orijinal kaynak dosyalarından gerçekleştirme. Nasıl çalıştığını görmek için bu gösterimi izleyin..

Uzantı, her özellik gibi iyi bir hata ayıklayıcısına ihtiyaç duyuyor. kesme noktası ayarı, değişken izleme, adımlama, bir kullanışlı hata ayıklama konsolu, ve diğerleri (ilk sürümün özellik listesine bakın).

Bu uzantıyı kullanmak için Chrome’la başlamanız gerekir. uzaktan hata ayıklama etkin, ve uygun bir launch.json dosya. Bu sonuncusu bir süre alabilir, ancak GitHub hakkında nasıl doğru bir şekilde yapılacağına dair ayrıntılı talimatlar bulabilirsiniz..
JSHint

Visual Studio Code’un JSHint eklentisi, popüler JSHint JavaScript linter’ini doğrudan kod editörüne entegre eder; Onları işledikten hemen sonra hatalarınız hakkında bilgilendirilmek. Varsayılan olarak, JSHint uzantısı bir yapılandırma dosyası yardımıyla özelleştirebileceğiniz linter'in varsayılan seçeneklerini kullanır.

Bu uzantının kullanımı, JSHint'in kırmızı ile işaretlerini ve yeşil alt çizgi ile bildirimleri işaretlemesi nedeniyle oldukça basittir. Sorunlar hakkında daha fazla bilgi istiyorsanız, sadece altı çizili kısımların üzerine gelin ve JSHint bir kerede sorunun açıklamasını içeren bir etiket bırakacaktır.
jQuery Code Snippets

jQuery Code Snippets, temel sözdizimi hataları olmadan hızlı bir şekilde jQuery yazmanıza olanak tanıdığından Visual Studio Code'da ön uç gelişimini büyük ölçüde hızlandırabilir. jQuery Code Snippets şu anda etrafında 130 mevcut pasaj doğru tetiği yazarak çağrı yapabilirsiniz.

Tüm jQuery snippet'leri ancak biriyle başlar jq önek. Bunun tek istisnası fonk tetikle editöre isimsiz bir fonksiyon ekler.

Bu kullanışlı uzantı, uygun sözdiziminden tam olarak emin olmadığınız ve dokümantasyonu kontrol etmek için zaman ayırmak istediğinizde kullanışlı bir yardımcıdır. Ayrıca mevcut seçenekler arasında hızlıca gezinmeyi de kolaylaştırır.
kameriye

Bower VS Code uzantısı, Bower paket yöneticisini Visual Studio Koduna entegre ederek web geliştirme iş akışınızı daha sezgisel hale getirebilir.

Bu uzantıyı kullanmaya başlarsanız terminal ve editör arasında ileri geri geçiş yapmak zorunda değilsiniz, ancak paket yönetimi görevlerinizi doğrudan Visual Studio Kodunda kolayca gerçekleştirebilirsiniz.

Bower uzantısı, projenizin oluşturulmasında size yol gösterir bower.json Ayrıca, dosyayı yükleyebilir, kaldırabilir, arayabilir, güncelleyebilir, önbelleği yönetebilir ve diğer birçok görevi gerçekleştirebilirsiniz (tam özellik listesine bakın)..

Yapabilirsin Komut Paleti'ni başlatarak Bower ile ilgili komutlara erişin basarak F1, yazarak “kameriye” Giriş çubuğuna tıklayarak “kameriye” açılan listedeki seçenek ve uygun Bower komutunun seçilmesi.
Git Tarihçesi

Git History mümkün kılar Git projesinin Visual Studio Code içindeki değişikliklerini takip edin. Bu eklenti, daha büyük bir Github projesine katkıda bulunmak istediğinizde özellikle kullanışlıdır ve diğer geliştiricilerin yaptığı değişiklikleri hızlı bir şekilde kontrol etmek için bir yola ihtiyaç duymak.

Git Geçmişi uzantısı yüklüyken, geçmişi gör dosyanın tamamı veya belirli çizgi bunun içinde. Ayrıca önceki sürümleri karşılaştır aynı dosyanın.

Kelimeyi yazarsanız Git Geçmişiyle ilgili komutlara erişebilirsiniz. “Git” Komuta Paletine (F1), seçmek “Git” açılan listenin içinde seçin ve sonunda ihtiyacınız olan komutu seçin. Bunu not et dosyayı açman gerek üzerinde herhangi bir işlem yapmadan önce geçmişi görmek istediğiniz.