Ekstensi dan Fitur VSCode

Ekstensi VSCode

1. Prettier

Prettier merupakan ekstensi yang berfungsi untuk merapikan format penulisan kode.

Cara install:

1. Buka menu ekstensi di VSCode.
2. Cari prettier.
3. Install prettier.

Untuk menggunakan ekstensi ini, lakukan hal berikut:

1. Buka file yang ingin dirapikan pada editor VSCode.
2. Tekan Alt + Shift + f.

Video instalasi prettier di VSCode

2. Live Server

Live server merupakan ekstensi untuk menampilkan file HTML, CSS, dan JS secara langsung pada browser.

Cara install:

1. Buka menu ekstensi di VSCode.
2. Cari live server.
3. Install live server.

Untuk menggunakan ekstensi ini terdapat dua cara, yaitu:

1. klik tombol Go Live di bagian bawah VSCode:
2. Buka file HTML, klik kanan pada editor, lalu klik Open with Live Server.

Fitur VSCode

1. Edit lebih dari satu line secara bersamaan

Cara:

1. Tekan tombol alt.
2. Letakkan kursor pada bagian yang diinginkan dengan klik kiri.
3. Lepas tombol alt.
4. Edit bagian tersebut.
5. Tekan Esc untuk menghapus kursor.

2. Find and Replace

Shortcut untuk melakukan ini adalah Ctrl + F. Untuk menutup menu find and replace, tekan Esc.

3. Auto Format

Shortcut untuk melakukan ini adalah Shift + alt + f.

4. Emmet

Emmet adalah sebuat fitur yang mempersingkat penulisan kode.
Untuk menggunakan emmet pada HTML, lakukan langkah berikut:

1. Ketikkan nama tag yang ingin dibuat.
2. Pilih tag yang sesuai pada list yang ditampilan VSCode dengan tombol panas atas atau bawah.
3. Tekan Enter.

5. Tag Wraping

Fitur ini dapat membungkus suatu elemen dengan tag tertentu. Fitur ini merupakan salah satu bagian dari emmet.

1. Select (blok) elemen yang ingin dibungkus.
2. Buka command palette (shortcut: Ctrl + Shift + P).
3. Tuliskan Emmet: Wrap with Abbreviation, lalu tekan enter.
4. Tuliskan tag atau emmet yang akan membungkus elemen yang ter-blok.
5. Tekan Enter.