Bagaimana Untuk Membuka Dalam Pelayar Dari Kod VS

Jika anda menggunakan fail HTML, PHP atau JS, anda mungkin mahu membukanya dalam penyemak imbas anda daripada Kod Visual Studio. Walau bagaimanapun, tiada pilihan bersepadu untuk berbuat demikian. Ini boleh mengecewakan, terutamanya jika anda ingin melihat dengan pantas hasil pengekodan anda.

Nasib baik, anda boleh mendayakan fungsi "Buka dalam Penyemak Imbas" melalui kaedah lain. Artikel ini akan menunjukkan kepada anda cara melakukannya.

Cara Buka dalam Pelayar dalam Kod VS pada PC Windows

Cara paling mudah untuk mendapatkan pilihan Buka dalam Pelayar untuk Kod Visual Studio dalam Windows ialah menggunakan sambungan. Memasang sambungan dalam Kod Visual Studio adalah agak mudah, seperti menggunakannya untuk membuka fail dalam penyemak imbas.

1. Buka fail HTML anda dalam Editor Kod Visual Studio .
   
2. Pada bar alat menegak paling kiri, klik pada "Sambungan." Sebagai alternatif, anda boleh menggunakan pintasan papan kekunci "Ctrl + Shift + X" untuk melancarkan Sambungan.
   
3. Klik pada bar carian untuk membolehkan penulisan.
   
4. Masukkan "buka dalam penyemak imbas." Pilih sambungan yang sepadan dengan istilah carian anda.
   
5. Klik butang "Pasang".
   
6. Muat semula program.
7. Pilih Penjelajah dari bar alat kiri.
   
8. Cari fail HTML anda dalam Explorer dan klik kanan padanya. Pilih "Buka dalam Penyemak Imbas Lalai" atau "Buka dalam Penyemak Imbas Lain."
   
9. Jika anda memilih pilihan "Buka dalam Penyemak Imbas Lalai", fail HTML akan dilancarkan dalam mana-mana pelayar yang ditetapkan sebagai lalai. Jika anda memilih "Buka dalam Penyemak Imbas Lain", anda perlu menentukan penyemak imbas yang akan digunakan.

Anda boleh menemui banyak sambungan berguna di Visual Studio Marketplace . Atau anda boleh mendapatkan sambungan Buka dalam Penyemak Imbas dengan ulasan pengguna yang paling positif di sini: Sambungan 1 , Sambungan 2 , Sambungan 3 , Sambungan 4 .

Cara Membuka dalam Pelayar dalam Kod VS pada Mac

Kod Visual Studio boleh dinaik taraf menggunakan pelbagai sambungan yang meningkatkan kefungsian program. Satu jenis sambungan boleh mendayakan membuka fail HTML, PHP atau JS dalam penyemak imbas lalai atau lain. Berikut ialah cara untuk mendayakan pilihan itu pada Mac.

1. Menggunakan Editor Kod Visual Studio , buka fail yang dikehendaki.
   
2. Pergi ke bar alat di sebelah kiri dan pilih "Sambungan."
   
3. Klik pada bar carian dalam panel Sambungan dan tulis "buka dalam penyemak imbas."
   
4. Pilih sambungan dan klik pada "Pasang."
   
5. Muat semula perisian.
6. Pergi ke bar alat kiri dan pilih Penjelajah.
   
7. Cari fail yang ingin anda buka dalam panel Explorer dan klik kanan padanya. Pilih sama ada "Buka dalam Penyemak Imbas Lalai" atau "Buka dalam Penyemak Imbas Lain."
   
8. Pilihan "Buka dalam Penyemak Imbas Lalai" akan melancarkan fail menggunakan penyemak imbas yang telah dipilih. "Buka dalam Penyemak Imbas Lain" akan memaparkan gesaan yang membolehkan anda memilih salah satu penyemak imbas yang dipasang pada mesin anda.
   

