Görsel stüdyo kodu kullanışlı uzantıları. Visual Studio Code için faydalı eklentiler. .html veya .htm dosyası yoksa Canlı Sunucuyu etkinleştirme

Görsel stüdyo Kod ücretsizdir, platformlar arası Metin düzeltici hafifliği, güçlü ve genişletilebilir işlevselliği ve elbette PHPStorm, Sublime, vb.'nin aksine "freebie" nedeniyle popüler hale gelen Microsoft'tan.

Çoğu modern IDE gibi, VSCode orijinal yeteneklerini genişleten birçok eklentiye sahiptir. Bu editörde çalışan herhangi bir programcıya faydalı olacak 15 eklenti seçtik.

Tarayıcıda aç

Varsayılan olarak, Visual Studio Kodu dosyayı tarayıcıda açmanın bir yolu yoktur. Bu uzantı"Tarayıcıda aç" işlevini eklemekle kalmaz, aynı zamanda bilgisayarınızda yüklü olan herhangi bir tarayıcıda dosyaları açmanıza olanak tanır.

Quokka

Quokka- belirli bir kod parçasını yürütmenin sonucunu önizlemenize, işlevlerin yürütülmesinin sonuçlarını ve değişkenlerin hesaplanan değerlerini görüntülemenize izin veren bir yardımcı program. Uzantının yapılandırılması kolaydır ve kutudan çıktığı gibi çalışır: JSX veya daktilo projeler.

sahtekar

Kod içine hızlı bir şekilde rastgele veriler (rasgele adlar, adresler, resimler, telefon numaraları vb.) eklemenizi sağlar. Her kategorinin kendi alt bölümleri vardır, bu da programcının ihtiyaçlarına daha doğru bir şekilde uyum sağlamanıza olanak tanır.

CSS Özeti

Bu eklenti ile bir CSS dosyasında sınıf tanımlarını ve kimliklerini takip edebilirsiniz. Bunu yapmak için basmanız gerekir sağ tık fareyi HTML dosyanızdaki seçicinin üzerine getirin ve Tanıma Git(Tanıma git) veya Peek tanımı(Tanıma bakın).

HTML Tanımlayıcısı

HTML Tanımlayıcısı Head ve body etiketlerini kendiniz yazma gereğini ortadan kaldırarak HTML ile çalışmayı kolaylaştırır. Boş bir html dosyası yazın, Sekme tuşuna basın ve Visual Studio Kodu bir belge şablonu oluşturacak!

daha güzel

daha güzel Farklı kişiler tarafından yazılan kodları tek bir forma getirmenizi sağlayan, web geliştiricileri arasında popüler bir kod düzenleyicisidir. ayarlarda daha güzel JS ve CSS'de yazılan kodu hemen biçimlendirecek olan otomatik çalıştırmayı ayarlayabilirsiniz.

Renk Bilgisi

CSS'de kullanılan renkler hakkında hızlı referans sağlayan küçük bir eklenti. Bir renk adının üzerine gelerek nasıl göründüğünü ve diğer renk formatlarında nasıl yazılacağını görebilirsiniz ( altıgen, rgb, hsl ve cmyk).

SVG Görüntüleyici

Bu uzantı, SVG dosyalarıyla çalışmanıza izin verir: düzenleyebilirsiniz SVG dosyaları, onları dönüştür PNG formatı ve veri url şeması oluşturun.

YAPILACAKLAR Vurgu

Bu eklenti, kodunuzdaki bitmemiş yerleri etiketlemenizi sağlayarak projenizi kolaylaştırır. Varsayılan olarak, yalnızca etiketler ayarlanır YAPMAK(bitiş) ve ONAR BENİ(düzeltme), ancak kendi etiket türlerinizi de oluşturabilirsiniz.

Simgeli yazı tipleri

Eklenen bir uzantı Visual Studio Kodu dahil olmak üzere yaklaşık 20 popüler simge yazı tipi için destek Yazı Tipi Harika, iyonikonlar, glifonlar, Malzeme Tasarımı...

küçült

Kodu optimize etmek ve sıkıştırmak için yardımcı program. küçült ile çalışır HTML, J'ler ve CSS dosyalar ve gibi eklentilerle harika çalışıyor çirkin-js, temiz css ve html küçültücü.

Büyük/küçük harf değiştir

VS Kodu seçimi yalnızca büyük ve küçük harfe dönüştürmenize olanak tanır. Vasıtasıyla Büyük/küçük harf değiştir, çok sayıda sicile (yılan, deve vb.)

Normal İfade Önizleyicisi

Normal ifadelerle çalışmanıza izin veren bir eklenti. Normal İfade Önizleyicisişablonu uygular Düzenli ifade tüm eşleşmeleri vurgulayarak herhangi bir açık metin dosyasına. Tıpkı

2020'de web geliştirme için en iyi Visual Studio Code düzenleyici eklentilerine bir göz atalım.

