Banyak sekali fitur-fitur yang disediakan oleh Visual Studio Code, diantaranya Intellisense, Git Integration, Debugging, dan fitur ekstensi yang menambah kemampuan teks editor. Salah satu fitur yang menarik adalah adanya ekstensi yang dapat dipasang untuk menambahkan kemampuan dari Visual Studio Code ini. Ekstensi tersebut bisa berupa tema, pendukung Intellisense, cuplikan kode cuplikan, dan penambah alur produktivitas programming. Visual Studio Code dapat diunduh pada tautan di bawah ini
Kode Visual Studio—Pengeditan Kode. didefinisikan ulang
Visual Studio Code adalah editor kode yang didefinisikan ulang dan dioptimalkan untuk membangun dan men-debug web modern dan cloud…
kode. Studio visual. com
VSCodium - Binari Sumber Terbuka dari VSCode
Jika Anda menggunakan Mac dan menginstal Homebrew. Catatan untuk pengguna Mac OS X Mojave. jika Anda melihat "Aplikasi tidak dapat dibuka...
vscodium. com
Dokumentasi untuk Kode Visual Studio
Cari tahu cara mengatur dan mendapatkan hasil maksimal dari Visual Studio Code. Dioptimalkan untuk membangun dan men-debug web modern dan…
kode. Studio visual. com
Ekstensi VS Code untuk Pengembangan JavaScript
Menggunakan JavaScript dalam web development adalah suatu hal yang wajib ditemui ketika membuat web untuk bagian depan front end dan juga web service backend-nya dengan Node JS. Visual Studio Code Marketplace menyediakan banyak sekali ekstensi pendukung untuk pengembangan web ini. Beberapa ekstensi yang saya temui dan telah dipakai untuk pengembangan aplikasi web berbasis JavaScript sekitar lebih dari 50 buah. Daftar ekstensi tersebut akan saya jelaskan secara singkat satu per satu berikut link keterangan untuk mengunduh ekstensinya melalui VS Code Marketplace
- Cuplikan Angular oleh Dan Wahlin. Ekstensi snippet dan saran untuk penggunaan Angular framework
- Cuplikan Sudut oleh Mikael Morlund. Ekstensi snippet dan saran untuk penggunaan Angular framework
- Cuplikan Angular oleh John Papa. Ekstensi snippet dan saran penggunaan framework Angular
- Skema Sudut. Ekstensi menjalankan perintah Angular CLI dari File Explorer dan Command Palette VS Code
- Konsol Sudut. Ekstensi untuk menjalankan Angular CLI dari VS Code dengan user interface atau GUI
- Tag Tutup Otomatis. Ekstensi untuk menambahkan tag penutup secara otomatis pada HTML dan XML. Ekstensi ini sementara tidak saya pakai karena bugs yang menyebabkan penggunaan CPU yang tinggi
- Tag Ganti Nama Otomatis. Ekstensi untuk mengganti tag pembuka dan tag penutup sekaligus pada HTML dan XML. Ekstensi ini sementara tidak saya pakai karena ada bugs yang menyebabkan penggunaan CPU yang tinggi
- autoprefixer. Ekstensi untuk menambahkan prefix type browser secara otomatis dalam kelas CSS. Misalnya prefix -webkit-box untuk CSS Flexbox
- babel javascript. Ekstensi untuk menampilkan sorotan pada sintaks JavaScript ES2015 ke atas
- Mempercantik. Untuk merapikan susunan kode JavaScript, HTML, CSS, dan JSON yang sesuai standar
- Komentar Lebih Baik. Ekstensi untuk memberikan tanda komentar yang lebih hidup dan mudah diperhatikan jika dibandingkan dengan komentar biasa di dalam kode
- Bookmark. Menambahkan penanda bookmark pada baris kode dan navigasi pada penanda tersebut
- Pewarna Pasangan Braket 2. Versi terbaru dari ekstensi pewarnaan bracket sebelumnya. Versi terbaru membawa kompatibilitas dan performa lebih baik pada Visual Studio Code versi terbaru
- karbon-sekarang-sh. Ekstensi untuk membuat kode screenshot dengan layanan Carbon
- CDNJS. Mencari library dari CDNJS dan menambahkan langsung ke dalam HTML
- ubah kasus. Mengganti nama variabel menjadi berbentuk camelCase, CONSTANT_CASE, snake_case, dst sesuai pencarian kursor
- Tutup Tag HTML/XML. Memberikan tag penutup otomatis pada HTML dan XML
- CodeSnap. Ekstensi untuk membuat kode screenshot langsung dari text editor
- CodeStream. Ekstensi untuk melakukan diskusi antar pengembang dalam satu tim, dengan fitur menambahkan komentar di dalam kode baris-baris. Dapat diintegrasikan dengan Slack, Teams, GitHub, GitLab, Bitbucket, Jira, Trello, dst
- Sorotan Warna. Menampilkan kotak warna dari kode hex warna yang ada di dalam kode CSS, JavaScript, ataupun HTML
- info warna. Ekstensi untuk menambahkan keterangan lebih lanjut dari warna di CSS
- Pemformat CSS. Ekstensi untuk memformat susunan CSS agar lebih rapi
- Intip CSS. Melihat detail dari suatu kelas atau id dari CSS yang terdapat di dalam HTML
- CSV ke Tabel. Konversi data CSV menjadi bentuk tabel data dalam bentuk susunan karakter ASCII
- Debugger untuk Chrome. Ekstensi penghubung antara VS Code dengan browser Google Chrome, yang digunakan untuk debugging aplikasi web
- Debugger untuk Firefox. Ekstensi penghubung antara VS Code dengan browser Mozilla Firefox, yang digunakan untuk debugging aplikasi web
- Analisis Ketergantungan. Melihat info dari dependensi NPM yang dipakai
- Buruh pelabuhan. Menambahkan highlight sintaks dan linting untuk Dockerfile
- dotENV. Menambahkan highlight sintaks dan linting untuk file. lingkungan
- EditorConfig untuk Kode VS. Ekstensi untuk menyetel gaya penulisan di dalam panel teks editor, penggunaan spasi atau tab untuk mengatur jarak antar kode, besar jarak antar tab, jarak antar spasi, menambahkan satu baris di akhir baris kode, dst
- Lensa Kesalahan. Ekstensi untuk menampilkan keterangan lebih detail dari error yang ditemui saat penulisan kode
- Potongan ES7 React/Redux/GraphQL/React-Native. Ekstensi untuk menambahkan snippet dan syntax highlighting untuk React JS , Redux, dan GraphQL dengan ES2016
- ESLint. Ekstensi untuk mengatur gaya penulisan sesuai standar JavaScript ES2015+. Selain itu bisa memperbaiki kesalahan penulisan jika menemukan penulisan JavaScript yang belum sesuai standar
- Cuplikan Mocha ES6. Ekstensi untuk membuat kerangka unit testing dengan Mocha
- HTML String ES6. Ekstensi untuk menambahkan syntax highlighting pada kode html yang berbentuk String template literal
- File Util. Ekstensi untuk menambahkan operasi, membuat data, duplikasi data, memindahkan data, mengubah nama data, dan menghapus folder data dan direktori
- Gi. membuat file. gitignore dengan mudah
- gistpad. Untuk managemen Gist dan Code Snippet yang ada di akun Github Gist milik sendiri
- gitignore. Dukungan sintaks highlight dan mengambil kerangka gitignore dari repositori Gitignore di Github
- GitHistory. Ekstensi untuk melihat grafik riwayat komit dari repositori Git di dalam folder proyek yang sedang dibuka. Selain itu bisa dilakukan operasi-operasi Git seperti branch, cherry pick, merge, dst
- GitLens. Ekstensi untuk meningkatkan kemampuan integrasi Git VCS di dalam Visual Studio Code
- Grafik Git. Ekstensi menambahkan tampilan GUI dari alur Git dan status Git di VS Code langsung
- Permintaan Tarik Github. Membuat pull request dengan mudah di layanan Github
- Sorot Tag Pencocokan. Menambahkan pada tag pembuka dan tag penutup pada element HTML
- Dukungan CSS HTML. Menambahkan kemampuan Intellisense (saran dan penyelesaian) untuk kelas penulisan dan id dari CSS di dalam HTML
- Cuplikan HTML. Ekstensi untuk menambahkan dukungan terhadap penulisan HTML5. Namun fungsi HTML Snippets ini sudah diadopsi langsung oleh fungsi utama Visual Studio Code. \
- Indentasi Pelangi. Ekstensi untuk menambahkan warna pada jarak tab dan spasi (indent). Cukup membantu untuk menampilkan indent pembuka dan indent penutup. Terutama pada file HTML, JS, CSS, pada file Python, dst
- IntelliSense untuk nama kelas CSS dalam HTML. Menambahkan kemampuan Intellisense terhadap penggunaan CSS Class di dalam HTML. Ekstensi ini akan melakukan pendeteksian untuk mencari file CSS yang terdapat di dalam folder proyek
- Biaya Impor. Melihat ukuran file yang diimpor dari dependensi dan file JS yang lain
- HTML sebaris. Menambahkan syntax highlighting , snippet , dan intellisense pada sintaks HTML atau CSS yang berada di dalam template ES2015 Strings
- penguat javascript. Menambah produktivitas dalam pemrograman JavaScript dengan menambahkan snippet dan saran penulisan pada kode yang ditulis
- Cuplikan kode JavaScript (ES6). Ekstensi untuk snippet kerangka penulisan JavaScript berbasiskan standard ES2015
- Paket Cuplikan JavaScript. Kumpulan cuplikan untuk JavaScript ES2015
- bersenda gurau. Menggunakan unit testing Jest dengan mudah
- gelisah. Navigasi antar kata dengan pintasan cepat
- Refaktor JS. Menambahkan fungsi refactor untuk kode JavaScript
- Kubernetes. Dukungan untuk melakukan debug aplikasi berbasis Kubernetes Container
- Menyala HTML. Syntax highlighting dan Intellisense untuk sintaks HTML yang berada di dalam kode template String JavaScript
- Kompiler SASS Langsung. Ekstensi untuk melakukan preview dan kompilasi file SASS atau SCSS ke CSS secara realtime, dan menampilkannya ke dalam browser secara langsung
- server langsung. Ekstensi untuk menjalankan server lokal untuk proses debugging tampilan dan desain HTML. Live server ini akan mendeteksi perubahan di dalam file HTML, CSS, dan JS dan secara otomatis melakukan live reload halaman
- Berbagi Langsung. Ekstensi untuk kolaborasi dengan pengembang lain secara online
- Bagikan Audio Langsung. Ekstensi tambahan untuk Live Share dengan fungsi komunikasi melalui suara dengan pengguna Live Share yang lain
- Pratinjau Markdown Disempurnakan. Ekstensi untuk menampilkan preview dari file Markdown
- Lint penurunan harga. Ekstensi untuk menambahkan snippet dan koreksi saat penulisan Markdown
- Penurunan Harga All-In-One. Ekstensi untuk membantu penulisan markdown dengan fitur snippet, pintasan keyboard, preview, dan pembuatan daftar isi
- MetaGo. Ekstensi untuk membantu navigasi di dalam kode dengan teknik penguncian antar karakter huruf kode yang sama
- Banyak Clipboard. Menambahkan dukungan untuk menampung banyak clipboard copy paste di VS Code
- MongoDB untuk Kode VS. Ekstensi untuk manajemen database MongoDb , seperti melihat skema, koleksi, taman bermain untuk eksperimen data dan skema, dan masih banyak lagi
- Jangan berikan. js Modul Intellisense. Ekstensi untuk menambahkan Intellisense terhadap daftar dependensi di dalam Node Modules dan folder proyek. Sehingga ketika melakukan import statement di dalam kode JavaScript, terdapat saran atau saran dari nama module dependency nya
- node readme. Ekstensi untuk melihat dokumentasi dari libray JavaScript yang telah terinstall di Node Module
- Eksekusi Node. Ekstensi yang berguna untuk menjalankan file JavaScript secara langsung dengan runtime Node JS, dan menampilkan hasilnya ke dalam Terminal
- Dukungan NPM untuk Kode VS. Menambahkan fungsi untuk menjalankan script NPM melalui VS Code, inspeksi dependensi yang ada di package. json , dan management script NPM yang berjalan
- NPM Intellisense. Ekstensi ini hampir sama dengan ekstensi untuk NPM sebelumnya. Namun dilengkapi dengan perintah atau snippet yang bisa dipakai melalui Command Palette di VS Code
- Buka di browser. Ekstensi untuk membuka file HTML yang sedang disunting di VS Code ke browser komputer. Berguna untuk melihat tampilan web saat proses desain dan mockup
- Rekatkan JSON sebagai Kode. Melakukan copy paste data JSON menjadi bentuk model atau class
- Jalan Intellisense. Menambahkan Intellisense atau autocomplete pada penggunaan path di dalam HTML. Biasanya dipakai mereferensikan path dari file CSS ke dalam HTML
- Lengkapi Otomatis Jalur. Fungsinya hampir sama dengan ekstensi Path Intellisense, namun ekstensi ini untuk mereferensikan file atau modul JavaScript yang satu dengan yang lain, ketika melakukan proses impor
- Pemformat Kode yang Lebih Cantik. Ekstensi untuk merapikan kode JavaScript, TypeScript, dan CSS
- kode polandia. Ekstensi untuk mengambil tampilan atau tangkapan layar dari beberapa potong kode. Berguna untuk membagikan potongan kode ke media sosial atau aplikasi chat
- Cuplikan Polimer, Sintaks Polimer, berikan IDE Polimer. Ekstensi untuk menambahkan fungsi snippet dan syntax highlighting pada framework Polymer dan Web Component
- manajer proyek. Ekstensi untuk mengatur project-project yang pernah dibuka ke dalam bentuk bookmark project
- quokka. js. Ekstensi untuk membuat lembaran coret-coret kode JavaScript, sebelum diimplementasikan ke proyek utama
- Bereaksi Alat Asli. Ekstensi untuk fungsi debugging pada framework React Native
- React Native/ React/Redux Cuplikan untuk ES6/ES7. Ekstensi untuk menambahkan snippet fungsi pada pengembangan aplikasi React Native
- Bereaksi Cuplikan Kode JS. Ekstensi yang berisi snippet untuk pengembangan React JS dan sintaks ES2015
- Pratinjau Regex. Menambahkan pratinjau pada fungsi Regex di JavaScript dan TypeScript
- Kontainer Jarak Jauh. Ekstensi untuk membuka container Docker dari VS Code
- SSH jarak jauh. Ekstensi untuk membuka folder dan kode dari remote server dengan SSH
- Klien REST. Melakukan uji coba endpoint REST API dari Visual Studio Code langsung
- Cari node_modules. Menambahkan kemampuan untuk mencari file yang terdapat di dalam dependensi pada folder node_modules, melalui Command Palette VS Code
- Pengaturan Sinkronisasi. Ekstensi untuk melakukan backup data setelan VS Code ke dalam Github Gist. Pengaturan data yang dibackup diantaranya daftar ekstensi yang terpasang, pengaturan VS Code, key binding, dst. Dengan adanya fitur backup setelan ini, kita dapat melakukan ekspor dan impor setelan VS Code, ke mesin komputer yang lain. Atau untuk berjaga-jaga jika kita berganti komputer dan ingin memasang kembali ekstensi dan setelan yang pernah dipasang sebelumnya
- mengelilingi. Menambahkan rangkap if else for dst dari kursor selector
- langsing. Ekstensi untuk dukungan framework Svelte JS
- Langsing Intellisense. Menambahkan fungsi intellisense pada proyek berbasis Svelte JS
- Langsing 3 Cuplikan. Menambahkan snippet untuk Svelte JS versi 3
- Penampil SVG. Melihat pratinjau untuk gambar SVG
- Obrolan Tim untuk Slack, Discord, Live Share. Menambahkan fungsi mengirim pesan instan pada ekstensi Live Share
- Spasi tertinggal. Menambahkan penekanan pada spasi kosong yang ada diakhiran kode dan menghapus spasi kosong tersebut
- TSLint. Memberikan fungsi linter untuk koreksi dan perbaikan kode TypeScript
- Semua Sorotan. Sorot SEMUA, FIXME, kata kunci, berikan anotasi
- Semua Daftar. Menampilkan daftaraction comments (TODO, FIXME, HACK etc) ke dalam daftar yang mudah dibaca
- semua +. Kelola semua daftar dengan mudah
- Log Konsol Turbo. Menambahkan pintasan cepat untuk menulis Console Log di JavaScript
- Lensa Versi. Ekstensi untuk melihat versi paket dependensi JavaScript di paket file. json dan membandingkannya dengan versi terbaru yang ada di repositori NPMJS
- Vetur. Ekstensi yang menambahkan kemampuan snippets dan intellisense pada penulisan aplikasi web berbasis Vue JS
- Visual Studio IntelliCode. Menambahkan kemampuan Intellisense dengan AI dan saran yang tepat
- Pembuat Kode VS. Membuat data palsu untuk alamat, nama, lorem ipsum, dan kontak untuk uji coba
- VS Berbagi Langsung. Ekstensi untuk berbagi layar dan ruang kerja di VS Code dengan pengguna atau tim proyek lain. Sangat berguna untuk melakukan pemrograman atau coding bersama , dengan pengguna yang jaraknya jauh
- Paket Ekstensi Berbagi Langsung VS. Tambahan untuk ekstensi VS Live Share dengan fitur chatting dan privasi melalui suara
- Vue 2 Cuplikan. Ekstensi yang menambahkan kemampuan snippets dan intellisense pada penulisan aplikasi web berbasis Vue JS
- Cuplikan Vue VSCode. Ekstensi yang menambahkan kemampuan snippets dan intellisense pada penulisan aplikasi web berbasis Vue JS
- wakatime. Mencatat statistik aktivitas pemrograman yang kita lakukan di VS Code
- YAML. Menambahkan dukungan untuk sintaks YAML
Penjelasan detail dari ekstensi-ekstensi tersebut dapat dilihat dengan menekan atau klik tulisan dari nama ekstensi. Ketika diklik, browser akan membuka halaman detailnya di web Visual Studio Marketplace
Tema memberi Ikon Visual Studio Code
Selain ekstensi untuk kenyamanan penulisan kode dan kolaborasi, saya juga menggunakan ekstensi untuk mengubah theme teks editor VS Code ini. Ekstensi ini berupa ikon tema untuk representasi file di dalam folder proyek. Ekstensi tema yang juga dipakai yaitu ekstensi untuk tema pewarnaan kode di dalam editor teks. Cara mengganti theme dan icon di VS Code cukup mudah, yaitu dengan mengakses menu File > Preferences > Color Theme atau File Icon Theme. Bisa juga dengan menggunakan Command Palette yaitu dengan menekan tombol Ctrl + Shift + P. Kemudian ketikkan Theme , dan opsi pun akan muncul
Beberapa opsi untuk mengakses pengaturan tema dan ikon di VS Code
Dokumentasi mengenai tema dan ikon di VS Code ini bisa kalian baca di dokumentasi berikut ini
Tema Kode Visual Studio
Tema warna memungkinkan Anda mengubah warna dalam antarmuka pengguna Visual Studio Code agar sesuai dengan preferensi dan pekerjaan Anda…
kode. Studio visual. com
Theme favorit yang biasa digunakan ada beberapa macam, diantaranya theme Mayukai Theme dan theme Gruvbox Material
Tampilan Tema Mayukai
Tampilan tema Gruvbox
Sedangkan untuk theme icon file yang menjadi favorit adalah theme Material Icon Theme, Nomo Dark Icon Theme, Simple Icons, dan VS Code Great Icons
Contoh icon theme untuk Material Icon Theme (kiri) dan Simple Icons (kanan)
Beberapa tema untuk memberikan warna pada tulisan kode yang saya rekomendasikan yaitu
- Tema Mayukai
- Bahan Gruvbox
Kemudian berikut daftar icon tema yang saya rekomendasikan dan menarik untuk melengkapi beberapa tema yang telah disebutkan di atas
- Tema Ikon Bahan
- Ikon Hebat Kode VS
- Ikon Gelap Nomo
- Ikon Ayu. Theme icon ini adalah theme icon yang otomatis terpasang saat memasang Ayu Theme
- Ikon Sederhana
Demikian daftar ekstensi dan theme yang saya gunakan untuk melengkapi teks editor Visual Studio Code. Beberapa diantaranya sangat membantu untuk menambah kenyamanan dan produktivitas dalam penggunaan VS Code ini. Silahkan saja kalian coba ekstensi-ekstensi yang telah saya berikan di atas. Siapa tahu bisa cocok dan menambah produktivitas dan kenyamanan saat menggunakan Visual Studio Code
Paket Ekstensi Lengkap JavaScript Penuh
Saya juga membuat sebuah extensions pack yang berisi daftar ekstensi, tema, dan icon yang telah saya sebutkan di atas. Ekstensi ini bernama Full JavaScript Complete Pack. Ekstensi ini dapat diunduh melalui Visual Studio Code marketplace dari dalam text editor VS Code langsung. Atau bisa melalui tautan berikut ini
Paket Lengkap JavaScript Lengkap — Visual Studio Marketplace
Kode Visual Studio > Dapatkan sekarang. Paket Ekstensi > Paket Lengkap JavaScript Penuh
marketplace. Studio visual. com
Tujuan dari dibuatnya ekstensi ini adalah agar memudahkan orang-orang dalam memasang ekstensi yang diperlukan sekaligus, tanpa perlu memasang dan mencari satu per satu di marketplace. Hal ini adalah masalah yang sering saya temui ketika ingin mengkonfigurasi VS Code dan bisa jadi masalah yang sama ditemui oleh orang-orang lain
Pak Ekstensi Full JavaScript Complete Pack yang telah tersedia di VS Code Marketplace
Pastikan koneksi internet yang tersedia cukup stabil dan cepat sebelum memasang ekstensi ini. Jika menemui masalah ketika pemasangan ekstensi, bisa diatasi dengan memasang ulang ekstensi ini. Extension Pack tersebut tersedia kode sumbernya, yang telah saya letakkan ke Github berikut ini
GulajavaMinistudio/FullJSExtensionPackCode
Paket ekstensi dan paket tema untuk Kode Visual Studio — GulajavaMinistudio/FullJSExtensionPackCode
github. com
Setelah pemasangan Extension Pack ini, pastinya akan ditemui beberapa ekstensi di dalamnya yang mungkin tidak perlu. Kalian bisa mematikan beberapa ekstensi yang tidak perlu tersebut dengan membuka halaman Extensions di VS Code, kemudian cari ekstensi yang ingin dimatikan, dan tekan tombol berbentuk gerigi atau Gear, dan pilih Disabled. Silahkan dicoba dan dipasang untuk memperlancar pemrograman JavaScript dan Web dengan VS Code
ulasan lain
Daftar ekstensi VS Code yang lain untuk JavaScript bisa dilihat juga di channel Web Programming Unpas berikut ini