20 VS Code Extensions pilihan untuk Web/Frontend Developer/Programmer 2023
Berikut ini adalah 20 Visual Studio Code extensions/VSCode extensions pilihan untuk para Web/Frontend developer di tahun 2023
V
isual Studio Code (baca: VSCode) tidak diragukan lagi adalah salah satu text editor paling populer dan paling banyak digunakan saat ini. Yang salah satu keunggulanya adalah tersedia begitu banyaknya ekstensi, mulai dari yang hanya sekedar untuk mempercantik tampilan, sampai dengan untuk mempermudah melakukan task yang menambah produktifitas. Berikut ini adalah 20 ekstensi VSCode pilihan untuk para Frontend developer di tahun 2023.- Live server
- Volar
- Svelte for VS Code
- ES7+ React/Redux/React-Native snippets
- Auto Rename Tag
- JavaScript (ES6) code snippets
- JS & CSS Minifier (Minify)
- Quokka.js
- Console Ninja
- Vue 3 Snippets
- Better Comments
- Prettier - Code formatter
- File Utils
- Path Autocomplete
- Remote - SSH
- Thunder Client
- Polacode
- Colorize
- Encode Decode
- Live Preview
1. Live server
Live server adalah sebuat ekstensi VSCode yang memungkinkan developer untuk menjalankan http server secara langsung dari VSCode. Live server ini biasanya sangat berguna jika project yang dikerjakan berupa kode html, css dan js yang tidak membutuhkan proses compile.
Selain menjalankan http server, ekstensi live server juga melakukan auto reload jika ada file yang terdeteksi berubah. Sehingga web/programmer tidak perlu sering-sering me-refresh Browser.
Baca juga :
Membuat promise based Modal/Dialog dengan menggunakan Vue 3 dan Quasar
2. Volar
Vue Language Feature (Volar) adalah sebuah ekstensi resmi dari tim Vue.js untuk mendukung framework Vue.js, Vitepress dan petite-vue. Dengan ekstensi ini, para programmer yang menggunakan Vue.js akan banyak dipermudah dalam melakukan validasi komponen, code completion dan lain-lain.
3. Svelte for VC Code
Untuk Anda para programmer yang menggunakan Svelte, maka ekstensi ini adalah suatu keharusan. Ekstensi ini akan banyak mempermudah Anda selama pengembang web yang Anda buat dengan Svelte.
4. ES7+ React/Redux/React-Native snippets
Adalah sebuah ekstensi untuk para pengguna React.js, yang terdiri atas snippets untuk kode javascript dengan ES7, React.js, stage manegemen via Redux, React-Native. Seperti halnya ekstensi untuk Vue.js dan Svelte, ekstensi ini akan mempermudah dan mempercepat membuatan web atau app dengan React.js.
5. Auto Rename Tag
Auto Rename Tag adalah sebuah ekstensi VSCode untuk mempermudah dalam me-rename tag html atau xml. Dengan auto rename tag, pengguna cukup me-rename salah satu dari opening atau closing tag saja, maka secara otomatis akan me-rename tag pasangannya.
6. JavaScript (ES6) code snippets
Ekstensi JavaScript (ES6) code snippets ini berisi kode snippets untuk Javascript dalam sintak ES6. Kode snippet adalah sebuah kode pendek/singkat untuk menuliskan kode yang lebih lengkap. Kode snippet ini sangat berguna karena akan menghemat banyak waktu tenaga. Pengguna tidak perlu lagi menuliskan baris-baris kode yang berulang secara terus menerus, cukup menuliskan beberapa kombinasi huruf, maka baris-baris kode akan otomatis ter-generate.
7. JS & CSS Minifier (Minify)
JS & CSS Minifier adalah sebuah ekstensi untuk melakukan minify terhadap kode javascript atau css. Baik inline maupun keseluruhan dokumen.
Ekstensi ini sangat berguna untuk project yang sederhana, misalkan sebuah portal dimana pengembang tidak menggunakan javascript atau css framework beserta tool nya. Pengembang akan menyusun kode javascript dan css-nya sendiri, yang akan di-minify pada waktu deploy production.
Baca juga :
Cara install npm di Laravel
8. Quokka.js
Quokka.js adalah sebuah ekstensi untuk mempercepat proses prototyping dengan JavaScript/Typescript. Dengan menggunakan Quokka.js ini, pengguna dapat mencoba langsung dan melihat hasil dari fungsi yang dibuat, alih-alih mencoba pada console browser atau javascript playground.
9. Console Ninja
Dengan Console Ninja, para programmer Web tidak perlu lagi harus membuka console browser hanya untuk menampilkan object atau variable. Cukup dengan menuliskannya langsung ke dalam kode seperti bisa, maka hasilnya akan muncul secara inline atau juga bisa dimunculkan pada jendela tersendiri.
Yang menarik dari Console Ninja ini adalah, dapat mendeteksi tool yang digunakan, baik itu, npm atau yarn atau yang lainnya.
10. Vue 3 Snippets
Sesuai dengan namanya, Vue 3 Snippets ini berisi kode-kode snippet untuk Vue.js, baik Vue.js 3 maupun 2. Dengan menggunakan snippet-snippet ini, kode Anda yang menggunakan Vue akan dapat dibuat dengan sangat cepat. Misalkan untuk membuat komponen, maka Anda cukup dengan menuliskan kode vurinit, maka akan langsung ter-generate struktur komponen yang terdiri atas template, script dan style.
11. Better Comments
Dalam bahasa pemrograman atau script, sintak komentar kurang lebih sama dan standar. Karena memang hanya sekedar komentar terhadap sesuatu. Namun, adakalanya kita ingin menuliskan komentar yang sangat penting dan berharap para programmer yang melihat kode tersebut menjadi perhatian.
Maka, itulah fungsi dari ekstensi Better Comments. Dengan ekstensi ini, para pengguna bisa menuliskan komentar dengan susunan sedemikian sehingga akan tampak dengan warna tertentu. Misalkan oranye, hijau atau jika penting berwarna merah.
12. Prettier - Code formatter
Dengan ekstensi Prettier ini, kode program dapat di re-format menjadi lebih tertata rapi, sehingga lebih mudah dilihat dan dipahami.
Baca juga :
Cara install MariaDB di MacOS dengan menggunakan Homebrew
13. File Utils
Ekstensi File Utils memungkinkan Anda untuk melakukan beberapa operasi file yang secara default tidak disediakan VSCode. Misalkan duplicate, membuat file baru relative terhadap folder saat ini, atau juga membuat file relative terhadap root, dan lain-lain.
14. Path Autocomplete
Salah satu hal yang menyebalkan pada saat Anda menuliskan kode program adalah, pada saat harus menuliskan path suatu file. Misalkan pada saat import file lain, maka secara default Anda harus menuliskan sendiri path file tersebut. Hal ini memungkinkan terjadi kesalahan penulisan.
Oleh karena itu, dengan ekstensi Path Autocomplete, Anda akan mendapatkan pilihan auto complete dari file yang ingin Anda import. Tentu saja ini akan mempercepat sekaligus membuat akurat penulisan kode program Anda.
15. Remote - SSH
Sebuah ekstensi yang memungkinkan Anda untuk meng-akses server atau komputer lain dengan ssh, langsung dari VSCode. Dengan Remote SSH ini Anda juga dapat langsung mengakses folder dan file di server atau komputer lain, serta meng-edit-nya sekalian. Yang keren adalah, daftar file dan folder dari remote server/komputer tersebut akan muncul pada sidebar VSCode. Sehingga Anda akan merasa mengakses folder/file yang ada di lokal.
Ekstensi Remote SSH ini sangat cocok untuk Anda yang sering melakukan perbaikan kode langsung di server pada saat WFH atau dinas luar.
16. Thunder Client
Thunder Client adalah sebuah ekstensi yang secara fungsi sama dengan Posman, sebuah aplikasi yang digunakan untuk mengetes api. Dengan Thunder Client ini, Anda akan sangat terbantu pada saat melakukan tes api, karena tidak perlu aplikasi lain, dan yang lebih penting lagi, tidak perlu pindah dari VSCode.
Secara fitur sudah sangat lengkap. Mulai dari membuat daftar api ke dalam kelompok tertentu, sampai dengan membuat environment variable untuk banyak staging.
17. Polacode
Dengan menggunakan Polacode, Anda dapat membuat screenshot dari kode program Anda menjadi gambar. Hal ini biasanya sangat diperlukan pada saat Anda ingin membagikan potongan kode di sosial media, alih-alih membagikan text kode program yang biasanya terlihat kurang bagus.
18. Colorize
Jika selama ini Anda hanya menebak-nebak seperti apa sebenarnya warna dari kode yang Anda tuliskan di stylesheet, maka dengan menggunakan ekstensi Colorize ini, maka Anda akan bisa langsung melihat tampilan warna dari kode yang dituliskan pada css, sass, less, postcss, stylus atau bahkan XML.
19. Encode Decode
Adalah sebuah ekstensi untuk mempermudah dalam melakukan konversi string ke dalam format lain dan sebaliknya.
- String to Base64
- Base 64 to String
- String to JSON Byte Array
- String to JSON String
- JSON String to String
- Base64 to JSON Byte Array
- String to MD5/SHA1/SHA256/SHA512 (as Base64 or Hex)
- String to HTML Entities
- HTML Entities to String
- String to XML Entities
- XML Entities to String
- String to Unicode
- Unicode to String
20. Live Preview
Adalah sebuah ekstensi yang dibuat oleh Microsoft, yang secara fungsi kurang lebih sama dengan Live Server. Hanya saja ekstensi Live Preview ini menjalankan local server sekaligus mem-preview hasilnya langsung di VSCode. Jadi lebih praktis dibandingkan Live Server.
Demikian daftar 20 VS Code Extensions pilihan untuk para Web/Frontend Developer/Programmer. Tentu masih ada banyak ekstensi VSCode yang berguna yang belum tertera pada daftar di atas. Oleh karena itu silahkan tuliskan ekstensi VSCode favorit Anda ke dalam komentar.
Selamat mencoba, dan semoga yang sedikit ini bermanfaat.