Kod Visual Studio (Kod VS) muncul sebagai alternatif yang hebat kepada penyunting kod yang lebih besar dan lebih kompleks untuk mereka yang memulakan pengekodan. Untuk pembangun web, khususnya, ia menawarkan banyak peluang untuk menulis dan mengubah suai bahagian HTML, serta banyak ciri yang menjadikan pembangunan sebagai perjalanan yang menarik.
Tetapi bagaimana sebenarnya anda menjalankan fail HTML dalam Kod VS jika anda baru dalam dunia pembangunan? Mari jawab soalan ini dan terokai fungsi VS Code yang disediakan untuk pengkod HTML.
Menjalankan Fail HTML dalam Kod VS
Walaupun Kod VS tidak mempunyai fungsi pratonton HTML yang jelas sebaik sahaja anda melancarkannya, ia menggantikannya dengan rangkaian sambungan yang sangat besar. Alat tambah komuniti ini boleh merapatkan kekosongan dan memberi anda ciri paparan masa nyata seolah-olah ia sentiasa terbina dalam. Begini cara untuk menggunakannya:
- Buka paparan Sambungan dalam Kod VS dengan menekan Ctrl+Shift+X. Dari sini, anda boleh mencari sebarang sambungan yang sesuai dengan keinginan anda.
- Untuk mencari sambungan yang betul, taip kata kunci seperti “pandangan langsung” atau “pratonton HTML” dalam paparan ini. Setiap sambungan mempunyai ciri yang berbeza, seperti pratonton langsung yang mudah digunakan atau paparan penyemak imbas bersepadu dalam persekitaran Kod VS.
- Sebaik sahaja anda menjumpai sambungan yang kelihatan sesuai untuk projek anda, klik “Pasang”, dan ia akan menjadi sebahagian daripadanya
persekitaran Kod Visual Studio anda untuk kegunaan masa hadapan.
- Klik butang pratonton skrin pisah untuk melihat fail HTML anda dalam skrin pisah.
Kemudian, tiba masanya untuk menerokai keupayaan baharu pelanjutan yang baru anda pasang. Lihat dokumentasinya atau lihat pilihan yang tersedia melalui menu konteks klik kanan dalam fail HTML anda.
Jalankan HTML dalam Terminal
Jika anda lebih suka tidak bermain-main dengan sambungan lagi, Terminal dalam Kod VS membolehkan anda menjalankan fail HTML tanpa sambungan, walaupun ia agak rumit:
- Buka atau buat fail baharu untuk kod HTML.
- Klik pada Terminal di bahagian atas dan pilih Terminal Baharu untuk membukanya.
- Beralih ke lokasi fail HTML anda dengan arahan cd.
- Taip “mula” diikuti dengan nama fail HTML dan tekan Enter. Ini akan melancarkan fail HTML dalam penyemak imbas lalai anda.
Buka dalam Pelayar
Kembali ke sambungan, satu lagi sambungan berguna untuk HTML dan pembangunan web, secara amnya, ialah “Buka dalam penyemak imbas,” yang membuka fail HTML dalam penyemak imbas web terus daripada Kod VS. Ini caranya:
- Klik butang Sambungan di sebelah.
- Taip “buka dalam penyemak imbas” dalam bar carian untuk mencari sambungan.
- Sebaik sahaja anda melihat sambungan eponim, pasangkannya.
- Selepas memasangnya, klik kanan di mana-mana dalam kod HTML anda.
- Pilih “Buka dalam Penyemak Imbas Lalai” atau pilih pelayar lain daripada pilihan “Buka dalam Penyemak Imbas Lain”.
Ciri Lanjutan untuk Pembangunan HTML dalam Kod VS
Sebaik sahaja anda menyediakan persekitaran pembangunan anda dan mendapatkan semua sambungan yang betul, projek anda baru sahaja bermula. Mari kita terokai secara ringkas ciri VS Code yang boleh anda gunakan semasa melihat fail HTML untuk memudahkan kerja anda.
IntelliSense
IntelliSense ialah rakan pengaturcaraan digital yang mempercepatkan pembangunan dengan mengisi kod anda secara automatik semasa anda menaip. Ia meneka kod yang paling mungkin dan melakukannya dengan bijak dan tidak invasif. IntelliSense menawarkan bantuan serta-merta apabila menulis struktur HTML, meramalkan dengan betul apabila anda perlu menutup teg, dan menyampaikan senarai berasaskan konteks bagi elemen atau atribut yang berpotensi.
Ciri ini menghalang anda daripada membuang masa menatal melalui sintaks atau memasukkan dan menghafal segala-galanya secara manual. Dengan cara ini, anda boleh meningkatkan tapak web dengan lebih pantas berbanding sebelum ini.
Pengesahan
Membuat ralat pengekodan tidak dapat dielakkan tidak kira betapa berpengalaman atau berpengetahuan anda – kesilapan berlaku kepada semua orang. Walau bagaimanapun, mencari ralat ini tepat pada masanya boleh menyelamatkan anda daripada penyahpepijatan yang tidak berkesudahan. Kod VS mempunyai pengesahan terbina dalam yang menarik yang meletakkan HTML, JavaScript dan CSS terbenam anda di bawah pengawasan untuk menangkap pepijat sebelum ia merangkak keluar ke tapak web anda dan menyebabkan gangguan kepada pengguna. Tapak web bebas pepijat ialah tapak web yang menarik pengguna masuk dan membuatkan mereka kekal.
Memformat
Mengekalkan pemformatan yang betul kadangkala boleh membingungkan, terutamanya jika anda berada dalam pasukan “buang barang dan lihat apa yang berkesan”. Mengatur tidak selalunya mudah. Tetapi tanpa struktur yang betul, keadaan boleh menjadi kucar-kacir dan mengelirukan dengan cepat untuk anda dan pembangun lain yang mungkin bekerjasama dengan anda.
Dengan arahan Dokumen Format Kod VS (Ctrl+Shift+I), anda boleh menyimpan kod dengan kemas dan kemas, mengikut piawaian industri. Ia kelihatan seperti kecil, satu klik perubahan, tetapi sebaik sahaja anda melihatnya, anda serta-merta menghargai fungsinya.
Coretan Emmet
Coretan Emmet untuk Kod VS boleh mempercepatkan pembangunan anda secara besar-besaran. Bayangkan anda mempunyai enam belas butang untuk mereka bentuk untuk bar navigasi. Menulis tag setiap butang secara manual akan menjadi tugas yang susah payah. Coretan membolehkan anda menyelesaikan tugasan berulang ini, jadi anda mempunyai lebih banyak masa untuk intipati projek anda.
Dengan singkatan trengkas yang berkuasa ini, menguasai struktur HTML (dan CSS) yang kompleks adalah mudah. Anda boleh menambah mana-mana kod yang anda harapkan untuk kerap digunakan dan hanya menambahnya pada fail anda. Sama ada anda seorang pemula atau seorang pengekod yang berpengalaman, anda tidak akan terlepas penggodaman yang menjimatkan masa menggunakan coretan kod.
Sambungan Berlimpah
VS Code Marketplace penuh dengan spektrum sambungan. Kebanyakannya dibuat oleh ahli komuniti dan pembangun yang bersemangat seperti anda, yang berkongsi pengetahuan mereka untuk memudahkan kerja orang lain. Alat linting memastikan kod anda bersih, pelayan langsung mengemas kini penyemak imbas anda di latar belakang semasa anda membuat persembahan, dan banyak lagi. Ia adalah kuasa besar untuk mencipta aplikasi web yang canggih. Jika anda mempunyai keperluan pengekodan, kemungkinan besar terdapat sambungan pada Marketplace sedia untuk memenuhinya.
Pemilih Warna
Dalam pembangunan web, visual adalah segala-galanya. Dengan pemilih warna Kod VS, anda tidak perlu menghafal kod heksadesimal kompleks. Pilih warna, perhatikan rupa mereka dalam masa nyata — malah teroka dan fahami cara mereka berhubung dengan warna dan rona jiran mereka.
Menyesuaikan Kod VS untuk Pembangunan HTML
Kod VS bukan editor buatan kilang yang mesti kelihatan seperti cara tertentu. Katakan anda mahukan tema malap untuk pesta pengekodan sepanjang malam atau tontonan yang lebih mudah diakses dengan kurang ketegangan mata, jarak tab yang ditentukan untuk meningkatkan komposisi dan organisasi kod, atau format data tersuai yang direka bentuk untuk projek eksklusif. Dalam kes itu, Kod VS mempunyai banyak pilihan pemperibadian.
HTML, khususnya, ialah bahasa penanda mudah yang, jika anda mahu, anda boleh menulis dalam Notepad lama yang baik juga, tetapi kemudian anda akan kehilangan banyak kemudahan yang dibawa oleh editor seperti VS Code. Ketik pada tetapan, teroka dan bentuk semula editor – jadikan ia ekspresi diri pengekodan anda.
Pembangunan Web Masa Nyata
Pada mulanya, menjalankan fail HTML dalam Kod VS mungkin kelihatan agak kabur, terutamanya jika anda diarahkan kepada editor ini khusus untuk kemudahan pembangunan webnya. Tetapi dengan sambungan yang betul (atau Terminal yang berguna) dan pemahaman tentang keupayaan editor, ia mudah.
Kod VS menggabungkan antara muka mudah dan ciri berkuasa untuk pemula dan pembangun web berpengalaman untuk melakukan kerja dengan cepat. Semua ciri kemas ini mungkin akan menjadikannya tempat pilihan anda untuk memanipulasi kod – dan bukan sahaja HTML.
Adakah Visual Studio Code editor pilihan anda untuk menulis dalam HTML? Adakah anda seorang pembangun web yang berpengalaman atau baru bermula? Lepaskan ulasan di bawah dan kongsi cerita, petua dan helah anda.