Wajah menggunakan javascript kode visual studio

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

1. Cuplikan Angular oleh Dan Wahlin. Ekstensi snippet dan saran untuk penggunaan Angular framework
2. Cuplikan Sudut oleh Mikael Morlund. Ekstensi snippet dan saran untuk penggunaan Angular framework
3. Cuplikan Angular oleh John Papa. Ekstensi snippet dan saran penggunaan framework Angular
4. Skema Sudut. Ekstensi menjalankan perintah Angular CLI dari File Explorer dan Command Palette VS Code
5. Konsol Sudut. Ekstensi untuk menjalankan Angular CLI dari VS Code dengan user interface atau GUI
6. 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
7. 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
8. autoprefixer. Ekstensi untuk menambahkan prefix type browser secara otomatis dalam kelas CSS. Misalnya prefix -webkit-box untuk CSS Flexbox
9. babel javascript. Ekstensi untuk menampilkan sorotan pada sintaks JavaScript ES2015 ke atas
10. Mempercantik. Untuk merapikan susunan kode JavaScript, HTML, CSS, dan JSON yang sesuai standar
11. Komentar Lebih Baik. Ekstensi untuk memberikan tanda komentar yang lebih hidup dan mudah diperhatikan jika dibandingkan dengan komentar biasa di dalam kode
12. Bookmark. Menambahkan penanda bookmark pada baris kode dan navigasi pada penanda tersebut
13. 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
14. karbon-sekarang-sh. Ekstensi untuk membuat kode screenshot dengan layanan Carbon
15. CDNJS. Mencari library dari CDNJS dan menambahkan langsung ke dalam HTML
16. ubah kasus. Mengganti nama variabel menjadi berbentuk camelCase, CONSTANT_CASE, snake_case, dst sesuai pencarian kursor
17. Tutup Tag HTML/XML. Memberikan tag penutup otomatis pada HTML dan XML
18. CodeSnap. Ekstensi untuk membuat kode screenshot langsung dari text editor
19. 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
20. Sorotan Warna. Menampilkan kotak warna dari kode hex warna yang ada di dalam kode CSS, JavaScript, ataupun HTML
21. info warna. Ekstensi untuk menambahkan keterangan lebih lanjut dari warna di CSS
22. Pemformat CSS. Ekstensi untuk memformat susunan CSS agar lebih rapi
23. Intip CSS. Melihat detail dari suatu kelas atau id dari CSS yang terdapat di dalam HTML
24. CSV ke Tabel. Konversi data CSV menjadi bentuk tabel data dalam bentuk susunan karakter ASCII
25. Debugger untuk Chrome. Ekstensi penghubung antara VS Code dengan browser Google Chrome, yang digunakan untuk debugging aplikasi web
26. Debugger untuk Firefox. Ekstensi penghubung antara VS Code dengan browser Mozilla Firefox, yang digunakan untuk debugging aplikasi web
27. Analisis Ketergantungan. Melihat info dari dependensi NPM yang dipakai
28. Buruh pelabuhan. Menambahkan highlight sintaks dan linting untuk Dockerfile
29. dotENV. Menambahkan highlight sintaks dan linting untuk file. lingkungan
30. 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
31. Lensa Kesalahan. Ekstensi untuk menampilkan keterangan lebih detail dari error yang ditemui saat penulisan kode
32. Potongan ES7 React/Redux/GraphQL/React-Native. Ekstensi untuk menambahkan snippet dan syntax highlighting untuk React JS , Redux, dan GraphQL dengan ES2016
33. ESLint. Ekstensi untuk mengatur gaya penulisan sesuai standar JavaScript ES2015+. Selain itu bisa memperbaiki kesalahan penulisan jika menemukan penulisan JavaScript yang belum sesuai standar
34. Cuplikan Mocha ES6. Ekstensi untuk membuat kerangka unit testing dengan Mocha
35. HTML String ES6. Ekstensi untuk menambahkan syntax highlighting pada kode html yang berbentuk String template literal
36. File Util. Ekstensi untuk menambahkan operasi, membuat data, duplikasi data, memindahkan data, mengubah nama data, dan menghapus folder data dan direktori
37. Gi. membuat file. gitignore dengan mudah
38. gistpad. Untuk managemen Gist dan Code Snippet yang ada di akun Github Gist milik sendiri
39. gitignore. Dukungan sintaks highlight dan mengambil kerangka gitignore dari repositori Gitignore di Github
40. 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
41. GitLens. Ekstensi untuk meningkatkan kemampuan integrasi Git VCS di dalam Visual Studio Code
42. Grafik Git. Ekstensi menambahkan tampilan GUI dari alur Git dan status Git di VS Code langsung
43. Permintaan Tarik Github. Membuat pull request dengan mudah di layanan Github
44. Sorot Tag Pencocokan. Menambahkan pada tag pembuka dan tag penutup pada element HTML
45. Dukungan CSS HTML. Menambahkan kemampuan Intellisense (saran dan penyelesaian) untuk kelas penulisan dan id dari CSS di dalam HTML
46. Cuplikan HTML. Ekstensi untuk menambahkan dukungan terhadap penulisan HTML5. Namun fungsi HTML Snippets ini sudah diadopsi langsung oleh fungsi utama Visual Studio Code. \
47. 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
48. 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
49. Biaya Impor. Melihat ukuran file yang diimpor dari dependensi dan file JS yang lain
50. HTML sebaris. Menambahkan syntax highlighting , snippet , dan intellisense pada sintaks HTML atau CSS yang berada di dalam template ES2015 Strings
51. penguat javascript. Menambah produktivitas dalam pemrograman JavaScript dengan menambahkan snippet dan saran penulisan pada kode yang ditulis
52. Cuplikan kode JavaScript (ES6). Ekstensi untuk snippet kerangka penulisan JavaScript berbasiskan standard ES2015
53. Paket Cuplikan JavaScript. Kumpulan cuplikan untuk JavaScript ES2015
54. bersenda gurau. Menggunakan unit testing Jest dengan mudah
55. gelisah. Navigasi antar kata dengan pintasan cepat
56. Refaktor JS. Menambahkan fungsi refactor untuk kode JavaScript
57. Kubernetes. Dukungan untuk melakukan debug aplikasi berbasis Kubernetes Container
58. Menyala HTML. Syntax highlighting dan Intellisense untuk sintaks HTML yang berada di dalam kode template String JavaScript
59. Kompiler SASS Langsung. Ekstensi untuk melakukan preview dan kompilasi file SASS atau SCSS ke CSS secara realtime, dan menampilkannya ke dalam browser secara langsung
60. 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
61. Berbagi Langsung. Ekstensi untuk kolaborasi dengan pengembang lain secara online
62. Bagikan Audio Langsung. Ekstensi tambahan untuk Live Share dengan fungsi komunikasi melalui suara dengan pengguna Live Share yang lain
63. Pratinjau Markdown Disempurnakan. Ekstensi untuk menampilkan preview dari file Markdown
64. Lint penurunan harga. Ekstensi untuk menambahkan snippet dan koreksi saat penulisan Markdown
65. Penurunan Harga All-In-One. Ekstensi untuk membantu penulisan markdown dengan fitur snippet, pintasan keyboard, preview, dan pembuatan daftar isi
66. MetaGo. Ekstensi untuk membantu navigasi di dalam kode dengan teknik penguncian antar karakter huruf kode yang sama
67. Banyak Clipboard. Menambahkan dukungan untuk menampung banyak clipboard copy paste di VS Code
68. MongoDB untuk Kode VS. Ekstensi untuk manajemen database MongoDb , seperti melihat skema, koleksi, taman bermain untuk eksperimen data dan skema, dan masih banyak lagi
69. 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
70. node readme. Ekstensi untuk melihat dokumentasi dari libray JavaScript yang telah terinstall di Node Module
71. Eksekusi Node. Ekstensi yang berguna untuk menjalankan file JavaScript secara langsung dengan runtime Node JS, dan menampilkan hasilnya ke dalam Terminal
72. 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
73. 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
74. 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
75. Rekatkan JSON sebagai Kode. Melakukan copy paste data JSON menjadi bentuk model atau class
76. Jalan Intellisense. Menambahkan Intellisense atau autocomplete pada penggunaan path di dalam HTML. Biasanya dipakai mereferensikan path dari file CSS ke dalam HTML
77. 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
78. Pemformat Kode yang Lebih Cantik. Ekstensi untuk merapikan kode JavaScript, TypeScript, dan CSS
79. kode polandia. Ekstensi untuk mengambil tampilan atau tangkapan layar dari beberapa potong kode. Berguna untuk membagikan potongan kode ke media sosial atau aplikasi chat
80. Cuplikan Polimer, Sintaks Polimer, berikan IDE Polimer. Ekstensi untuk menambahkan fungsi snippet dan syntax highlighting pada framework Polymer dan Web Component
81. manajer proyek. Ekstensi untuk mengatur project-project yang pernah dibuka ke dalam bentuk bookmark project
82. quokka. js. Ekstensi untuk membuat lembaran coret-coret kode JavaScript, sebelum diimplementasikan ke proyek utama
83. Bereaksi Alat Asli. Ekstensi untuk fungsi debugging pada framework React Native
84. React Native/ React/Redux Cuplikan untuk ES6/ES7. Ekstensi untuk menambahkan snippet fungsi pada pengembangan aplikasi React Native
85. Bereaksi Cuplikan Kode JS. Ekstensi yang berisi snippet untuk pengembangan React JS dan sintaks ES2015
86. Pratinjau Regex. Menambahkan pratinjau pada fungsi Regex di JavaScript dan TypeScript
87. Kontainer Jarak Jauh. Ekstensi untuk membuka container Docker dari VS Code
88. SSH jarak jauh. Ekstensi untuk membuka folder dan kode dari remote server dengan SSH
89. Klien REST. Melakukan uji coba endpoint REST API dari Visual Studio Code langsung
90. Cari node_modules. Menambahkan kemampuan untuk mencari file yang terdapat di dalam dependensi pada folder node_modules, melalui Command Palette VS Code
91. 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
92. mengelilingi. Menambahkan rangkap if else for dst dari kursor selector
93. langsing. Ekstensi untuk dukungan framework Svelte JS
94. Langsing Intellisense. Menambahkan fungsi intellisense pada proyek berbasis Svelte JS
95. Langsing 3 Cuplikan. Menambahkan snippet untuk Svelte JS versi 3
96. Penampil SVG. Melihat pratinjau untuk gambar SVG
97. Obrolan Tim untuk Slack, Discord, Live Share. Menambahkan fungsi mengirim pesan instan pada ekstensi Live Share
98. Spasi tertinggal. Menambahkan penekanan pada spasi kosong yang ada diakhiran kode dan menghapus spasi kosong tersebut
99. TSLint. Memberikan fungsi linter untuk koreksi dan perbaikan kode TypeScript
100. Semua Sorotan. Sorot SEMUA, FIXME, kata kunci, berikan anotasi
101. Semua Daftar. Menampilkan daftaraction comments (TODO, FIXME, HACK etc) ke dalam daftar yang mudah dibaca
102. semua +. Kelola semua daftar dengan mudah
103. Log Konsol Turbo. Menambahkan pintasan cepat untuk menulis Console Log di JavaScript
104. Lensa Versi. Ekstensi untuk melihat versi paket dependensi JavaScript di paket file. json dan membandingkannya dengan versi terbaru yang ada di repositori NPMJS
105. Vetur. Ekstensi yang menambahkan kemampuan snippets dan intellisense pada penulisan aplikasi web berbasis Vue JS
106. Visual Studio IntelliCode. Menambahkan kemampuan Intellisense dengan AI dan saran yang tepat
107. Pembuat Kode VS. Membuat data palsu untuk alamat, nama, lorem ipsum, dan kontak untuk uji coba
108. 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
109. Paket Ekstensi Berbagi Langsung VS. Tambahan untuk ekstensi VS Live Share dengan fitur chatting dan privasi melalui suara
110. Vue 2 Cuplikan. Ekstensi yang menambahkan kemampuan snippets dan intellisense pada penulisan aplikasi web berbasis Vue JS
111. Cuplikan Vue VSCode. Ekstensi yang menambahkan kemampuan snippets dan intellisense pada penulisan aplikasi web berbasis Vue JS
112. wakatime. Mencatat statistik aktivitas pemrograman yang kita lakukan di VS Code
113. 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

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

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

1. Tema Mayukai
2. Bahan Gruvbox

Kemudian berikut daftar icon tema yang saya rekomendasikan dan menarik untuk melengkapi beberapa tema yang telah disebutkan di atas

1. Tema Ikon Bahan
2. Ikon Hebat Kode VS
3. Ikon Gelap Nomo
4. Ikon Ayu. Theme icon ini adalah theme icon yang otomatis terpasang saat memasang Ayu Theme
5. 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

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

Bagaimana wajah menjalankan file JavaScript?

Apakah kode Visual Studio bisa untuk java?

Kode Visual Studio pakai bahasa apa?

Bagaimana cara menjalankan Visual Studio Code?