Cara menjalankan javascript di visual studio code

Visual Studio Code (VS Code) ini adalah sebuah teks editor ringan dan handal yang dibuat oleh Microsoft untuk sistem operasi multiplatform, artinya tersedia juga untuk versi Linux, Mac, dan Windows. Teks editor ini secara langsung mendukung bahasa pemrograman JavaScript, Typescript, dan Node.js, serta bahasa pemrograman lainnya dengan bantuan plugin yang dapat dipasang via marketplace Visual Studio Code (seperti C++, C#, Python, Go, Java, dst).

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 snippet code, dan penambah alur produktivitas programming. Visual Studio Code dapat diunduh pada tautan di bawah ini.

Ekstensi VS Code untuk JavaScript Development

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 adalah 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. Angular Snippets by Dan Wahlin . Ekstensi snippet dan suggestion untuk penggunaan framework Angular.
2. Angular Snippets by Mikael Morlund. Ekstensi snippet dan suggestion untuk penggunaan framework Angular.
3. Angular Snippet by John Papa . Ekstensi snippet dan suggestion penggunaan framework Angular.
4. Angular Schematics. Ekstensi menjalankan perintah Angular CLI dari File Explorer dan Command Palette VS Code.
5. Angular Console . Ekstensi untuk menjalankan Angular CLI dari VS Code dengan user interface atau GUI.
6. Auto Close Tag. Ekstensi untuk menambahkan penutup tag secara otomatis pada HTML dan XML . Ekstensi ini sementara tidak saya pakai karena bugs yang menyebabkan penggunaan CPU yang tinggi.
7. Auto Rename Tag. Ekstensi untuk mengganti tag pembuka dan tag penutup bersamaan 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 tipe browser secara otomatis dalam kelas CSS. Misalnya prefix -webkit-box untuk CSS Flexbox.
9. Babel JavaScript . Ekstensi untuk menampilkan highlight pada syntax JavaScript ES2015 ke atas.
10. Beautify . Untuk merapikan susunan kode JavaScript, HTML, CSS, dan JSON yang sesuai standar.
11. Better Comment . Ekstensi untuk memberikan tanda komentar yang lebih hidup dan mudah diperhatikan jika dibandingkan dengan komentar biasa di dalam kode.
12. Bookmarks . Menambahkan penanda bookmark pada baris kode dan navigasi ke penanda tersebut.
13. Bracket Pair Colorizer 2 . Versi terbaru dari ekstensi pewarnaan bracket sebelumnya. Versi terbaru ini membawa kompatibilitas dan performa lebih baik pada Visual Studio Code versi terbaru.
14. Carbon-now-sh . Ekstensi untuk membuat screenshot kode dengan layanan Carbon.
15. CDNJS . Mencari library dari CDNJS dan menambahkan langsung ke dalam HTML.
16. Change Case . Mengganti nama variabel menjadi berbentuk camelCase, CONSTANT_CASE, snake_case, dst menurut seleksi kursor pengguna.
17. Close HTML/XML Tag . Memberikan tag penutup otomatis pada HTML dan XML.
18. CodeSnap . Ekstensi untuk membuat screenshot kode langsung dari text editor.
19. CodeStream . Ekstensi untuk melakukan diskusi antar pengembang dalam satu tim, dengan fitur menambahkan komentar di dalam baris-baris kode. Dapat diintegrasikan dengan Slack, Teams, GitHub, GitLab, Bitbucket, Jira, Trello, dst.
20. Color Highlight . Menampilkan kotak warna dari kode hex warna yang ada di dalam kode CSS, JavaScript, ataupun HTML.
21. Color Info . Ekstensi untuk menambahkan keterangan lebih lanjut dari warna di CSS.
22. CSS Formatter . Ekstensi untuk memformat susunan CSS agar lebih rapi.
23. CSS Peek . Melihat detail dari suatu kelas atau id dari CSS yang terdapat di dalam HTML .
24. CSV to Table . Konversi data CSV menjadi bentuk tabel data dalam bentuk susunan karakter ASCII.
25. Debugger for Chrome . Ekstensi penghubung antara VS Code dengan browser Google Chrome, yang digunakan untuk debugging aplikasi web.
26. Debugger for Firefox . Ekstensi penghubung antara VS Code dengan browser Mozilla Firefox, yang digunakan untuk debugging aplikasi web.
27. Dependency Analytics . Melihat info dari dependency NPM yang dipakai.
28. Docker . Menambahkan syntax highlight dan linting untuk Dockerfile.
29. DotENV . Menambahkan syntax highlight dan linting untuk file .env .
30. EditorConfig for VS Code . 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. Error Lens. Ekstensi untuk menampilkan keterangan lebih detail dari error yang ditemui ketika penulisan kode.
32. ES7 React/Redux/GraphQL/React-Native snippets . 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 ditemui penulisan JavaScript yang belum sesuai standar.
34. ES6 Mocha Snippets . Ekstensi untuk membuat kerangka unit testing dengan Mocha.
35. ES6 String HTML . Ekstensi untuk menambahkan syntax highlighting pada kode html yang berbentuk String template literal.
36. File Utils . Ekstensi untuk menambahkan operasi membuat data, duplikasi data, memindahkan data, mengubah nama data, dan menghapus data dan direktori folder.
37. Gi . Membuat file .gitignore dengan mudah.
38. Gistpad . Untuk manajemen Gist dan Code Snippet yang ada di akun Github Gist milik sendiri.
39. Gitignore . Dukungan syntax highlight dan mengambil kerangka gitignore dari repositori Gitignore di Github.
40. Git History . Ekstensi untuk melihat grafik riwayat commit dari repository 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. Git Graph. Ekstensi menambahkan tampilan GUI dari alur Git dan status Git di VS Code langsung.
43. Github Pull Request . Membuat pull request dengan mudah di layanan Github.
44. Highlight Matching Tag . Menambahkan sorotan pada tag pembuka dan tag penutup pada elemen HTML.
45. HTML CSS Support . Menambahkan kemampuan Intellisense (suggestion dan completion) untuk penulisan class dan id dari CSS di dalam HTML.
46. HTML Snippets . Ekstensi untuk menambahkan dukungan terhadap penulisan HTML5. Namun fungsi HTML Snippets ini sudah diadopsi langsung oleh fungsi utama Visual Studio Code.\
47. Indent Rainbow . 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 for CSS class names in HTML . Menambahkan kemampuan Intellisense terhadap pemakaian CSS Class di dalam HTML. Ekstensi ini akan melakukan pendeteksian untuk mencari file CSS yang terdapat di dalam folder proyek.
49. Import Cost . Melihat ukuran file yang diimport dari dependency dan file JS yang lain.
50. Inline HTML . Menambahkan syntax highlighting , snippet , dan intellisense pada sintaks HTML atau CSS yang berada di dalam ES2015 template Strings.
51. JavaScript Booster . Menambahkan produktivitas dalam JavaScript programming dengan menambahkan snippet dan saran penulisan pada kode yang ditulis.
52. JavaScript (ES6) code snippets . Ekstensi untuk kerangka snippets penulisan JavaScript berbasiskan standar ES2015.
53. JavaScript Snippet Pack . Kumpulan snippet untuk JavaScript ES2015.
54. Jest . Menggunakan unit testing Jest dengan mudah.
55. Jumpy . Navigasi antar kata dengan pintasan cepat.
56. JS Refactor . Menambahkan fungsi refactor untuk kode JavaScript.
57. Kubernetes . Dukungan untuk melakukan debug aplikasi berbasis Kubernetes Container.
58. Lit HTML . Syntax highlighting dan Intellisense untuk sintaks HTML yang berada di dalam kode template String JavaScript.
59. Live SASS Compiler . Ekstensi untuk melakukan preview dan kompilasi file SASS atau SCSS ke CSS secara realtime, dan menampilkannya ke dalam browser secara langsung.
60. Live Server . 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 otomatis melakukan live reload halaman.
61. Live Share . Ekstensi untuk kolaborasi dengan pengembang lain secara online.
62. Live Share Audio . Ekstensi tambahan untuk Live Share dengan fungsi komunikasi melalui suara dengan pengguna Live Share yang lain.
63. Markdown Preview Enhanced. Ekstensi untuk menampilkan preview dari file Markdown.
64. Markdown Lint. Ekstensi untuk menambahkan snippet dan koreksi ketika penulisan Markdown.
65. Markdown 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 perpindahan antar karakter huruf kode yang sama.
67. Multiple Clipboard . Menambahkan dukungan untuk menampung banyak clipboard copy paste di VS Code.
68. MongoDb for VS Code. Ekstensi untuk manajemen database MongoDb , seperti melihat schema, collections, playground untuk eksperimen data dan schema, dan masih banyak lagi.
69. Node.js Modules Intellisense . Ekstensi untuk menambahkan Intellisense terhadap daftar dependency di dalam Node Modules dan folder proyek. Sehingga ketika melakukan import statement di dalam kode JavaScript, terdapat saran atau suggestion dari nama module dependency nya.
70. Node Readme . Ekstensi untuk melihat dokumentasi dari libray JavaScript yang telah terinstall di Node Module .
71. Node Exec . Ekstensi yang berguna untuk menjalankan file JavaScript secara langsung dengan runtime Node JS, dan menampilkan hasilnya ke dalam Terminal.
72. NPM Support for VS Code . Menambahkan fungsi untuk menjalankan script NPM melalui VS Code, inspeksi dependency yang ada di package.json , dan manajemen 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. Open in Browser . Ekstensi untuk membuka file HTML yang sedang disunting di VS Code ke browser komputer. Berguna untuk melihat tampilan web ketika proses desain dan mockup.
75. Paste JSON as Code . Melakukan copy paste data JSON menjadi bentuk model atau class.
76. Path Intellisense . Menambahkan Intellisense atau autocomplete pada penggunaan path di dalam HTML. Biasanya dipakai mereferensikan path dari file CSS ke dalam HTML.
77. Path Autocomplete . 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. Prettier Code Formatter . Ekstensi untuk merapikan kode JavaScript, TypeScript, dan CSS.
79. Polacode . Ekstensi untuk mengambil tampilan atau screenshot dari beberapa potong kode. Berguna untuk membagikan potongan kode ke sosial media atau aplikasi chat.
80. Polymer Snippet , Polymer Syntax , dan Polymer IDE . Ekstensi untuk menambahkan fungsi snippet dan syntax highlighting pada framework Polymer dan Web Component.
81. Project Manager . 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. React Native Tools . Ekstensi untuk fungsi debugging pada framework React Native.
84. React Native/ React / Redux Snippets for ES6 / ES7 . Ekstensi untuk menambahkan fungsi snippet pada pengembangan aplikasi React Native.
85. React JS Code Snippets . Ekstensi yang berisi snippet untuk React JS development dan sintaks ES2015.
86. Regex Previewer . Menambahkan preview pada fungsi Regex di JavaScript dan TypeScript.
87. Remote Containers . Ekstensi untuk membuka container Docker dari VS Code.
88. Remote SSH . Ekstensi untuk membuka folder dan kode dari remote server dengan SSH.
89. REST Client . Melakukan uji coba endpoint REST API dari Visual Studio Code langsung.
90. Search node_modules . Menambahkan kemampuan untuk mencari file yang terdapat di dalam dependency pada folder node_modules, melalui Command Palette VS Code.
91. Settings Sync . Ekstensi untuk melakukan backup data setelan VS Code ke dalam Github Gist. Data setelan yang dibackup diantaranya daftar ekstensi yang terpasang, setelan 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. Surround . Menambahkan rangkap if else for dst dari selector kursor.
93. Svelte . Ekstensi untuk dukungan framework Svelte JS.
94. Svelte Intellisense . Menambahkan fungsi intellisense pada proyek berbasis Svelte JS.
95. Svelte 3 Snippets. Menambahkan snippets untuk Svelte JS versi 3.
96. SVG Viewer . Melihat preview untuk gambar SVG.
97. Team Chat for Slack , Discord , Live Share . Menambahkan fungsi berkirim pesan instan pada ekstensi Live Share.
98. Trailing Spaces . Menambahkan sorotan pada spasi kosong yang ada diakhiran kode dan menghapus spasi kosong tersebut.
99. TSLint . Memberikan fungsi linter untuk koreksi dan perbaikan kode TypeScript.
100. Todo Highlight . Highlight TODOs, FIXMEs, keywords, dan annotations .
101. Todo List . Menampilkan daftaraction comments (TODO, FIXME, HACK etc) ke dalam daftar yang mudah dibaca.
102. Todo+ . Manajemen todo lists dengan mudah.
103. Turbo Console Log . Menambahkan pintasan cepat untuk menulis Console Log di JavaScript.
104. Version Lens . Ekstensi untuk melihat versi package dependency JavaScript di file package.json dan membandingkannya dengan versi terbaru yang ada di repository 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 suggestion yang tepat.
107. VS Code Faker . Membuat data palsu untuk alamat, nama, lorem ipsum, dan kontak untuk uji coba.
108. VS Live Share . Ekstensi untuk berbagi layar dan workspace di VS Code dengan pengguna atau tim proyek yang lain. Sangat berguna untuk melakukan pemrograman atau coding bersama , dengan pengguna yang terpisah jarak .
109. VS Live Share Extension Pack . Tambahan untuk ekstensi VS Live Share dengan fitur chatting dan mengobrol melalui suara.
110. Vue 2 Snippets . Ekstensi yang menambahkan kemampuan snippets dan intellisense pada penulisan aplikasi web berbasis Vue JS .
111. Vue VSCode Snippets . Ekstensi yang menambahkan kemampuan snippets dan intellisense pada penulisan aplikasi web berbasis Vue JS .
112. Waka Time . Mencatat statistik aktivitas programming kita yang dilakukan 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 dan Ikon Visual Studio Code

Selain ekstensi untuk kenyamanan penulisan kode dan kolaborasi, saya juga menggunakan ekstensi untuk mengubah tema teks editor VS Code ini. Ekstensi ini berupa tema ikon untuk representasi file di dalam folder proyek. Ekstensi tema yang juga dipakai yaitu ekstensi untuk tema pewarnaan kode di dalam teks editor. Cara mengganti tema dan ikon 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 favorit yang biasa digunakan ada beberapa macam, diantaranya tema Mayukai Theme dan tema Gruvbox Material.

Sedangkan untuk tema ikon file yang menjadi favorit adalah tema Material Icon Theme, Nomo Dark Icon Theme, Simple Icons , dan VS Code Great Icons.

Beberapa tema untuk memberikan warna di tulisan kode yang saya rekomendasikan yaitu :

1. Mayukai Theme .
2. Gruvbox Material .

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

1. Material Icon Theme .
2. VS Code Great Icon .
3. Nomo Dark Icon .
4. Ayu Icon . Tema ikon ini adalah tema ikon yang otomatis terpasang ketika memasang Ayu Theme .
5. Simple Icons.

Demikian daftar ekstensi dan tema 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 menjadi menambah produktivitas dan kenyamanan ketika menggunakan Visual Studio Code.

Full JavaScript Complete Extension Pack

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.

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 yang lain.

Pastikan koneksi internet yang tersedia cukup stabil dan cepat sebelum memasang ekstensi ini. Jika ditemui 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.

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 programming 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.