Web Geliştiricileri için En İyi 16 VS Kodu Uzantısı

Microsoft Visual Studio Code (VS Code), yazılım geliştiriciler için en iyi kod düzenleyicilerinden biridir. Piyasaya sürülmesinden bu yana, popülaritesi yalnızca sağladığı kararlı platform nedeniyle değil, aynı zamanda Microsoft'un yerleşik genişletilebilir doğası nedeniyle de arttı. Uzantı pazarı, geliştiricilerin VS Code'u hayallerindeki geliştirme ortamına göre özelleştirmelerine olanak tanıyan bir eklentiler ve özellikler bolluğudur. Hiçbirini kaçırmamanız için bugün mevcut olan en iyi VS Kodu uzantılarından bazılarını incelemek istiyoruz.

1. Sublime Text Keymap ve Settings Importer

Listemizin başında, uygun bir şekilde başlıklı Sublime Text Keymap ve Settings Importer var. Başlığın yeterince açıklayıcı olmaması durumunda, bu uzantı, varsayılan olarak VS Code'u sorunsuz bir şekilde kullanabilmeniz için mevcut Sublime Text tuş haritalarınızı ve ayarlarınızı çekmenize olanak tanır. Pek çok insan Sublime'ı sevdiğinden ve bunun için yıllarını harcadığından, VS Code'u o editörden kazanılan kas hafızasını tutmak çok mantıklı.

2. JavaScript (ES6) Kod Parçacıkları

Aynı snippet'leri tekrar tekrar tekrarladığınızda JavaScript (veya herhangi bir kod) yazmak zahmetli hale gelebilir. Bu uzantı, sık kullanılan kod parçacıkları için temel olarak kısayollar yazmanıza izin vererek bunu hafifletmeye yardımcı olur. Tetiklendiğinde, pasaj metni değiştirir ve doğrudan belgeye eklenir.

3. Braket Çifti Renklendirici 2

Kodladığınız dilden bağımsız olarak, parantezler muhtemelen bunun önemli bir parçası olacaktır. Ve onları düz tutmak baş ağrısı olabilir. Ancak bu VS Code uzantısıyla, bu sıkıntılı noktayı hafifletmeye yardımcı olmak için eşleşen çiftleri renklendirebilir ve düzenleyicinin değil, kodun kendisinin çalışmasını sağlamaya çalışabilirsiniz.

4. ESLint

Birçok yönden, ESLint JavaScript için linter olduğunu. Hataları yakalamak ve size anında geri bildirim ve uyarılar vermek, ekibinizin kodunu temiz tutmak için çok önemlidir ve bunu JS'de yapmanın ESLint'ten daha iyi bir yolu yoktur. Bunu mümkün olan en kısa sürede yüklemenizi şiddetle tavsiye ederiz.

5. Proje Yöneticisi

VS Kodu ile ilgili oldukça sık ortaya çıkan bir sorun, farklı projeler arasında nasıl geçiş yapılacağıdır. Varsayılan olarak, akış tam olarak en sezgisel değildir. Böylece Proje Yöneticisi, kenar çubuğunda size farklı klasörleri kaydetmek için kullanabileceğiniz bir menü ve Git projeleri arasında kolayca geçiş yapabileceğiniz bir menü vererek bu sorunu çözmeye çalışır. Bu, bir yaşam kalitesi artışı olduğu için bir editör geliştirmesi değildir.

6. Tarayıcı Önizlemesi

Web geliştirmenin en iğrenç unsurlarından biri, içeriğinizi test için farklı tarayıcılarda yüklemek ve yenilemektir. Tarayıcı Önizleme, yeni bir Chrome işleminde size VS Code içindeki çalışmanızın sağlam bir önizlemesini sunarak, bunu yapmanız gereken miktarı sınırlamanıza yardımcı olur.

7. Daha güzel

Hepimiz daha güzel kod istiyoruz. Bu yüzden muhtemelen hepimiz bunu bizim için halletmesi için Prettier'i kurmalıyız. Açıklama, Prettier'i "görüşlü bir kod biçimlendiricisi, kodunuzu ayrıştırarak ve gerektiğinde kodu kaydırarak maksimum satır uzunluğunu hesaba katan kendi kurallarıyla yeniden yazdırarak tutarlı bir stil uygular" olarak tanımlar. Her dil veya proje için kullanmak istemeyebilirsiniz, bu nedenle beğeninize göre özelleştirebilmeniz için birçok yapılandırma ayarı vardır.

8. git bağlantısı

Basitliği nedeniyle gitlink'i seviyoruz. Çok sayıda Git uzantısı olsa da gitlink ile ilgili şeylerden biri basit olması ve tek bir şey yapmasıdır. Ve bunu iyi yapıyor. Sadece bir kod pasajını vurgulayın ve gitlink sizi o belirli pasajın çevrimiçi deposuna götürecektir. Nerede barındırıldığına bakılmaksızın deponuza hızlı bir şekilde gitmek inanılmaz derecede faydalıdır.

9. Daha İyi Yorumlar

