Visual Studio Code (VS Code) tidak diragukan lagi adalah editor kode ringan paling populer saat ini. Keberhasilannya terutama berasal dari kemampuannya untuk memberikan kinerja dan stabilitas yang lebih baik. Selain itu, ia juga menyediakan fitur yang sangat dibutuhkan seperti IntelliSense, yang hanya tersedia dalam IDE berukuran penuh seperti Eclipse atau Visual Studio 2017.
Kekuatan VS Code tidak diragukan lagi karena adanya ekstensi yang melimpah. Berkat komunitas open-source yang hebat, editor ini sekarang mampu mendukung hampir setiap bahasa pemrograman, framework dan teknologi pengembangan. Dukungan untuk library atau framework hadir dalam berbagai cara, yang utamanya mencakup snippets, syntax highlighting, fitur Emmet dan IntelliSense untuk teknologi yang spesifik.
Untuk artikel ini, saya akan fokus pada ekstensi VS Code khusus menargetkan JavaScript developer. Saat ini, ada banyak ekstensi VS Code yang sesuai dengan kriteria ini, yang tentu saja berarti saya tidak akan dapat menyebutkan semuanya. Sebagai gantinya, saya akan menyoroti ekstensi VS Code yang telah mendapatkan popularitas dan sangat diperlukan bagi pengembang JavaScript. Untuk lebih ringkasnya, saya akan mengelompokkannya ke dalam sepuluh kategori tertentu.
Baca juga: Penggunaan Visual Studio Code Untuk Pemrograman PHP
1. Ekstensi Snippet
Saat pertama kali memasang VS Code, kode editor ini dilengkapi dengan beberapa snippets bawaan untuk JavaScript dan Typescript. Snippets akan membantu menulis kode yang berulang dengan cepat. Namun, seiring waktu bisa saja kebutuhannya menjadi lebih banyak. Jika iya, anda dapat dengan mudah membuat membuat snippets sendiri, atau cukup menginstal ekstensi yang berisi banyak snippets baru. Trik jika ingin snippets ditampilkan di atas suggesti lainnya adalah menggunakan konfigurasi ini:
{
"editor.snippetSuggestions": "top"
}
Berikut ini beberapa ekstensi snippets paling populer untuk pengembang JavaScript. Namun, saya sarankan anda menginstal hanya satu demi kesederhanaan.
JavaScript (ES6) code snippets, by Charalampos Karypidis.
Saat ini adalah ekstensi snippet javaScript paling populer dengan lebih dari 3 juta pemasangan. Ekstensi ini menyediakan sintaks ES6 untuk JavaScript, TypeScript, HTML, React, dan Vue. Semua snippets menyertakan titik koma akhir.
JavaScript (ES6) code snippets in StandardJS style, by James Vickery.
Pada dasarnya ini adalah percabangan dari ekstensi di atas bagi mereka yang lebih suka konvensi gaya StandardJS — yaitu, snippet tidak memiliki titik koma.
JavaScript standardjs styled snippets, by capaj.
Snippets gaya StandardJS, tetapi yang ini lebih populer dengan pemasangan lebih dari 72k. Awalnya sebuah fork dari Atom StandardJS snippets. Berisi koleksi besar snippets berguna dan mendukung JavaScript, TypeScript dan React.
JavaScript Snippets, by Nathan Chapman.
Kumpulan snippets JavaScript dengan sekitar 33k + pemasangan hingga saat ini. Ekstensi snippets ini mendukung Node.js, framewrok Pengujian BDD seperti Mocha dan Jasmine.
Atom JavaScript Snippet, by Saran Tanpituckpong.
Dengan sekitar 26k + instal hingga saat ini, snippets dalam ekstensi ini diporting dari atom/language-javascript. Snippets JavaScript porting dari ekstensi atom/language-javascript.
2. Ekstensi Syntax Highlighting
Versi terbaru dari VS Code mendukung pewarnaan sintaks yang lebih baik dan sekarang lebih sesuai dengan standar yang ditetapkan dalam tata bahasa Atom. Karenanya, ekstensi seperti JavaScript Atom Grammar tidak lagi diperlukan.
Namun, saya memiliki beberapa rekomendasi untuk ekstensi Syntax Highlighting yang cukup berguna ketika berhubungan dengan beberapa jenis proyek dan ekstensi file. Inilah beberapa:
Babel JavaScript, oleh Michael McDermott. Dengan lebih dari 550k + pemasangan hingga saat ini, ekstensi ini menyediakan penyorotan sintaks untuk kode JavaScript ES201x, React, FlowType, dan GraphQL.
DotENV, oleh 833.737. Dengan lebih dari 833k instal hingga saat ini, ekstensi ini mendukung penyorotan sintaks untuk pengaturan environment - yaitu, file .env.
Bracket Pair Colorizer 2, oleh CoenraadS. Dengan pemasangan 730k +, ekstensi ini menyoroti braket yang cocok dengan warna berbeda, membantu anda mengidentifikasi braket mana yang termasuk dalam suatu blok.
3. Ekstensi Linter
Pernahkah anda berdebat dengan rekan satu tim tentang tab vs spasi atau titik koma vs tanpa titik koma? Anda akan menyadari bahwa orang-orang memiliki pendapat berbeda tentang gaya pengkodean mana yang akan digunakan. Namun demikian, semua orang di tim yang sama perlu menggunakan gaya pengkodean yang sama terlepas dari pendapat mereka.
Untuk menegakkan aturan, kita perlu menggunakan linter yang membandingkan suatu kode dengan aturan yang dibuat. Anda menetapkan aturan dengan memilih gaya pengkodean populer seperti Standar, Google, dan Airbnb. Anda dapat menggunakannya sebagaimana adanya atau menggunakan file konfigurasi untuk menyesuaikan aturan. VS Code tidak memiliki linter JavaScript bawaan, jadi harus memasang ekstensinya.
ESLint, oleh Dirk Baeumer. Dengan lebih dari 8 juta pemasangan, ini adalah ekstensi paling populer yang menyediakan dukungan untuk perpustakaan ESLint. Agar ekstensi berfungsi, proyek anda akan memerlukan paket ESLint dan plugin yang diinstal. Anda juga harus menentukan .eslintrc, yang akan menentukan aturan yang akan digunakan ekstensi.
JSHint, oleh Dirk Baeumer. Dengan pemasangan 1,2 juta +, ekstensi ini mendukung linting dengan pustaka JSHint. Diperlukan file konfigurasi .jshintrc untuk ekstensi agar berfungsi.
StandardJS - Style Standar JavaScript, oleh Sam Chen. Ekstensi ini (259k + pemasangan) hanya mengintegrasikan Style Standar JavaScript ke dalam VS Code. Anda harus menginstal standar atau semi-standar sebagai dev dependensi dalam proyek. Tidak ada file konfigurasi yang diperlukan. Anda harus menonaktifkan validator bawaan VS Code agar ekstensi ini berfungsi.
JSLint, oleh Andrew Hyndman. Ekstensi ini menyediakan linting dengan pustaka JSLint. Anda harus menginstal jslint secara lokal atau global agar ekstensi berfungsi. Memiliki 109k + instal hingga saat ini.
4. Ekstensi Node Package Management
Setiap proyek JavaScript harus memiliki setidaknya satu paket npm, kecuali jika anda adalah seseorang yang suka melakukan hal-hal yang sulit. Berikut adalah beberapa ekstensi VS Code yang akan membantu mengelola dan bekerja dengan paket npm lebih mudah.
npm, oleh egamma. Dengan lebih dari 2,3M + pemasangan, ekstensi ini menggunakan package.json untuk memvalidasi paket yang diinstal. Jika ada yang hilang atau versi tidak cocok, ekstensi akan memberi opsi yang dapat diklik untuk memperbaiki masalah. Selain itu, anda juga dapat menjalankan skrip npm yang ditentukan dalam package.json tepat di dalam editor.
npm IntelliSense, oleh Christian Kohler. Dengan 1.9M + pemasangan, ekstensi ini menyediakan modul npm pelengkapan otomatis dalam pernyataan impor.
Path IntelliSense, oleh Christian Kohler. Dengan 2,7M + instal, ekstensi ini secara otomatis melengkapi nama file. Ini juga berfungsi di dalam file HTML dan CSS.
Node exec, oleh Miramac. Dengan pemasangan 168k +, ekstensi ini memungkinkan anda untuk mengeksekusi file saat ini atau kode yang dipilih dengan Node.js dengan menekan F8 pada keyboard. Anda juga dapat membatalkan proses yang berjalan dengan menekan F9.
View Node Package oleh Dominik Kundel. Dengan pemasangan 55k +, ekstensi ini memungkinkan anda untuk dengan cepat melihat sumber paket Node dan dokumentasi saat sedang bekerja dengan kode.
Node Readme, oleh bengreenier. Dengan pemasangan 52k +, ekstensi ini memungkinkan anda untuk dengan cepat membuka dokumentasi paket npm tepat di dalam editor VS Code sebagai tab terpisah.
Search node_modules, oleh Jason Nutter. Secara default, folder node_modules dikecualikan dari pencarian bawaan VS Code. Dengan lebih dari 470k pemasangan, ekstensi ini memungkinkan untuk dengan cepat menavigasi dan membuka file di node_modules melalui folder tree.
5. Ekstensi Formatting
Sering kita terkadang menulis kode yang tidak selaras dengan kode lainnya. Untuk memperbaikinya, kita harus kembali dan memperbaiki indentasi di setiap baris. Selain itu, kadang kita juga perlu memastikan bracket dan tag diformat dengan benar dan dalam format yang dapat dibaca. Proses ini bisa membosankan.
Untungnya, ada ekstensi yang dapat bekerja untuk itu di VS Code. Harap perhatikan ekstensi seperti Prettier dan Beautify tidak dapat keduanya diaktifkan secara bersamaan.
Prettier Code Formatter, oleh Esben Petersen. Ini adalah ekstensi paling populer yang mendukung pemformatan JavaScript, TypeScript, dan CSS. Memiliki lebih dari 5,7 juta pemasangan hingga saat ini. Dianjurkan anda menginstal prettier secara lokal sebagai dev depedensi.
Beautify, oleh HookyQR. Ekstensi jsBeautifier yang mendukung JavaScript, JSON, CSS dan HTML. Ekstensi ini dapat dikustomisasi melalui file .jsbeautifyrc. Sebagai formatter terpopuler kedua, dengan 4,4 juta pemasangan hingga saat ini.
JS Refactor, oleh Chris Stead. Menyediakan sejumlah utilitas dan aksi untuk refactoring kode JavaScript, seperti mengekstraksi variabel/metode, mengonversi kode yang ada untuk menggunakan fungsi panah atau templat literal, dan fungsi ekspor. Memiliki 140k + instal hingga saat ini.
JavaScript Booster, oleh Stephan Burguchev. Ini adalah alat refactoring kode yang luar biasa. Menawarkan fitur beberapa tindakan pengkodean seperti mengkonversi var ke const atau let, menghapus else statement yang berlebihan, dan menggabungkan deklarasi dan inisialisasi. Sebagian besar terinspirasi oleh WebStorm, ia memiliki 74k + pemasangan hingga saat ini.
6. Ekstensi Browser
Kecuali jika menulis program konsol dalam JavaScript, kemungkinan besar anda akan mengeksekusi kode JavaScript di dalam browser. Ini berarti harus sering menyegarkan halaman untuk melihat efek dari setiap pembaruan kode yang dibuat. Alih-alih melakukan ini secara manual sepanjang waktu, berikut adalah beberapa tool yang dapat secara signifikan mengurangi waktu development.
Debugger for Chrome, oleh Microsoft. Dengan lebih dari 5,2+ juta pemasangan, ekstensi ini memungkinkan anda untuk men-debug kode JavaScript di Chrome, atau target lain yang mendukung Protokol Debugger Chrome. Jika anda baru mengenal ekstensi ini dan melakukan debugging di VS Code, lihat tutorial VS Code dan debugging Chrome kami.
Live Server, oleh Ritwick Dey. Ekstensi ini memungkinkan anda untuk meluncurkan server pengembangan lokal dengan fitur live reload untuk halaman statis dan dinamis. Memiliki 4.6M + instal hingga saat ini.
Preview on Web Server, oleh YuichiNukiyama. Ekstensi ini menyediakan server web dan preview langsung dari HTML. Fitur dapat dipanggil dari menu konteks atau menu editor. Memiliki 120k + instal hingga saat ini.
PHP Server, oleh brapifra. Dibangun untuk proyek PHP, berguna untuk menguji kode JavaScript yang hanya perlu dijalankan di sisi klien. Ekstensi ini memiliki 234k + instal hingga saat ini.
Rest Client, oleh Huachao Mao. Daripada menggunakan browser atau program CURL untuk menguji endpoint REST API, anda dapat menginstal alat ini untuk secara interaktif menjalankan permintaan HTTP tepat di dalam editor. Ekstensi ini memiliki 834k + instal hingga saat ini.
7. Ekstensi Framework
Untuk sebagian besar proyek, anda akan membutuhkan kerangka kerja yang sesuai untuk menyusun kode dan mengurangi waktu pengembangan. VS Code memiliki dukungan untuk sebagian besar kerangka kerja utama melalui ekstensi. Namun, masih ada sejumlah kerangka kerja utama yang belum memiliki ekstensi yang dikembangkan sepenuhnya. Berikut adalah beberapa ekstensi VS Code yang menawarkan fungsionalitas yang signifikan.
Angular Snippets (Version 9), oleh John Papa. Dengan lebih dari 1,7+ juta pemasangan, ini adalah ekstensi snippets paling populer untuk pengembang Angular. Ekstensi ini memberikan snippets Angular untuk file TypeScript, RxJS, HTML dan Docker. Pada saat penulisan, ekstensi telah diperbarui untuk mendukung Angular 9.
Angular 8 Snippets – TypeScript, Html, Angular Material, ngRx, RxJS and Flex Layout, oleh Mikael Morlund. Ekstensi ini memiliki snippets untuk Angular 2, 4, 5, 6,7 dan 8 Beta. Mendukung TypeScript, HTML, Angular Material ngRx, RxJS, PWA dan Flex Layout. Hingga saat ini berisi 242 Angular snippets, dan memiliki lebih dari 1,35 juta + pemasangan.
ES7 React/Redux/GraphQL/React-Native snippets, oleh dsznajder. Dengan lebih dari 1.2 juta pemasangan hingga saat ini, ekstensi ini menyediakan snippets JavaScript dan TypeScript untuk React, Redux, dan Graphql dengan sintaksis ES7.
React Native Tools, oleh Microsoft. Ekstensi ini menyediakan IntelliSense, command dan fitur debugging untuk proyek React Native. Memiliki lebih dari 1,2 juta pemasangan hingga saat ini.
React-Native/React/Redux snippets for es6/es7, oleh EQuimper. Ekstensi ini memberikan snippets dalam sintaks ES6 / ES7 untuk React, React Native, Redux, dan storybook dalam sintaks ES6 / ES7. Memiliki 371k + instal hingga saat ini.
Vetur, oleh Pine Wu. Ekstensi ini memberikan penyorotan sintaksis, snippets, Emmet, linting, pemformatan, IntelliSense, dan dukungan debug untuk kerangka kerja Vue. Muncul dengan dokumentasi yang lengkap diterbitkan di GitBook. Memiliki lebih dari 4,2 juta pemasangan hingga saat ini.
Ember, oleh Felix Rieseberg. Ini memberikan dukungan command dan IntelliSense untuk Ember. Setelah instalasi, semua perintah ember cli tersedia melalui daftar command VS Code sendiri. Memiliki 18k + instal hingga saat ini.
Cordova Tools, oleh Microsoft. Ekstensi ini menawarkan dukungan untuk plugin Cordova dan kerangka kerja Ionic, dan juga menyediakan IntelliSense, debugging, dan fitur dukungan lainnya untuk proyek berbasis Cordova. Memiliki 272k + instalasi hingga saat ini.
jQuery Code Snippets, oleh Don Jayamanne. Ekstensi ini menyediakan lebih dari 130 snippets kode jQuery. Diaktifkan oleh awalan jq, dan memiliki 700k + pemasangan hingga saat ini.
8. Ekstensi Untuk Testing
Pengujian adalah bagian penting dari pengembangan sofware, terutama untuk proyek-proyek yang dalam tahap produksi. Berikut adalah beberapa ekstensi VS Code yang populer untuk pengujian.
Mocha sidebar, oleh maty. Ekstensi ini memberikan dukungan untuk pengujian menggunakan perpustakaan Mocha. Ekstensi ini membantu menjalankan tes langsung pada kode dan menunjukkan kesalahan sebagai dekorator. Memiliki 68k + instal hingga saat ini. Namun, perlu dicatat bahwa ekstensi ini memiliki sejumlah masalah yang belum terselesaikan pada saat penulisan.
ES6 Mocha Snippets, oleh Cory Noonan. Ekstensi ini memberikan snippets Mocha dalam sintaks ES6. Fokus ekstensi ini adalah untuk meningkatkan fungsi panah dan menghilangkan curlie jika memungkinkan. Dapat dikonfigurasi untuk memungkinkan titik koma, dan memiliki 36k + instalasi hingga saat ini.
Jasmine Code Snippets, oleh Charalampos Karypidis. Menawarkan potongan kode untuk kerangka uji Jasmine. Memiliki 30k + instal hingga saat ini. Sayangnya, ekstensi ini belum diperbarui dalam tiga tahun terakhir pada saat penulisan.
Protractor Snippets, oleh Budi Irawan. Memberikan snippets end-to-end testing untuk Protractor framework. Mendukung JavaScript dan Typescript, dan memiliki 18k+ instal hingga saat ini.
Node TDD, oleh Prashant Tiwari. Memberikan dukungan untuk pengembangan berbasis tes untuk proyek Node dan JavaScript. Ekstensi ini dapat memicu test build secara otomatis setiap kali source diperbarui. Memiliki 23k + instal hingga saat ini.
9. Ekstensi Berguna
Disini saya menempatkan sekelompok ekstensi VS CODE ke dalam kategori "Berguna", karena ekstensi berikut memang sangat berguna!
Quokka.js, oleh Wallaby.js. Alat debugging yang luar biasa yang menyediakan prototyping cepat untuk kode JavaScript. Tersedia dokumentasi yang sangat baik, dan memiliki lebih dari 641k instal.
Paste as JSON, oleh quicktype. Ekstensi ini memungkinkan anda untuk dengan cepat mengkonversi data JSON menjadi kode JavaScript, dan memiliki lebih dari 430 ribu pemasangan hingga saat ini.
Code Metrics, oleh Kiss Tamás. Ini adalah ekstensi luar biasa yang menghitung kompleksitas dalam kode JavaScript dan TypeScript. Ia memiliki lebih dari 233 ribu pemasangan hingga saat ini.
10. Extension Pack
Pada dasarnya, ini adalah koleksi ekstensi VS Code terkait yang dibundel ke dalam satu paket untuk kemudahan instalasi. Inilah beberapa yang saya rekomendasikan:
Nodejs Extension Pack, oleh Wade Anderson. Paket ini berisi ESLint, npm, snippets JavaScript (ES6), Search node_modules, NPM IntelliSense, dan Path IntelliSense. Memiliki lebih dari 293 ribu pemasangan.
VS Code for Node.js – Development Pack, oleh NodeSource. Yang ini memiliki NPM IntelliSense, ESLint, Debugger untuk Chrome, Code Metrics, Docker dan Import Cost. Memiliki lebih dari 103 ribu pemasangan hingga saat ini.
Vue.js Extension Pack, oleh Muhammad Ubaid Raza. Ini adalah koleksi ekstensi Vue dan JavaScript. Saat ini berisi sekitar 12 ekstensi VS COde, beberapa di antaranya belum disebutkan di sini, seperti auto-rename-tag dan auto-close-tag. Ia memiliki lebih dari 156 ribu pemasangan hingga saat ini.
Ionic Extension Pack, oleh Loiane Groner. Paket ini berisi sejumlah ekstensi VS Code untuk pengembangan Ionic, Angular, RxJS, Cordova dan HTML. Ia memiliki sekitar 75 ribu pemasangan hingga saat ini.
Banyaknya ekstensi VS Code menjadikannya pilihan populer bagi pengembang JavaScript. Tidak pernah lebih mudah untuk menulis kode JavaScript ini secara efisien. Ekstensi seperti ESLint membantu anda menghindari kesalahan umum, sementara yang lain seperti Debugger for Chrome membantu men-debug kode dengan lebih mudah. Ekstensi Node.js, dengan fitur IntelliSense mereka, membantu Amengimpor modul dengan benar, dan ketersediaan alat seperti Live Server dan REST client mengurangi ketergantungan anda pada alat eksternal untuk menyelesaikan pekerjaan. Semua alat ini akan membuat proses kerja jauh lebih mudah.
EmoticonEmoticon