Ekstensi Visual Studio Code untuk memudahkan ngoding

0
65

Hallo, pada kesempatan kali ini kita akan membahas seputar ekstensi yang dapat membantu dan mempermudah kita membuat coding pada Visual Studio Code. Mungkin sebagian dari teman – teman masih ada yang belum tau mengenai salah satu text editor ini. Jadi, Visual Studio Code ini merupakan salah satu text editor seperti sublime, atom, dan text editor lainnya yang digunakan untuk membuat website/aplikasi yang support dengan berbagai macam bahasa pemrograman.  Untuk menginstal beberapa ekstensi VSCode dapat dicari pada “sidebar” VSCode di bagian “ekstensi”. Jadi, langsung saja kita bahas ekstensi apa saja yang dapat membantu dan mempermudah teman – teman dalam pengkodingan / pengerjaan pembuatan website pada VSCode ini.

  1. Live server

Live Server merupakan ekstensi dari VSCode yang keren, karena memiliki fungsi untuk mereload halaman web yang kita kerjakan dengan sendirinya tanpa menekan “F5” atau tombol “reload” pada browser. Hanya dengan “mensave” coding yang telah kita kerjakan atau yang telah diedit.

Cara mengaktifkan ekstensi live server yaitu, kita harus menginstall terlebih dahulu ekstensi Live Server nya. Kemudian pada file yang akan kita buka, “klik kanan” pada bagian halaman yang kosong lalu pilih “open with live server” seperti pada gambar berikut.

  1. Auto Rename Tag

Ekstensi ini berfungsi untuk mengganti tag pembuka dan penutup secara bersamaan. Misalnya, ketika kita ingin merubah <div> menjadi <span> dengan mengganti tag pembukanya saja maka, tag penutupnya secara otomatis mengikuti tag pembukanya.

  1. IntelliSense for CSS class names

Ekstensi yang satu ini sangat membantu para web desain karena dapat melihat class apa saja yang terdapat di dalam file css yang telah kita hubungkan pada halaman html.

  1. CSS Peek

Ketika kita menginstall css peek maka kita dapat melihat css yang terpasang pada sebuah elemen html (diarahkan ke baris file cssnya, ketika cursor diarahkan pada class yang terdapat dalam element). Ketika kita lupa isi dari class cssnya pada sebuah elemen html maka, ekstensi css peek akan mempermudah kita untuk mengetahuinya.

  1. Indent Rainbow

Ekstensi ini Memberi warna penghubung antara tag pembuka dan penutup seperti pada <div> atau <span> atau yang lainnya. Sehingga kita dapat dengan mudah mengenali tag pembuka dan penutupnya.

  1. Bracket Pair Colorizer

Hampir sama seperti ekstensi indent rainbow, tetapi ini lebih kepada “{}” (kurung kurawal). Jadi, ekstensi ini memberi warna pada pembuka kurung kurawal “{” dan penutupnya “}”. Ekstensi ini akan sangat terlihat jelas fungsinya ketika dalam pengkodingan kita terdapat banyak sekali tanda “{}”. Sehingga ekstensi ini yang nantinya akan memberikan warna dan garis penghubung pada setiap “{}”.

  1. Beautify

Ekstensi ini akan secara otomatis memperbaiki format dari source kode yang berantakan. Ada beberapa cara untuk melakukan formating menggunakan beautify yaitu, pertama dengan “memblok” source code yang akan kita format, lalu “klik kanan” dan pilih “format selection with”, lalu pilih “beautify”. Kedua, ketika disave maka source code akan diformat secara otomatis. Caranya buka “setting”, kemudian cari “formatting”, dan “ceklis” kotak pada “format on save”.

Bagaimana menurut teman – teman mengenai pembahasan kali ini, cukup menarikkan. Masih banyak lagi ekstensi yang dapat membantu pengerjaan coding kita yang disediakan oleh visual studio code. Sehingga, kita dapat memilih sesuai dengan kebutuhan kita. Semoga artikel kali ini bermanfaat, dan membantu teman – teman agar semakin cepat dan mudah untuk bekerja dengan menggunakan text editor visual studio code.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.