Kodunuzu yorumlamak, bir geliştiricinin sahip olabileceği en önemli alışkanlıklardan biridir. Bundan da öte, kodunuzu iyi yorumlamak, her bilgisayar bilimi sınıfında ve oradaki kodlama eğitim kamplarında öğretilmesi gereken bir beceridir. Bununla birlikte, Daha İyi Yorumlar herkesin ihtiyaç duyduğu VS Kodu Uzantılarından biridir, çünkü adına inanırsanız, kodunuzda daha iyi yorumlar bırakmanıza izin verecektir. Sorular, ünlemler, yorum yapılan kodlar, sorgular, uyarılar, vurgulamalar ve TODO'lar arasında ayrım yapmanızı sağlayan kısayollarla bu uzantı yalnızca hayatınızı kolaylaştırmakla kalmayacak, ekibinizin hayatını da kolaylaştıracak. Ve projede sizden sonra gelen herhangi bir geliştirici. Bunu yeterince tavsiye edemeyiz.

10. VS Kodu Simgeleri

VS Kodunu uzantılarla özelleştirmenin büyük bir kısmı gerçek özelleştirmedir. Sadece işlevsellik değişiklikleri değil. VS Code Icons ile editör biraz daha renkli ve gezinmesi daha kolay hale geliyor. Dosya sistemi, çeşitli dosya türlerini temsil eden simgelerle kaplanmıştır ve bunlar, belge sekmelerinin yanı sıra gezginde de görünür. Karmaşık dosya sistemlerinde yolunuzu çok daha kolay ve daha az baş ağrısından kurtarır. Kelimenin tam anlamıyla bazen. Simgelerin çok kolay okunması göz yorgunluğunu ve dolayısıyla baş ağrısını önler. Sağlığınız için VS Code Icons yükleyin.

11. Otomatik Kapatma Etiketi

Belki biziz, ancak herhangi bir dil için kapanış etiketlerini yazmak çok angarya haline geliyor. Sonunda bunu / girişini eklemekle ilgili, tuş vuruşlarını biraz kapalı hissettiren bir şey var. Asla korkma. Otomatik Kapatma Etiketi hayatımızı kolaylaştırdı. Bu yüzden sizinkini kolaylaştırmak istiyoruz. Basit ve kolaydır ve aralarında yazmaya devam edebilir ve bir sonraki satıra veya o satırın sonuna kadar sadece tuşa basabilirsiniz. Bunu kurun ve parmaklarınızı manuel olarak etiketleme jimnastiğinden bir mola verin.

12. renklendirmek

CSS'si harika. CSS'de renk seçmek değildir. Onaltılı kodlar ve RGBA değerleriyle uğraşırken, bir site için hangi paleti belirlediğinize dair zihinsel bir resim elde etmek bazen zordur. Bu uzantı, dosyalarınızda kullandığınız herhangi bir renk kodu için görsel bir not sağlayarak bunu hafifletmeye yardımcı olur. Metnin içinde kullandığınız renkleri vurgu olarak görebilirsiniz, böylece sürekli olarak renk örnekleri ve renk seçiciler arasında geçiş yapmak zorunda kalmazsınız.

13. Polakod

Polacode, kod düzenleyiciniz için bir Polaroid kamera gibidir. Kodunuzun anlık görüntüsünü daha temiz ve daha kolay hale getirmek için tasarlanan bu, kodlarının tam olarak doğru olmasını isteyen tüm eğitim yazarları için bir zorunluluktur.

14. GitLens

GitLens'i bu kadar harika yapan şeyin ne olduğunu tam olarak açıklamak zor. Git ve VS Kodu birbirleri düşünülerek tasarlanmış gibi çalışır ve komut satırı hiyerarşileri üzerinde çalışmak yerine, ekip Git çalışmasındaki kafa karışıklığının çoğunu ortadan kaldıran görselleştirmeler ve içgörüler elde edersiniz. Bir şeyleri üzerine gelme yoluyla görüntüleyebilir, son değişiklikleri ve ek açıklamaları görebilir, VS Kodunun kendi içindeki karşılaştırma görünümlerini, ısı haritalarını, satır geçmişini ve çok daha fazlasını görebilirsiniz. Temelde mükemmel Git uzantısıdır ve onu hemen yüklemeniz gerektiğini düşünüyoruz.

15. Canlı Sunucu

Hiç IDE'nizin içinden yerel bir geliştirme sunucusu başlatmak ve üzerinde gerçek zamanlı olarak çalışmak istediniz mi? Bu soruyu nasıl yanıtlamış olursanız olun, Live Server'a bir şans vermek isteyeceksiniz. Çünkü tam olarak onunla yapabileceğiniz şey bu. Local by Flywheel ve MAMP gibi ürünlere olan ihtiyacı tamamen ortadan kaldırmasa da, birçok durumda kesinlikle gerekliliğini azaltır.

16. Güzelleştirin

Beautify, JavaScript'inizin güzel ve düzenli görünmesini sağlamak için popüler js-beautify'ı kullanır. Kırık çizgiler, garip boşluklar ve girintiler için endişelenmeyin. Sadece bir düğmeye tıklayın ve tüm kodunuz yakın çekim için hazır olacaktır (belki yukarıdan Polacode ile).

Çözüm

Bu liste binlerce öğe uzunluğunda olabilir. Aslında, muhtemelen farklı zamanlarda etkinleştirip devre dışı bıraktığınız yüzlerce farklı uzantıya sahip olanlarınız vardır. Ancak bunların, kurabileceğiniz VS Code uzantıları olduğunu düşünüyoruz ve ardından pazarda daha derine indikçe başka ne istediğinizi öğreniyorsunuz.

Go-to VS Code uzantılarınız nelerdir? Yorumlarda bize bildirin!

Makale özellikli görsel SVIATLANA SHEINA tarafından / Shutterstock.com