Visual Studio Marketplace mempunyai banyak pilihan sambungan yang boleh menambah fungsi baharu pada Kod Visual Studio. Laman web ini berbaloi untuk diterokai jika anda ingin mengubahsuai program ini dengan lebih lanjut. Dan jika anda berminat dengan sambungan Buka dalam Penyemak Imbas secara eksklusif, berikut ialah beberapa cadangan: Sambungan 1 , Sambungan 2 , Sambungan 3 , Sambungan 4 .

Buka dalam Pintasan Penyemak Imbas

Hampir setiap sambungan Buka dalam Penyemak Imbas untuk Kod Visual Studio disertakan dengan pintasan papan kekunci didayakan. Walau bagaimanapun, jalan pintas tidak seragam. Sebaliknya, setiap sambungan mempunyai gabungan kekunci tertentu yang akan mengaktifkan pembukaan fail dalam penyemak imbas anda.

Berikut ialah pintasan papan kekunci untuk sambungan yang dicadangkan dalam artikel ini.

1. Sambungan 1: “Ctrl + 1” pada Windows, “Command + 1” pada Mac.
   
   
2. Sambungan 2: “Ctrl + Alt + O” pada Windows, “Command + Option (Alt) + O” pada Mac.
   
3. Sambungan 3: "Ctrl + Shift + F9" pada Windows, "Command + Shift + F9" pada Mac.
   
   
4. Sambungan 4: "Ctrl + Shift + P" pada Windows, "Command + Shift + P" pada Mac.
   
   

Ambil perhatian bahawa pintasan ini hanya akan berfungsi pada sambungan masing-masing yang dipautkan dalam artikel ini. Jika anda memilih untuk memasang sambungan lain, pintasan yang berkaitan mungkin akan disenaraikan pada halaman Marketplacenya.

Menjalankan HTML dalam Kod Visual Studio

Jika anda berminat untuk bekerja dengan HTML dalam Kod Visual Studio, berikut ialah beberapa kaedah menjalankan kod HTML dalam program.

Kaedah pertama terdiri daripada memuatkan fail yang anda ingin jalankan secara manual.

1. Buka Kod Visual Studio dan buat fail HTML baharu.
   
2. Pergi ke "Fail", kemudian klik "Simpan."
   
3. Menggunakan HTML:5, aktifkan templat untuk HTML. Kemudian, buka fail yang anda simpan dalam langkah 2.
   
4. Gunakan sambungan Buka dalam Penyemak Imbas yang anda pasang sebelum ini untuk melancarkan fail dalam penyemak imbas anda.
5. Membiarkan penyemak imbas terbuka, kembali ke Visual Studio Code dan edit fail HTML, menyimpan perubahan anda.
   
6. Kembali ke penyemak imbas dan klik muat semula. Anda sepatutnya melihat perubahan halaman berdasarkan pengeditan anda.
   
7. Ulang langkah 5 dan 6 untuk menyemak kemajuan anda semasa anda terus mengedit fail HTML.

Kaedah manual boleh membantu menjejaki kerja anda. Walau bagaimanapun, terdapat penyelesaian yang lebih baik: pemuatan automatik. Pilihan ini memerlukan anda memasang sambungan lain, tetapi harus berbaloi dengan masa.

1. Dalam Kod Visual Studio, pergi ke Sambungan, terletak di bahagian bawah bar alat kiri.
   
2. Dalam bar carian Sambungan, taipkan "pelayan langsung."
   
3. Klik butang "Pasang" di sebelah sambungan Pelayan Langsung.
   
4. Cipta dan simpan fail HTML baharu.
   
   
5. Dalam Visual Studio Code Explorer, klik kanan pada fail baharu anda. Pilih "Buka Pelayan Langsung."
   
6. Fail HTML akan dibuka dalam penyemak imbas. Sebaik sahaja ia berlaku, cuba edit kod HTML. Simpan kemajuan anda.
   
   
7. Sebaik sahaja anda membuat perubahan dalam kod dan menyimpannya, penyemak imbas anda harus memuat semula, menunjukkan kandungan baharu. Anda tidak perlu memuat semula halaman secara manual dan sebaliknya akan dapat mendapatkan pengesahan visual tentang perubahan dalam masa nyata.
   

