Yararlı Visual Studio Code Eklentileri:
Live Server:
VS Code'un en popüler ve Web geliştirme sürecinde en çok yardımcı olan eklentilerden biridir. Web geliştirirken Yerel Geliştirme Sunucusu hizmeti sunar. Basitçe anlatmak gerekirse vscode'da HTML, CSS veya JavaScript dosyanızda bir değişiklik yapıp kaydettiğiniz zaman anında dinamik bir şekilde değişiklik uygulanır ve açılan live pencerede gözükür. Dosyalarımızı tarayıcıda C:/Users/Project/web/index.html şeklinde açmak yerine, gerçek bir sunucu gibi http://127.0.0.1:5500 adresinden çalışır. Özelleştirilebilir port özelliğine sahiptir varsayılan olarak 5500 portunu kullansada kullanılan port değiştirilebilir.
Kullanımı direk olarak kurup çalıştırabilirsiniz ama eğerki live server'ınızı açtığınız tarayıcıda birçok eklenti varsa private moduna getirmenizi öneririm, yapmanız gereken settings > Search settings(ayarlardaki arama kutusu) > live server yazın > Live Server settings Custom Browser istediğiniz tarayıcının PrivateMode olanını seçebilirsiniz. Live Server'ı çalıştırmak isterseniz aşağıdaki resimdeki kırmızı kutunun içine aldığım go live butonuna tıklayabilirsiniz.
Official VSCode Link: Live Server - Visual Studio Marketplace
Virus Total Link: VirusTotal
Kullanımı direk olarak kurup çalıştırabilirsiniz ama eğerki live server'ınızı açtığınız tarayıcıda birçok eklenti varsa private moduna getirmenizi öneririm, yapmanız gereken settings > Search settings(ayarlardaki arama kutusu) > live server yazın > Live Server settings Custom Browser istediğiniz tarayıcının PrivateMode olanını seçebilirsiniz. Live Server'ı çalıştırmak isterseniz aşağıdaki resimdeki kırmızı kutunun içine aldığım go live butonuna tıklayabilirsiniz.
Official VSCode Link: Live Server - Visual Studio Marketplace
Virus Total Link: VirusTotal
Auto Rename Tag:
Web developerlar (HTML, XML, PHP, JavaScript gibi dillerle uğraşanlar) için geliştirilmiş popüler bir eklentidir. Normalde HTML etiketini değiştirmek istediğimizde hem açılış hemde kapanış etiketini ayrı ayrı değiştirmemiz gerekir işte Auto Rename Tag burada devreye girer siz açılış etiketini değiştirdiğinizde kapanış etiketinide otomatik olarak değişir.
Kullanımı eklentiyi yüklemeniz yeterlidir, html'de bir etiketin açılış kısmında değişiklik yaptığımızda kapanış kısmıda değişir aşağıdaki gibi.
Official VSCode Link: Auto Rename Tag - Visual Studio Marketplace
Virus Total Link: VirusTotal
Kullanımı eklentiyi yüklemeniz yeterlidir, html'de bir etiketin açılış kısmında değişiklik yaptığımızda kapanış kısmıda değişir aşağıdaki gibi.
Official VSCode Link: Auto Rename Tag - Visual Studio Marketplace
Virus Total Link: VirusTotal
Code Runner:
VS Code üzerinde yazdığımız kod parçacıklarını veya dosyaları terminal ile uğraşmadan tek bir tuşla run eder yani derleyip çalıştırır. Çok popüler bir eklentidir. C, C++, Java ve python vb.. birçok dili destekler. Normalde bir kodu çalıştırmak için gcc x.c -o x gibi terminal komutu yazmak gereklidir ama Code Runner bu sorunu çok hızlı bir şekilde çözer.
Bilgisayarımızda çalıştıracağımız dilin compilerinin kurulu olması ve ayarlardan Run In Terminali açmanız (açmak için Settings > Settings Bar > Code Runner yaz > Code-runner: Run In Terminal tikini işaretle.) yeterlidir. Çalıştırmak için ise sağtıklayıp Run Code diyerek veya Ctrl + Alt + N tuşlarına basarak derlenip çalıştırılabilir.
Official VSCode Link: Code Runner - Visual Studio Marketplace
Virus Total Link: VirusTotal
Bilgisayarımızda çalıştıracağımız dilin compilerinin kurulu olması ve ayarlardan Run In Terminali açmanız (açmak için Settings > Settings Bar > Code Runner yaz > Code-runner: Run In Terminal tikini işaretle.) yeterlidir. Çalıştırmak için ise sağtıklayıp Run Code diyerek veya Ctrl + Alt + N tuşlarına basarak derlenip çalıştırılabilir.
Official VSCode Link: Code Runner - Visual Studio Marketplace
Virus Total Link: VirusTotal
CodeSnap:
Yazılım geliştiricilerin yazdıkları kodları estetik, profesyonel ve paylaşılabilir görsellere dönüşmesini sağlayan popüler bir eklentidir. Çoğu zaman sosyal medyada paylaşılan şık, renkli ve gölgeli kod ekran görüntüleri bu eklenti ile oluşturulur. Kodu seçtiğimiz gibi anında kod görüntüsünü oluşturur.
Official VSCode Link: CodeSnap - Visual Studio Marketplace
Virus Total Link: Item not found uyarısı veriyor
Official VSCode Link: CodeSnap - Visual Studio Marketplace
Virus Total Link: Item not found uyarısı veriyor
Better Comments:
Kodumuzdaki yorum satırlarını renklendirir, düzenli ve ayırt edilebilir hale getirebilir. Popüler olan bir eklentidir. Standart yorum satırları genelde sönük görünür ama bu eklenti ile yorum satırlarımızı renkli ve canlı hale getirebiliriz.
Official VSCode Link: Better Comments - Visual Studio Marketplace
Virus Total Link: VirusTotal
Official VSCode Link: Better Comments - Visual Studio Marketplace
Virus Total Link: VirusTotal
Indent-rainbow:
Yazılımcılar için kod yazarken okunabilirliği artırmak amacıyla tasarlanmış ve popüler bir eklentidir. Yaptığı şey, kodun sol taradındaki girintileri farklı renklere boyayarak her kod seviyesini görsel olarak birbirinden ayırır. Odaklanmayı kolaylaştırır.
Official VSCode Link: indent-rainbow - Visual Studio Marketplace
Virus Total Link: VirusTotal
Official VSCode Link: indent-rainbow - Visual Studio Marketplace
Virus Total Link: VirusTotal
Live Share:
Yazılımcıların aynı kod dosyası üzerinde, faklı bilgisayarlardan gerçek zamanlı olarak birlikte çalışmasını sağlayan bir eklentidir. Microsoft tarafından geliştirilmiştir. Takım arkadaşımızla aynı dosyada farklı satırlarda kod yazmamıza olanak tanır. Kimin nerde olduğunu renkli imleçlerle görebiliriz. Takım arkadaşınız başka bir kod dosyasını düzenlerken sizde başka bir kod dosyasını düzenleyebilirsiniz.
Official VSCode Link: Live Share - Visual Studio Marketplace
Virus Total Link: VirusTotal
Official VSCode Link: Live Share - Visual Studio Marketplace
Virus Total Link: VirusTotal
Bookmarks:
VSCode içerisinde kod yazarken belirli satırlara yer işareti koymamıza yarar. Koyduğumuz yer işaretlerinede isim koymamıza olanak tanır.
Kullanımı:
Yer İşareti Koy/Kaldır:
Windows: Ctrl + Alt + K
MacOS: Cmd + Option + K
Sonraki İşareteGit:
Windows: Ctrl + Alt + L
MacOS: Cmd + Option + L
Önceki İşarete Git:
Windows: Ctrl + Alt + J
MacOS: Cmd + Option + J
Tümünü Listele:
Windows: Ctrl + Shift + P
MacOS: Cmd + Shift + P
Official VSCode Link: Bookmarks - Visual Studio Marketplace
Virus Total Link: VirusTotal
Kullanımı:
Yer İşareti Koy/Kaldır:
Windows: Ctrl + Alt + K
MacOS: Cmd + Option + K
Sonraki İşareteGit:
Windows: Ctrl + Alt + L
MacOS: Cmd + Option + L
Önceki İşarete Git:
Windows: Ctrl + Alt + J
MacOS: Cmd + Option + J
Tümünü Listele:
Windows: Ctrl + Shift + P
MacOS: Cmd + Shift + P
Official VSCode Link: Bookmarks - Visual Studio Marketplace
Virus Total Link: VirusTotal
Code Spell Checker:
Yazdığımız kodlardarki metinleri ve değişken isimlerini denetleyen bir eklentidir. Basit denetleyicilerden farkı , kodun yapısını bozmadan sadece anlamlı kelimeleri kontrol etmesidir. Yanlış yazılan kelimenin altını sanki kod hatasıymış gibi tırtıklı olarak çizer. Geniş bir dil yelpazesi vardır Türkçe dahil bir çok dahil dilde denetim yapılabilir. Türkçe dil desteği için ekstra olarak Turkish - Code Spell Checker uzantısını indirmeniz gerekir. Türkçeyi aktif etmek için ise Ayarları açıp arama çubuğuna CSpell Language yazın ve dil seçenekleri kısmında tr ve en dillerinin ekli olduğundan emin olun.
Official VSCode Link: Code Spell Checker - Visual Studio Marketplace
Virus Total Link: VirusTotal
Official VSCode Link: Code Spell Checker - Visual Studio Marketplace
Virus Total Link: VirusTotal
Prettier - Code formatter:
VS Code'da kod yazarken bazen kodları düzenli değil karman çorman yazarız işte Prettier - Code formatter burada devreye girerek kod yazımındaki düzensizlikleri nizami bir şekilde hemen düzenler. Yazılımcılara vakit kazandırır mesela burada boşlukmu olmalı? parantezi alt satıramı koysam? gibi düşüncelere dalmadan kodumuzu kaydettiğimiz anda düzenler. Kullanımı eklentiyi kurduktan sonra Ayarlardan editor: Default Formatter kısmını prettier olarak seçin, sonra yine ayarlardan Editor: Format On Save seçeneğini aktif ettikten sonra kodunuzu kaydettiğiniz zaman otomatik olarak düzenlenir.
Official VSCode Link: Prettier - Code formatter - Visual Studio Marketplace
Virus Total Link: VirusTotal
Official VSCode Link: Prettier - Code formatter - Visual Studio Marketplace
Virus Total Link: VirusTotal
