Cara Menjalankan File HTML dalam VS Code
Visual Studio Code (VS Code) hadir sebagai alternatif yang bagus untuk editor kode yang lebih besar dan kompleks bagi mereka yang baru memulai coding. Khususnya bagi pengembang web, ia menawarkan banyak peluang untuk menulis dan mengubah bagian HTML, ditambah banyak fitur yang membuat pengembangan menjadi perjalanan yang menyenangkan.
Tetapi bagaimana tepatnya Anda menjalankan file HTML di VS Code jika Anda Apakah Anda baru mengenal dunia pembangunan? Mari kita jawab pertanyaan ini dan jelajahi fungsi yang dimiliki VS Code untuk pembuat kode HTML.
Menjalankan File HTML di VS Code
Meskipun VS Code tidak memiliki pratinjau HTML yang jelas fungsionalitas segera setelah Anda meluncurkannya, ia mengimbanginya dengan sejumlah besar ekstensi. Add-on komunitas ini dapat menjembatani kekosongan dan memberi Anda fitur tampilan real-time seolah-olah sudah ada di dalamnya. Berikut cara menggunakannya:
Buka Tampilan ekstensi di VS Code dengan menekan Ctrl+Shift+X. Dari sini, Anda dapat mencari ekstensi apa pun yang sesuai dengan keinginan Anda.
Untuk menemukan ekstensi yang benar, ketikkan kata kunci seperti “tinjauan langsung”atau “pratinjau HTML”dalam tampilan ini. Setiap ekstensi memiliki fitur berbeda, seperti pratinjau langsung yang mudah digunakan atau tampilan browser terintegrasi dalam lingkungan VS Code.
Setelah Anda menemukan ekstensi yang tampaknya tepat untuk proyek Anda, klik “Pasang,”dan itu akan menjadi bagian dari
lingkungan Visual Studio Code Anda untuk digunakan di masa mendatang.
Klik tombol pratinjau layar terpisah untuk melihat file HTML Anda di layar terpisah.
Kemudian, saatnya menjelajahi kemampuan baru dari ekstensi yang baru saja Anda pasang. Periksa dokumentasinya atau lihat opsi apa yang tersedia melalui menu konteks klik kanan dalam file HTML Anda.
Jalankan HTML di Terminal
Jika Anda Lebih baik tidak mengutak-atik ekstensi dulu, Terminal di VS Code memungkinkan Anda menjalankan file HTML tanpa ekstensi, meskipun ini sedikit lebih rumit:
Buka atau buat file baru untuk kode HTML.
Klik Terminal di bagian atas dan pilih Terminal Baru untuk membukanya.
Beralih ke lokasi file HTML Anda dengan 
Ketik “start “diikuti dengan nama file HTML dan tekan Enter. Ini akan meluncurkan file HTML di browser default Anda.
Buka di Browser
Kembali ke ekstensi, ekstensi berguna lainnya untuk HTML dan web development secara umum adalah “Buka di browser”, yang membuka file HTML di browser web langsung dari VS Code. Begini caranya:
Klik tombol Ekstensi di samping.
Ketik “buka di browser”di bilah pencarian untuk menemukan ekstensi.
Setelah Anda melihat ekstensi eponymous, instal.
Setelah menginstalnya, klik kanan di mana saja di kode HTML Anda.
Pilih “Buka di Browser Default”atau pilih browser lain dari”Buka di Browser Lain”pilihan.
Fitur Lanjutan untuk Pengembangan HTML dalam Kode VS
Setelah Anda menyiapkan lingkungan pengembangan dan mendapatkan semua ekstensi yang tepat, proyek Anda telah selesai baru saja dimulai. Mari kita jelajahi secara singkat fitur VS Code yang dapat Anda gunakan saat melihat file HTML untuk mempermudah pekerjaan Anda.
IntelliSense
IntelliSense adalah rekan pemrograman digital yang mempercepat pengembangan dengan mengisi data Anda secara otomatis kode saat Anda mengetik. Ia menebak kode yang paling mungkin dan melakukannya dengan cerdas dan non-invasif. IntelliSense menawarkan bantuan instan saat menulis struktur HTML, memprediksi dengan tepat kapan Anda perlu menutup tag, dan memberikan daftar elemen atau atribut potensial berdasarkan konteks.
Fitur ini membuat Anda tidak perlu membuang waktu untuk menelusuri sintaksis atau secara manual memasukkan dan menghafal semuanya. Dengan cara ini, Anda dapat membangun situs web lebih cepat dari sebelumnya.
Validasi
Membuat kesalahan pengkodean tidak dapat dihindari, tidak peduli seberapa berpengalaman atau berpengetahuan Anda – kesalahan terjadi pada semua orang. Namun, menemukan kesalahan ini tepat waktu dapat menyelamatkan Anda dari proses debug tanpa akhir. VS Code memiliki validasi bawaan yang bagus yang menempatkan HTML, JavaScript, dan CSS Anda yang tersemat di bawah pengawasan untuk menangkap bug sebelum mereka merayapi situs web Anda dan menyebabkan gangguan bagi pengguna. Situs web yang bebas bug adalah situs yang menarik pengguna dan membuat mereka tetap tinggal.
Pemformatan
Mempertahankan pemformatan yang benar kadang-kadang bisa menjadi hal yang menakutkan, terutama jika Anda berada di “ lemparkan semuanya dan lihat apa yang berhasil”. Pengorganisasian tidak selalu mudah. Namun tanpa struktur yang tepat, segala sesuatunya dapat dengan cepat menjadi berantakan dan membingungkan bagi Anda dan pengembang lain yang mungkin berkolaborasi dengan Anda.
Dengan VS Code Perintah Format Dokumen (Ctrl+Shift+I), Anda dapat menjaga kode tetap rapi dan rapi, mengikuti standar industri. Ini adalah perubahan kecil yang hanya dilakukan sekali klik, namun begitu Anda melihatnya, Anda langsung menghargai fungsinya.
Cuplikan Emmet
Cuplikan Emmet untuk VS Code dapat mempercepat pengembangan Anda secara besar-besaran. Bayangkan Anda memiliki enam belas tombol untuk dirancang untuk bilah navigasi. Menuliskan setiap tag tombol secara manual akan menjadi tugas yang melelahkan. Cuplikan memungkinkan Anda Selesaikan tugas yang berulang-ulang ini dengan mudah, sehingga Anda memiliki lebih banyak waktu untuk mengerjakan inti proyek Anda.
Dengan singkatan singkatan yang canggih ini, menguasai struktur HTML (dan CSS) yang rumit menjadi mudah. Anda dapat menambahkan kode apa pun yang ingin sering Anda gunakan dan cukup menambahkannya ke file Anda. Baik Anda seorang pemula atau pembuat kode berpengalaman, Anda pasti tidak ingin melewatkan peretasan yang menghemat waktu dengan menggunakan cuplikan kode.
Ekstensi Berlimpah
VS Code Marketplace penuh dengan banyak hal dengan spektrum ekstensi. Kebanyakan dari mereka dibuat oleh anggota komunitas dan pengembang yang bersemangat seperti Anda, yang berbagi pengetahuan mereka untuk mempermudah pekerjaan orang lain. Alat linting menjaga kode Anda tetap bersih, server langsung memperbarui browser Anda di latar belakang saat Anda merender, dan banyak lagi. Ini adalah pembangkit tenaga listrik untuk membuat aplikasi web yang canggih. Jika Anda memiliki kebutuhan coding, kemungkinan besar ada ekstensi di Marketplace yang siap memenuhinya.
Color Picker
Dalam pengembangan web, visual adalah segalanya. Dengan pemilih warna VS Code, Anda tidak perlu menghafal kode heksadesimal yang rumit. Pilih warna, amati tampilannya secara real-time — bahkan jelajahi dan pahami bagaimana warna tersebut terhubung dengan warna dan corak di sekitarnya.
Menyesuaikan Kode VS untuk Pengembangan HTML
Kode VS tidak editor buatan pabrik yang harus berpenampilan tertentu. Misalkan Anda menginginkan tema redup untuk pesta coding sepanjang malam atau tampilan yang lebih mudah diakses dengan lebih sedikit ketegangan mata, spasi tab tertentu untuk meningkatkan komposisi dan pengorganisasian kode, atau format data khusus yang dirancang untuk proyek eksklusif. Dalam hal ini, VS Code memiliki banyak pilihan personalisasi.
HTML, khususnya, adalah bahasa markup sederhana yang, jika Anda mau, Anda juga bisa menulis di Notepad lama yang bagus, tapi kemudian Anda akan melakukannya melewatkan banyak kemudahan yang diberikan oleh editor seperti VS Code. Manfaatkan pengaturan, jelajahi, dan bentuk ulang editor – jadikan editor sebagai ekspresi coding Anda.
Pengembangan Web Real-Time
Pertama, jalankan file HTML di VS Code mungkin tampak sedikit tidak jelas, terutama jika Anda diarahkan ke editor ini khusus untuk kemudahan pengembangan webnya. Namun dengan ekstensi yang tepat (atau Terminal yang praktis) dan pemahaman tentang kemampuan editor, semuanya menjadi mudah.
VS Code menggabungkan antarmuka sederhana dan fitur canggih untuk pemula dan pengembang web berpengalaman untuk melakukan pekerjaan dengan cepat. Semua fitur menarik ini kemungkinan besar akan menjadikannya tempat pilihan Anda untuk memanipulasi kode – dan bukan hanya HTML.
Apakah Visual Studio Code adalah editor pilihan Anda untuk menulis dalam HTML? Apakah Anda seorang pengembang web berpengalaman atau baru memulai? Berikan komentar di bawah, dan bagikan cerita, tips, dan trik Anda.
Penafian: Beberapa halaman di situs ini mungkin menyertakan link afiliasi. Hal ini tidak mempengaruhi editorial kami dengan cara apa pun.
