VS Kodundan Tarayıcıda Nasıl Açılır

HTML, PHP veya JS dosyaları kullanıyorsanız, bunları tarayıcınızda Visual Studio Code'dan açmak isteyebilirsiniz. Ancak, bunu yapmak için entegre bir seçenek yoktur. Bu, özellikle kodlamanızın sonucuna hızlıca bir göz atmak istiyorsanız sinir bozucu olabilir.

Neyse ki, "Tarayıcıda Aç" işlevini diğer yöntemlerle etkinleştirebilirsiniz. Bu makale size bunu nasıl yapacağınızı gösterecek.

Windows PC'de Tarayıcıda VS Kodunda Nasıl Açılır

Windows'ta Visual Studio Code için Tarayıcıda Aç seçeneğini almanın en kolay yolu bir uzantı kullanmaktır. Uzantıları Visual Studio Code'a yüklemek, dosyaları tarayıcıda açmak için kullanmak gibi nispeten basittir.

1. HTML dosyanızı Visual Studio Code Editor'da açın .
   
2. En soldaki dikey araç çubuğunda, "Uzantılar"ı tıklayın. Alternatif olarak, Uzantıları başlatmak için "Ctrl + Shift + X" klavye kısayolunu kullanabilirsiniz.
   
3. Yazmayı etkinleştirmek için arama çubuğuna tıklayın.
   
4. "Tarayıcıda aç" girin. Arama teriminizle eşleşen bir uzantı seçin.
   
5. "Yükle" düğmesini tıklayın.
   
6. Programı yeniden yükleyin.
7. Sol araç çubuğundan Explorer'ı seçin.
   
8. HTML dosyanızı Explorer'da bulun ve üzerine sağ tıklayın. "Varsayılan Tarayıcıda Aç" veya "Diğer Tarayıcılarda Aç"ı seçin.
   
9. “Varsayılan Tarayıcıda Aç” seçeneğini belirlerseniz, HTML dosyası varsayılan olarak ayarlanmış tarayıcıda açılır. "Diğer Tarayıcılarda Aç"ı seçerseniz, hangi tarayıcının kullanılacağını belirtmeniz gerekir.

Visual Studio Marketplace'te pek çok yararlı uzantı bulabilirsiniz . Veya en olumlu kullanıcı incelemelerine sahip Tarayıcıda Aç uzantılarını buradan edinebilirsiniz: Uzantı 1 , Uzantı 2 , Uzantı 3 , Uzantı 4 .

Mac'te VS Kodunda Tarayıcıda Nasıl Açılır

Visual Studio Code, programın işlevselliğini artıran çeşitli uzantılar kullanılarak yükseltilebilir. Bir uzantı türü, HTML, PHP veya JS dosyalarının varsayılan veya başka bir tarayıcıda açılmasını sağlayabilir. Mac'te bu seçeneği nasıl etkinleştireceğiniz aşağıda açıklanmıştır.

1. Visual Studio Code Editor'ı kullanarak istediğiniz dosyayı açın.
   
2. Soldaki araç çubuğuna gidin ve "Uzantılar"ı seçin.
   
3. Uzantılar panelinde arama çubuğuna tıklayın ve “tarayıcıda aç” yazın.
   
4. Bir uzantı seçin ve "Yükle"yi tıklayın.
   
5. Yazılımı yeniden yükleyin.
6. Sol araç çubuğuna gidin ve Explorer'ı seçin.
   
7. Açmak istediğiniz dosyayı Explorer panelinde bulun ve üzerine sağ tıklayın. "Varsayılan Tarayıcıda Aç" veya "Diğer Tarayıcılarda Aç"ı seçin.
   
8. "Varsayılan Tarayıcıda Aç" seçeneği, dosyayı önceden seçilen tarayıcıyı kullanarak başlatır. "Diğer Tarayıcılarda Aç", makinenizde kurulu tarayıcılardan birini seçebileceğiniz bir bilgi istemi getirecektir.
   