1. Canlı Sunucu
2. Otomatik Kapat Etiketi
3. İthalat maliyeti
4. Malzeme Tema
5. Apache Konf.
6. Rusça Dil Paketi
7. Küçük ikramiye

1. Canlı Sunucu

.html veya .htm dosyaları için Canlı Sunucuyu Etkinleştirme:

.html veya .htm dosyası yoksa Canlı Sunucuyu etkinleştirme:

Canlı Sunucu kullanarak PHP dosyaları için otomatik sayfa yenileme nasıl ayarlanır

2. küstah

Sass sözdizimi desteği: girinti, otomatik tamamlama ve daha fazlası

SASS / SCSS dosyalarını gerçek zamanlı olarak CSS'ye derler

Açmak için basmanız gerekir küstah izle durum çubuğunda

Live Sass Complier şunları içerir:

1. derlenmiş dosya için dışa aktarma klasörünün seçimi
2. CSS stili seçimi (genişletilmiş, kompakt, yoğun, iç içe)
3. uzantı adı seçimi (.css veya .min.css)
4. uzantı uyumluluğu Canlı Sunucu
5. satıcı öneklerinin otomatik ayarını ayarlama
6. vb

Etiketleri vurgulama - açma ve kapama

Etiket seçiminin vurgulanması kendiniz için özelleştirilebilir. Kurulumum:

Düzenleyicide web renklerini karşılık gelen renkle vurgulama

Uzantı, simetrik parantezleri aynı renge sahip ancak diğer parantezlerden farklı renklendirir.

Eşleştirilmiş bir etiketi değiştirdiğinizde, ikincisi otomatik olarak değiştirilecektir.

Varsayılan olarak, uzantı tüm dillerde çalışır, bu ayarı değiştirmek için aşağıdaki kodu kullanın:

8. Otomatik Kapatma Etiketi

Otomatik etiket kapatma

Varsayılan olarak tüm diller için çalışır: HTML, PHP, JavaScript, markdown, sıvı vb. Ayarları settings.json'da değiştirebilirsiniz.

9. İthalat Maliyeti

Bu uzantı, içe aktarılan paketin boyutunu düzenleyicide satır içi görüntüler.

10. Malzeme Teması

VS Code için en popüler temalardan biri. Ayrıca bitişik harfleri destekleyen bir yazı tipi de yükleyebilirsiniz (bir dizi karakterin tek bir öğeye dönüştürülmesi)

Ardından settings.json için ayarlar şu şekilde olacaktır.

11. Apache Konfigürasyonu

Apache sözdizimi desteği. Uzantıları olan dosyaları düzenlemek için uygun .htaccess... Ayrıca dosya türlerini de destekler: .conf, .htgroups, .htpasswd

Faker kitaplığını kullanarak rastgele verileri hızlı bir şekilde eklemek için. İsteğe bağlı adlar, adresler, resimler, telefon numaraları ve daha fazlasını ekleyebilirsiniz. Çok popüler ve çok kullanışlı bir eklenti.

Bir dize yazarken dosya adlarını otomatik olarak tamamlamanıza olanak tanır. Belki yakında bu işlevsellik editöre entegre edilecek, ancak şu ana kadar eklenti çok yardımcı oluyor.

Kodda yer imleri bırakmanıza izin veren bir eklenti, onlarla çalışmak da aynı derecede kolay ve kullanışlıdır.

Kodda yazım denetimi için eklenti.

GitLens, yerleşik Visual Studio Code Git özelliklerini yeniden yükler. Kod geçmişi bilgilerinizi Git'te hemen görselleştirmenize, sorunsuzca gezinmenize ve bir dosyanın veya dalın geçmişini keşfetmenize, bir eklenti, kod karşılaştırmaları ve daha fazlası aracılığıyla değerli bilgiler edinmenize yardımcı olur.

Arka uç geliştiriciler için eklentiler

Güç kalkanı

PowerShell komut dosyalarıyla doğrudan Görsel Kod arabiriminde çalışmanıza olanak tanır.

piton

Eklenti görsel kod Aşağıdaki özellikleri içeren Python dil desteğine sahip Studio (Python 3.6 dahil):

• Linting (Prospector, Pylint, pycodestyle, Flake8, pylama, pydocstyle, mypy)
• iyileştirmek
• Otomatik girinti, kod biçimlendirme, yeniden düzenleme
• Birim testlerini çalıştırma ve hata ayıklama (unittest, pytest, burun)
• snippet'ler

• .NET Core geliştirme ve hata ayıklama araçları.
• Sözdizimi vurgulama, IntelliSense, tanıma gitme, tüm referansları bulma vb. dahil olmak üzere harika C# düzenleme desteği.
• Windows, MacOS ve Linux için project.json ve csproj projeleri için destek.

Ön uç geliştirici eklentileri

JSHint

JSHint, JavaScript kodunun statik analizi için çok kullanışlı bir araçtır. Yazılan kodun programlama standartlarını karşılayıp karşılamadığını kontrol eder.

Code Time açık kaynaklı bir eklentidir kaynak kodu bu, doğrudan kod düzenleyicide metrikler sağlar.