Sambungan HTML Kod Visual Studio Berguna Lain

Seperti yang dinyatakan, Visual Studio Marketplace penuh dengan alat yang sangat baik, kebanyakannya ditujukan kepada HTML. Berikut ialah sepuluh sambungan yang paling berguna dan gred terbaik untuk HTML.

• lit-plugin : Alat yang menyerlahkan sintaks, menyemak penaipan dan membantu anda melengkapkan kod tanpa ralat. Sambungan ini mempunyai peraturan yang boleh disesuaikan.
• SCSS Everywhere : Sambungan autolengkap untuk definisi kelas untuk HTML, SCSS, Elixir, SASS, PHP, CSS dan banyak jenis fail lain.
• Coretan Sudut : Menambah coretan Sudut untuk kegunaan mudah dalam HTML dan TypeScript. Sambungan berfungsi dengan membuka coretan setelah sebahagiannya ditaip keluar.
• HTML String ES6 : Mendayakan sokongan kod rentetan es6 untuk penyerlahan sintaks. Berfungsi dengan HTML, CSS, XML, GLSL dan format lain.
• Atribut HTML Pisah : Sambungan ini akan memisahkan atribut HTML, serta prop dan arahan Angular, Vue dan React. Anda boleh menggunakannya pada teg pembukaan dan penutup sendiri, serta pada berbilang pilihan.
• Djaneiro – Django Snippet : Koleksi coretan yang luas untuk templat HTML django. Menggunakan sambungan ini akan memendekkan masa menaip dengan ketara.
• Pratonton Langsung : Sambungan Pratonton Langsung daripada Microsoft membenarkan pengehosan pelayan tempatan. Jika anda mempunyai projek yang tidak menggunakan alat Angular, React atau pelayan lain, sambungan ini akan mendayakan pratonton HTML biasa dan terbenam dengan muat semula halaman dalam masa nyata.
• Oracle JET Core : Sambungan yang dicipta oleh Oracle Corporation ini menyediakan sokongan penuh untuk data HTML tersuai Oracle JET. Coretan yang disertakan akan melengkapkan secara automatik sebarang atribut dan teg JET.
• Navigasi CSS : Membolehkan Pergi ke Definisi untuk HTML ke CSS, HTML ke Kurang dan HTML ke Sass. Perintah Peek Definition juga didayakan.
• Penukar aksara beraksen HTML : Menggantikan aksara khas dengan lancar dengan entiti HTML yang sesuai. Sambungan ini membantu dari segi situasi, tetapi penting apabila mengendalikan rentetan yang boleh disetempatkan.

Anda Boleh Menjalankan Kod Visual Studio Dari Penyemak Imbas Anda

Selain menjalankan fail HTML dalam penyemak imbas, anda juga boleh menggunakan keseluruhan Kod Visual Studio dalam talian. Ini memerlukan anda melancarkan versi tertentu program yang dibangunkan untuk kegunaan penyemak imbas.

Perlu diingat bahawa versi ini jauh lebih ringan berbanding dengan Kod Visual Studio desktop. Walau bagaimanapun, ia boleh menjadi penyelesaian yang mudah untuk repositori mudah dan navigasi fail, serta perubahan kod kecil.

Jika anda ingin mencuba varian penyemak imbas Kod Visual Studio, anda boleh bermula dengan segera dengan mengklik di sini .

Sediakan Fail HTML Anda dan Jalankan

Membuka fail HTML dalam penyemak imbas anda dipermudahkan dengan sambungan khusus untuk Kod Visual Studio. Jika anda memutuskan untuk meneroka tawaran sambungan yang luas untuk alat pengekodan ini, fungsi Buka dalam Penyemak Imbas hanyalah permulaan perjalanan anda.

Adakah anda berjaya membuka fail HTML anda dalam penyemak imbas pilihan anda? Sambungan yang manakah anda gunakan? Beritahu kami di bahagian komen di bawah.