10+ Ekstensi Visual Studio Code Terbaik di Tahun 2024 - Visual Studio Code atau VS Code adalah salah satu aplikasi yang paling banyak digunakan oleh programmer untuk bekerja. Software ini dikelola oleh Microsoft dengan dukungan ekstensi dari berbagai komunitas.
VS Code sendiri dapat digunakan secara gratis dan tersedia di berbagai sistem operasi seperti Windows, macOS, dan Linux. Untuk lebih lengkapnya, Anda bisa mengunjungi situs resminya di code.visualstudio.com.
Selain gratis, bahasa pemrograman yang tersedia juga cukup lengkap, contohnya HTML, CSS, JavaScript, C++, Phyton, PHP, dan masih banyak yang lainnya. Oh iya, VS Code juga terhubung langsung dengan version controll yang memudahkan kita untuk bekerja secara tim.
Nah di kesempatan kali ini, saya ingin memberikan sedikit informasi mengenai plugin atau ekstensi yang cocok untuk digunakan. Ekstensi tersebut sangat berguna untuk mempermudah kita saat melakukan coding.
Cara Instal Ekstensi di Visual Studio Code
- Buka aplikasi VISUAL STUDIO CODE
- Pilih menu EXTENSIONS atau CTRL + SHIFT + X
- Ketik nama ekstensi yang ingin diinstal
- Pilih INSTALL
- Selesai.
Setelah terinstal, jangan lupa untuk men
Rekomendasi Ekstensi Terbaik di Visual Studio Code
Ada banyak sekali ekstensi yang ada di VS Code, semua ekstensi tersebut memiliki fungsinya masing-masing. Tapi karena sangat banyak, kita sebagai pengguna terkadang bingung ingin menggunakan yang mana.
Daripada kelamaan, silahkan disimak.
Live Server
Live Server adalah ekstensi yang berguna untuk menampilkan hasil dari suatu proyek coding. Sama halnya dengan XAMPP, hasil dari perubahan kode akan langsung tampil pada browser secara realtime.
Daripada refresh manual, Live Server akan lebih memudahkan bukan?
Auto Close Tag
Dari namanya, Anda pasti sudah sedikit paham fungsi dari ekstensi ini. Auto Close Tag adalah ekstensi yang berguna untuk menutup tag yang telah ditulis secara otomatis. Dengan begitu, proses penulisan kode bisa lebih cepat dan ringkas.
Auto Rename Tag
Dalam penggunaannya, Auto Rename Tag akan sangat berguna jika source code telah memiliki baris yang panjang. Nah ekstensi ini berguna untuk mengubah nama tag jika ada perubahan pada salah satu tag, entah itu pembuka maupun penutup.
Jadi kita tidak perlu lagi mencari pasangan dari tag yang ingin diubah. Walaupun ada fitur pencarian CTRL + F, namun ekstensi ini akan lebih berguna dan lebih menghemat waktu.
Beautify
Setiap programmer pasti pernah merasakan bahwa source code kadang terlihat berantakan. Ada yang kelebihan spasi, kelebihan baris, dan masih banyak yang lainnya. Jika Anda juga demikian, maka Beautify cocok untuk digunakan.
Dengan ekstensi ini, source code akan diformat sedemikian rupa agar lebih rapi dan sesuai format penulisan pada umumnya. Berikut adalah contoh syntax HTML sebelum dan sesudah di-modify:
Sebelum
<html> <head> <title>Ferisp.com | Blog Berita Teknologi</title> </head> <!-- Body Start Tag --> <body> <div class="container"> <h1>Ferisp.com</h1> <p>Lorem ipsum dolor sit amet.</p> </div> <!-- Body End Tag --> </body> </html>
Sesudah
<html>
<head>
<title>Ferisp.com | Blog Berita Teknologi</title>
</head>
<!-- Body Start Tag -->
<body>
<div class="container">
<h1>Ferisp.com</h1>
<p>Lorem ipsum dolor sit amet.</p>
</div>
<!-- Body End Tag -->
</body>
</html>One Dark Pro
Berbicara tentang tema di VS Code, ada banyak sekali tema yang bisa digunakan secara gratis. Dan salah satu yang paling banyak digunakan saat ini adalah One Dark Pro. Tema ini banyak digunakan karena tampilannya yang lebih kalem dan membuat mata lebih rileks.
Setelah terinstal, akan tersedia tiga mode yang dapat dipilih, yaitu One Dark Pro, One Dark Pro Flat, dan One Dark Pro Darker. Perbedaannya hanya pada warna background serta warna syntax. Berikut adalah contoh tampilannya:
Error Lens
Seorang programmer pasti pernah merasakan yang namanya error kode. Bagaimana tidak, penulisan source code harus dilakukan secara teliti agar nantinya bisa menampilkan apa yang kita inginkan.
Tapi kesalahan bisa datang kapanpun. Satu penulisan karakter saja yang salah, maka akan bermasalah pada tampilan atau fungsi yang kita inginkan. Nah untuk mengatasi masalah tersebut, Anda bisa menggunakan ekstensi yang bernama error lens.
Better Comments
Saat membuat template web atau aplikasi, source code yang dihasilkan biasa mencapai ratusan bahkan ribuan baris. Jika dipikir secara logika, kita tidak mungkin menghafal satu per satu tujuan kode tersebut.
Tapi kita bisa menggunakan fitur komentar yang berguna untuk menjelaskan apa fungsi dari kode di dalamnya. Ada banyak tipe komentar berdasarkan bahasa pemrograman, contohnya <!-- --> untuk HTML, /* */ untuk CSS, // untuk JavaScript dan masih banyak yang lainnya.
Nah untuk memudahkan dalam penulisan source code, Anda bisa menggunakan ekstensi yang bernama better comments.
CSS Peek
CSS Peek adalah salah satu ekstensi khusus CSS yang paling populer digunakan saat ini. Ekstensi ini memang sangat berguna untuk mempercepat pengerjaan suatu proyek khususnya yang mengatur masalah tampilan.
Bagaimana tidak, kita hanya cukup mengklik nama class di HTML untuk mengintip kodingan CSS berkaitan. Jadi kita tidak perlu bolak-balik halaman lagi untuk menyesuaikan tampilan / layout.
Code Spell Checker
Code Spell Checker adalah ekstensi yang berguna untuk menginformasikan pengguna apabila ada kesalahan penulisan kode. Seperti yang saya katakan di atas, satu huruf saja yang salah akan bermasalah pada tampilan atau fungsi yang kita inginkan.
Nah untuk meminimalisir kesalahan tersebut, Anda bisa menginstal ekstensi ini. Disamping gratis, Code Spell Checker juga telah diinstal lebih dari 4 juta pengguna dengan rata-rata rating 4,5.
Material Icon Theme
Material Icon Theme merupakan ekstensi yang dibuat oleh Philipp Kief yang dapat digunakan secara gratis untuk mengubah icon-icon yang ada di VS Code. Ekstensi ini telah diinstal lebih dari 11 juta pengguna dengan rata-rata rating 5.
Setelah terinstal, logo tab masing-masing akan berubah sesuai dengan ekstensi file yang digunakan. Berikut adalah contoh tampilannya:
Sebelum
Sesudah
Penutup
Menurut berbagai sumber, Indonesia merupakan salah satu negara yang darurat programmer. Menekuni profesi ini memang tidak semudah kita belajar kimia atau fisika. Seorang programmer wajib memiliki rasa keingintahuan yang tinggi, ketelitian, kreatifitas, dan kesabaran.
Nah jika ingin belajar coding, VS Code adalah aplikasi yang sangat rekomendasi untuk digunakan. Terlebih lagi dengan disediakannya ekstensi-ekstensi yang bisa membantu saat menulis kode. Tentu proses belajar atau pengembangan akan semakin cepat.
Cukup sekian artikel tentang 10+ Ekstensi Visual Studio Code Terbaik di Tahun 2024 ini, Terima kasih.