Uzantıyı yükledikten sonra, kontrol paneline girmeniz istenecektir. Kod düzenleyicinin içinde tıklarsanız komut + üst karakter + P, girebileceğiniz bir pencere açılacaktır. kod zamanı ve ardından verileri bir kod düzenleyicide veya bir tarayıcıda görüntüleme arasında seçim yapın.

Tarayıcının içinde bilgiler şöyle görünecektir:

Tarayıcının içinde daha renkli:

Code Time, tam olarak bilmeniz gerekiyorsa veya sadece kod yazmak için ne kadar zaman harcadığınızı merak ediyorsanız kullanışlıdır.

Bir karanlık profesyonel

Bir karanlık profesyonel Visual Studio Code için en popüler ve sık indirilen temalardan biri.

Bu örnekte, istemci ve sunucu gibi dizinler için simgelerin yanı sıra aşağıdaki gibi dosyalar için simgelere sahip olduğumuzu görebilirsiniz. .eslintrc .gitignore ve paket.json.

bir karanlık profesyonel React, Angular, Redux ve birçok farklı çerçeve ve kitaplıkta desteklenir ve bileşenler, yardımcı programlar, stiller ve ayrıca Redüktörler, Eylemler ve Mağazalar için farklı dizin simgeleri sağlar.

Braket Çifti Renklendirici

Bu uzantı, parantezleri renklerle eşleştirmenize olanak tanır. Bu, burada gösterildiği gibi derinlemesine iç içe nesneler veya işlevlere sahip olduğunuzda kullanışlıdır:

Renk Vurgusu

Renk Vurgusu, herhangi bir renk kodunun görsel bir temsilini gösterir. Örneğin RGB, RGBa, Hexadecimal veya başka bir renk kodu girerseniz rengi şu örnekteki gibi görebilirsiniz:

Yol Intellisense

Path Intellisense, dosya adlarını otomatik olarak tamamlayan bir eklentidir.

Bu, bileşenleri React'e aktarmak için kullanışlıdır çünkü aradığınız dosyanın yolunu manuel olarak girmeniz gerekmez.

ES7 React / Redux / GraphQL / React-Native Snippet'ler

Bir sonraki uzantı ES7 React / Redux / GraphQL / React-Native Snippets'tir. Uzun başlık, ancak özellikle React'te kullanıyorsanız size çok zaman kazandıracak.

Bu uzantı, ES7'de VS Code için Babel eklentisinin özellikleriyle JavaScript ve React / Redux snippet'leri sağlar.

Sağ kod düzenleyicide, tıklayabilirsiniz komut + üst karakter + P, ve daha sonra ES7 Snippet Arama, daha uzun kod parçacıkları elde etmek için çalıştırabileceğiniz uzun bir kısa komut listesi göreceksiniz.

Bu uzantı ile, örneğin işlevsel bir bileşenin bir parçası için kolayca bir komut bulabilirsiniz.Komutları düzenleyiciye yazıp enter tuşuna basarak çalıştırabilirsiniz. Bu kadar basit!

GitLens - Git güçlendirilmiş

GitLens, Visual Studio Code'da yerleşik olarak bulunan Git özelliklerini genişletir. Git-suçlama ve kod merceği açıklamalarıyla bir bakışta kodunuzun yazarını belirlemenize, Git depolarında kolayca gezinmenize ve bunları keşfetmenize, karşılaştırma komutlarıyla içgörü kazanmanıza ve daha pek çok şeye yardımcı olur. Bir kod satırına tıklayarak, onu kimin düzenlediğini, ne zaman düzenlendiğini ve hangi işlemde yapıldığını görebilirsiniz.

hakkında konuşalım kod -. Sevgili okuyucularım, geliştirme için kullandığım uzantıları size anlatmamı istedi. Şimdi yapacağımız şey bu.
VSC İndirme Bağlantısı: https://code.visualstudio.com/ VSC'miz, her gün kullandığım en kullanışlı uzantıları sağladıktan sonra, beş boynuzlu, lazerle ateş eden bir tek boynuzlu at olacak. Oh, ve zaten harika VSC editörünü kullanmıyorsanız, yukarıdaki resmin altında onu indirebileceğiniz resmi siteye bir bağlantı var.
Malzeme Tema

Malzeme Tema

Otomatik İçe Aktarma

İthalat maliyeti

Girinti-Gökkuşağı

HTML'de CSS sınıf adları için IntelliSense

SVG Görüntüleyici

Daha güzel - Kod biçimlendirici

React Native Tools

Sublime Text Keymap ve Settings Importer

npm Intellisense

lit-html

vurgu-eşleme-etiketi

GitLens - Git güçlendirilmiş

Git proje yöneticisi

Git geçmişi

Dosya Araçları

Braket Çifti Renklendirici

Renk Vurgusu

CSS Özeti

Chrome için Hata Ayıklayıcı

Quokka.js

Sondaki Boşluklar

TypeScript Kahramanı

WakaZamanı

vetur

Kod koşucusu