Visual Studio Marketplace, Visual Studio Code'a yeni işlevler ekleyebilen çok çeşitli uzantılara sahiptir. Programı daha fazla değiştirmek istiyorsanız, web sitesi keşfedilmeye değer. Ayrıca, yalnızca Tarayıcıda Aç uzantılarıyla ilgileniyorsanız, işte bazı öneriler: Uzantı 1 , Uzantı 2 , Uzantı 3 , Uzantı 4 .

Tarayıcı Kısayolunda Aç

Visual Studio Code için Tarayıcıda Aç uzantısının neredeyse her biri klavye kısayolları etkinleştirilmiş olarak gelir. Ancak, kısayollar tek tip değildir. Bunun yerine, her uzantı, dosyayı tarayıcınızda açmayı etkinleştirecek belirli bir tuş kombinasyonuna sahiptir.

İşte bu makalede önerilen uzantılar için klavye kısayolları.

1. Uzantı 1: Windows'ta "Ctrl + 1", Mac'te "Command + 1".
   
   
2. Uzantı 2: Windows'ta "Ctrl + Alt + O", Mac'te "Command + Option (Alt) + O".
   
3. Uzantı 3: Windows'ta "Ctrl + Shift + F9", Mac'te "Command + Shift + F9".
   
   
4. Uzantı 4: Windows'ta "Ctrl + Shift + P", Mac'te "Command + Shift + P".
   
   

Bu kısayolların yalnızca bu makalede bağlantısı verilen ilgili uzantılarda çalışacağını unutmayın. Farklı bir uzantı yüklemeyi seçerseniz, ilgili kısayollar muhtemelen onun Marketplace sayfasında listelenecektir.

HTML'yi Visual Studio Kodunda Çalıştırma

Visual Studio Code'da HTML ile çalışmakla ilgileniyorsanız, HTML kodunu program içinde çalıştırmanın bazı yöntemlerini burada bulabilirsiniz.

İlk yöntem, çalıştırmak istediğiniz dosyayı manuel olarak yüklemekten oluşur.

1. Visual Studio Code'u açın ve yeni bir HTML dosyası oluşturun.
   
2. "Dosya"ya gidin, ardından "Kaydet"i tıklayın.
   
3. HTML:5'i kullanarak HTML şablonunu etkinleştirin. Ardından, 2. adımda kaydettiğiniz dosyayı açın.
   
4. Dosyayı tarayıcınızda başlatmak için daha önce yüklediğiniz Tarayıcıda Aç uzantısını kullanın.
5. Tarayıcıyı açık bırakarak Visual Studio Code'a geri dönün ve HTML dosyasını düzenleyerek değişikliklerinizi kaydedin.
   
6. Tarayıcıya dönün ve yenile'yi tıklayın. Düzenlemenize bağlı olarak sayfa değişikliğini görmelisiniz.
   
7. HTML dosyasını düzenlemeye devam ederken ilerlemenizi kontrol etmek için 5. ve 6. adımları tekrarlayın.

Manuel yöntem işinizi takip etmenize yardımcı olabilir. Ancak daha da iyi bir çözüm var: otomatik yükleme. Bu seçenek, başka bir uzantı yüklemenizi gerektirecek, ancak zaman ayırmaya değer olmalıdır.

1. Visual Studio Code'da, sol araç çubuğunun altında bulunan Uzantılar'a gidin.
   
2. Uzantılar arama çubuğuna "canlı sunucu" yazın.
   
3. Canlı Sunucu uzantısının yanındaki "Yükle" düğmesini tıklayın.
   
4. Yeni bir HTML dosyası oluşturun ve kaydedin.
   
   
5. Visual Studio Code Explorer'da yeni dosyanıza sağ tıklayın. "Canlı Sunucuyu Aç"ı seçin.
   
6. HTML dosyası tarayıcıda açılacaktır. Bunu yaptıktan sonra, HTML kodunu düzenlemeyi deneyin. İlerlemenizi kaydedin.
   
   
7. Kodda bir değişiklik oluşturup kaydettiğiniz anda, tarayıcınız yeni içeriği gösterecek şekilde yenilenmelidir. Sayfayı manuel olarak yenilemeniz gerekmeyecek ve bunun yerine gerçek zamanlı olarak değişikliklerin görsel onayını alabileceksiniz.
   

