Cara menggunakan auto format html vscode

Halo sobat? apa kabar? kali ini kita akan mencoba membuat HTML pertama kita di visual studio code. Pastikan sobat sudah mengikuti blog sebelumnya ya tentang live server. Yuk tak perlu berlama-lama, mari kita coba!

  1. buka visual studio sobat, sehingga tampak seperti di bawah ini:

Cara menggunakan auto format html vscode
sumber: dokumentasi pribadi

2. Setelah terbuka klik File lalu pilih Open Folder

Cara menggunakan auto format html vscode
sumber: dokumentasi pribadi

3. Setelah itu akan muncul jendela baru. Lalu buat folder baru bernama HTML dan pilih Select Folder.

Cara menggunakan auto format html vscode
sumber: dokumentasi pribadi

4. Jika berhasil maka nama yang digaris merahi berikut akan sesuai dengan nama folder sobat

Cara menggunakan auto format html vscode
sumber: dokumentasi pribadi

5. Klik icon New File seperti gambar dibawah ini. Lalu beri nama index.html. Seperti gambar dibawah ini.

Cara menggunakan auto format html vscode
sumber: dokumentasi pribadi

6. Setelah itu silahkan ketik pada editor. html:5 dan pilih html:5 dengan tekan tab pada keyboard atau keypad kalian. seperti gambar dibawah ini

Cara menggunakan auto format html vscode
sumber: dokumentasi pribadi

7. Maka akan muncul default html lengkapnya. seperti gambar dibawah ini.

Cara menggunakan auto format html vscode
sumber: dokumentasi pribadi

8. Setelah ini silahkan ikuti kode berikut ini. Jangan lupa tekan ctrl + s untuk save file, sampai lingkaran putih yang ditandai menghilang.

Cara menggunakan auto format html vscode
sumber: dokumentasi pribadi

9. Jika sudah. silahkan jalankan live servernya dengan cara klik live server di pojok kanan bawah. Jika Live Server tidak muncul, silahkan close aplikasi vs-codenya, lalu buka kembali.

Cara menggunakan auto format html vscode
sumber: dokumentasi pribadi

10. Tunggu beberapa saat, dan lihatlah apa yang akan terjadi

Cara menggunakan auto format html vscode
sumber: dokumentasi pribadi

Tadaaa!, Kita berhasil. Masih bersemangat? nantikan blog lainnya sobat udacoding, yang pastinya tentang web development. Sampai jumpaa.

Apakah VSCode text editor?

Visual Studio Code adalah text editor yang dikembangkan oleh Microsoft untuk Windows, Linux dan macOS. Visual Studio Code mampu digunakan untuk debugging, Git control, syntax highlighting, intelligent code completion, snippets, and code refactoring. Visual Studio Code juga mampu dikostumisasi oleh pengguna.

Prettier untuk apa?

Prettier (Code Formatter) Ini adalah alat penting yang memungkinkan kamu untuk mencapai kode yang diformat dengan benar tanpa upaya dari pengembang.

VSCode buat apa?

Visual Studio Code (disingkat VSCode) adalah perangkat lunak penyunting kode-sumber buatan Microsoft untuk Linux, macOS, dan Windows. Visual Studio Code menyediakan fitur seperti penyorotan sintaksis, penyelesaian kode, kutipan kode, merefaktor kode, pengawakutuan, dan Git.

Apa itu Visual Studio Code jurnal?

Visual Studio Code (VS Code) ini adalah sebuah teks editor ringan dan handal yang dibuat oleh Microsoft untuk sistem operasi multiplatform, artinya tersedia juga untuk versi Linux, Mac, dan Windows. Teks editor ini secara langsung mendukung bahasa pemrograman JavaScript, Typescript, dan Node.js, serta bahasa ...