Diğer Yararlı Visual Studio Kodu HTML Uzantıları

Belirtildiği gibi, Visual Studio Marketplace, çoğu HTML'ye yönelik mükemmel araçlarla doludur. İşte HTML için en kullanışlı ve en iyi derecelendirilmiş on uzantı.

• lit-plugin : Sözdizimini vurgulayan, yazmayı kontrol eden ve kodu hatasız tamamlamanıza yardımcı olan bir araç. Bu uzantının özelleştirilebilir kuralları vardır.
• SCSS Everywhere : HTML, SCSS, Elixir, SASS, PHP, CSS ve diğer birçok dosya türü için sınıf tanımları için otomatik tamamlama uzantısı.
• Açısal Parçacıklar : HTML ve TypeScript'te kolay kullanım için Açısal parçacıklar ekler. Uzantı, kısmen yazıldıktan sonra bir snippet'i açarak çalışır.
• ES6 String HTML : Sözdizimi vurgulama için es6 string kodu desteğini etkinleştirir. HTML, CSS, XML, GLSL ve diğer formatlarla çalışır.
• HTML Niteliklerini Böl : Bu uzantı, HTML niteliklerinin yanı sıra Angular, Vue ve React donanım ve yönergelerini de böler. Açılan ve kapanan etiketlerde ve çoklu seçimlerde kullanabilirsiniz.
• Djaneiro – Django Parçacıkları : Django HTML şablonları için kapsamlı bir parçacık koleksiyonu. Bu uzantıyı kullanmak, yazmaya harcanan süreyi önemli ölçüde kısaltacaktır.
• Canlı Önizleme : Microsoft'un Canlı Önizleme uzantısı, yerel sunucu barındırmaya izin verir. Angular, React veya diğer sunucu araçlarını kullanmayan bir projeniz varsa, bu uzantı gerçek zamanlı olarak sayfa yenilemelerle düzenli ve katıştırılmış HTML önizlemesini etkinleştirir.
• Oracle JET Core : Oracle Corporation tarafından oluşturulan bu uzantı, Oracle JET özel HTML verileri için tam destek sağlar. Dahil edilen parçacıklar, tüm JET niteliklerini ve etiketlerini otomatik olarak tamamlayacaktır.
• CSS Gezintisi : HTML'den CSS'ye, HTML'den Less'e ve HTML'den Sass'a için Tanıma Git'i etkinleştirir. Peek Definition komutu da etkinleştirilir.
• HTML aksanlı karakter dönüştürücü : Özel karakterleri uygun HTML varlıklarıyla sorunsuz bir şekilde değiştirir. Bu uzantı duruma göre yararlıdır, ancak yerelleştirilebilir dizeleri işlerken gereklidir.

Visual Studio Kodunu Tarayıcınızdan Çalıştırabilirsiniz

HTML dosyalarını bir tarayıcıda çalıştırmanın yanı sıra tüm Visual Studio Code'u çevrimiçi olarak kullanmak da mümkündür. Bu, tarayıcı kullanımı için geliştirilmiş programın belirli bir sürümünü başlatmanızı gerektirir.

Bu sürümün, masaüstü Visual Studio Code'a kıyasla çok daha hafif olduğunu belirtmekte fayda var. Ancak, kolay depo ve dosya gezintisinin yanı sıra küçük kod değişiklikleri için basit bir çözüm olabilir.

Visual Studio Code tarayıcı varyantını denemek isterseniz buraya tıklayarak hemen başlayabilirsiniz .

HTML Dosyalarınızı Çalıştırın ve Çalıştırın

HTML dosyalarını tarayıcınızda açmak, Visual Studio Code'a özel uzantı ile kolaylaştırılmıştır. Bu kodlama aracı için çok çeşitli uzantıları keşfetmeye karar verirseniz, Tarayıcıda Aç işlevi yolculuğunuzun yalnızca başlangıcı olacaktır.

HTML dosyanızı tercih ettiğiniz tarayıcıda açmayı başardınız mı? Hangi uzantıyı kullandınız? Aşağıdaki yorumlar bölümünde bize bildirin.