Ekstensi kode studio visual javascript

Visual Studio Code adalah editor kode hebat yang hadir dengan fitur JavaScript dan TypeScript seperti pemfaktoran ulang dasar di luar kotak. Namun, kekuatan sebenarnya adalah pasar ekstensi yang luar biasa. Ada ekstensi untuk hampir semua hal yang mungkin ingin Anda lakukan di IDE (Lingkungan Pengembangan Terpadu), dan mereka dapat membuat VS Code jauh lebih baik

Sayangnya, menemukan ekstensi yang tepat dan mengonfigurasi VS Code dapat memakan waktu. Banyak pengembang lebih menyukai pengalaman out-of-the-box yang disediakan oleh IDE seperti Webstorm. Posting blog ini menunjukkan bagaimana ekstensi Kode Visual Studio dapat membantu Anda meningkatkan pengalaman IDE untuk JavaScript. Ini mencakup

Anda dapat dengan mudah menginstal 25 ekstensi yang mengubah Visual Studio Code menjadi IDE JavaScript lengkap dengan Paket Ekstensi IDE JavaScript. Tema ikon atau warna dan peta pintasan keyboard tidak tercakup di sini, juga tidak termasuk dalam paket ekstensi karena lebih bergantung pada preferensi pribadi daripada kebanyakan ekstensi

Mari masuk ke fitur yang berbeda dan lihat apa yang mungkin di VS Code hanya dengan beberapa ekstensi

Penyelesaian dan Cuplikan Kode

Fitur penyelesaian kode (IntelliSense) dapat membuat penulisan kode menjadi lebih cepat dan mudah. Visual Studio Code menyediakan IntelliSense untuk JavaScript dan TypeScript secara default dan berisi dukungan Emmet yang kuat untuk memperluas cuplikan

Salah satu tren terbaru dalam penyelesaian kode adalah asisten AI. Namun, pengalaman saya dengan asisten penyelesaian kode AI seperti GitHub Copilot dan Tabnine sejauh ini tercampur, dan oleh karena itu saya tidak memasukkannya ke dalam paket ekstensi, tetapi mungkin bekerja dengan baik untuk Anda

Berikut adalah beberapa ekstensi cuplikan yang dapat meningkatkan produktivitas Anda

Ekstensi snippet ES7 menyediakan banyak snippet harian yang dapat diperluas. Misalnya, mendefinisikan impor dan ekspor, membuat metode dan loop, dan mengembalikan Janji. Ekstensi ini juga berisi banyak cuplikan untuk React dan GraphQL

Dengan ekstensi Emmet Live, Anda dapat melihat keluaran Emmet Anda sambil menyusun singkatan Emmet. Anda dapat memulainya dengan perintah Emmet Live

Saat menulis tes atau membuat maket, seringkali butuh waktu untuk menghasilkan data palsu yang bagus. Anda dapat menggunakan ekstensi vscode-random untuk menghasilkan berbagai jenis data acak, seperti angka, lokasi, email, IP, nama, dan nilai waktu dan waktu

Linting, Pemeriksaan Ejaan, dan Petunjuk

Waktu terbaik untuk mendapatkan umpan balik tentang kode Anda adalah saat mengedit, mis. e. , saat Anda dapat mengubah kode dengan cepat dan belajar sambil jalan. Dengan mengintegrasikan linting, pemeriksaan ejaan, dan saran lainnya ke dalam proses pengeditan, Anda menghindari beberapa pemeriksaan pra-komitmen yang lebih lama dan perjalanan bolak-balik permintaan tarik

Sangat mudah untuk salah ketik dan kesalahan ejaan kecil untuk masuk ke nama variabel dan fungsi, string, komentar, dll. Ekstensi Pemeriksa Ejaan Kode menyoroti kesalahan tersebut dan seringkali dapat memberikan ejaan yang benar sebagai perbaikan

ESLint adalah linter JavaScript yang paling umum digunakan. Ini membantu Anda "menemukan dan memperbaiki masalah dalam kode JavaScript Anda. " ESLint sangat dapat dikembangkan dan dikonfigurasi, dan banyak tim memiliki aturan sendiri untuk proyek mereka. Ekstensi ESLint menunjukkan kesalahan dan peringatan langsung di editor Anda dan memungkinkan Anda memperbaikinya dengan cepat. Anda juga dapat mengonfigurasinya untuk memperbaiki masalah apa pun secara otomatis saat disimpan

Ekstensi Lensa Kesalahan menyoroti dan menampilkan kesalahan, peringatan, dan pesan informasi langsung di editor. Dengan itu, Anda tidak perlu mengambil langkah ekstra untuk mencari tahu apa arti garis bawah yang berlekuk-lekuk - itu tepat di depan Anda. Jika informasi menjadi berlebihan, Anda dapat dengan mudah mengaktifkan dan menonaktifkannya untuk berbagai jenis pesan dengan perintah Error Lens: Toggle...

Pemformatan, Tindakan Kode, dan Pemfaktoran Ulang

Kode Visual Studio hadir dengan pemfaktoran ulang dasar dan perbaikan cepat seperti Rename, Extract Method dan Extract Variable. Pengalaman pengeditan dapat lebih ditingkatkan dengan ekstensi

Memformat kode secara manual sangat memakan waktu dan rawan kesalahan. Dengan Prettier, pemformat kode standar de-facto dunia JavaScript, Anda dapat memformat kode Anda secara otomatis. Anda bahkan dapat mengonfigurasi ekstensi Prettier VS Code untuk memformat kode sumber saat Anda menyimpannya

Ekstensi Ubah Kasus menambahkan berbagai perintah untuk mengubah huruf besar-kecil dari teks yang dipilih, mis. g. , ke dalam kasing unta, kasing ular, kasing Pascal, dll. Semua perintah memiliki awalan Change Case

Asisten JS yang saya kembangkan menambahkan 60+ pemfaktoran ulang, perbaikan cepat, dan tindakan kode ke VS Code. Ini berisi React refactoring, modernisasi ECMAScript, sintaks dan konversi elemen bahasa, tindakan untuk ekspresi logis dan aliran kontrol, dan pembersihan kode

Dukungan Editor untuk Jenis File Tambahan

Saat Anda bekerja dengan JavaScript dan TypeScript, ada banyak jenis file lain yang relevan. Visual Studio Code sudah memiliki dukungan pengeditan untuk JSON, HTML, CSS, dan Markdown. Ekstensi berikut menambahkan dukungan editor yang lebih ditingkatkan

Ekstensi npm memvalidasi Node yang diinstal. modul js yang ditentukan dalam file package.json

Ekstensi Pratinjau SVG melakukan hal itu. tampilkan pratinjau untuk .svg file. Anda dapat menggeser dan memperbesar gambar di pratinjau, dan pembaruan otomatis saat Anda mengedit sumber SVG

TOML adalah format file konfigurasi yang bertujuan sederhana dan mudah dibaca. Ekstensi TOML Bahkan Lebih Baik menambahkan dukungan editor penuh, termasuk penyorotan sintaks, pelipatan, navigasi, dan pemformatan

Mengatur Komentar, TODO, dan Bookmark

Dalam proyek pengembangan yang lebih besar yang berlangsung bertahun-tahun dan melibatkan banyak pengembang, tetap teratur seputar komentar dan item TODO menjadi semakin penting. Ekstensi berikut dapat membantu dengan itu

Ekstensi Better Comments menampilkan berbagai jenis komentar dengan warna berbeda. Ini mendukung awalan seperti !, ?, dan Error Lens: Toggle...0

TODO dan FIXME mudah dilupakan dan hilang. Ekstensi Pohon Todo memindai file di ruang kerja Anda untuk anotasi TODO dan FIXME dan mengaturnya dalam tampilan sidebar. Anda dapat dengan mudah menjelajahinya berdasarkan folder dan mengunjungi kembali barang-barang penting yang menarik perhatian Anda

Dengan ekstensi Bookmark, Anda dapat menyimpan dan melabeli lokasi kode sumber penting dan mengaturnya di panel sidebar. Ini dapat membantu saat Anda menjelajahi basis kode yang rumit atau saat Anda memiliki lokasi yang sering Anda kunjungi

Pengujian

Menulis dan menjalankan tes adalah kegiatan pengembangan yang penting. Secara khusus, pengujian unit yang berjalan di IDE sangat membantu untuk mendapatkan umpan balik langsung. Ekstensi berikut menambahkan dukungan runner pengujian ke VS Code

Test Explorer adalah sekumpulan ekstensi yang mengintegrasikan pengujian dengan mulus ke dalam VS Code. Ekstensi Test Explorer UI-nya menambahkan panel samping untuk menjalankan pengujian dan melihat hasilnya, dan Bilah Status Test Explorer menambahkan jumlah pengujian ke bilah status

Komponen UI menampilkan informasi yang dihasilkan oleh adaptor pengujian. Adaptor mana yang Anda perlukan untuk pengujian bergantung pada kerangka pengujian Anda. Untuk JavaScript, ekstensi adaptor pengujian untuk kerangka pengujian berikut tersedia

Visual Studio Code telah menambahkan kemampuan pengujian asli di versi 1. 59. Anda dapat mengaktifkannya di Test Explorer dengan mengatur Error Lens: Toggle...1 ke Error Lens: Toggle...2 di pengaturan VS Code

Men-debug

Visual Studio Code hadir dengan debugger JavaScript yang luar biasa. Itu dapat terhubung ke Node.js. js, , jadi dalam banyak kasus, tidak diperlukan ekstensi tambahan untuk debugging JavaScript

Kontrol Versi

Git adalah sistem kontrol versi (VCS) yang paling banyak digunakan, dan ada ekstensi yang bagus untuk VS Code. Anda juga dapat menemukan ekstensi untuk VCS lain seperti Subversion di pasar VS Code

Ekstensi GitLens menambahkan beberapa panel ke sidebar kontrol sumber dan menyempurnakan editor dengan overlay informasi. Panel sidebar membantu Anda mengelola cabang, simpanan, komit, riwayat file, jarak jauh, dan ekstensi editor menyertakan tampilan kesalahan, indikasi perubahan, lensa kode kepengarangan, dan banyak lagi. GitLens adalah ekstensi penting yang membuat bekerja dengan Git di VS Code jauh lebih mudah

Ekstensi Git Graph menunjukkan riwayat Git secara visual di panel editor. Anda dapat membukanya dengan perintah "View Git Graph". Dalam tampilan grafik, Anda dapat menjelajahi setiap komitmen dan melakukan banyak operasi Git sehari-hari. Misalnya, Anda dapat memeriksa cabang dan melakukan, membuat cabang, melakukan cherry-pick, melakukan penggabungan, dll

Database, REST API, dan Klien Docker

Mengembangkan full-stack JavaScript sering kali berarti bekerja dengan sistem eksternal seperti database, REST API, dan Docker. Ekstensi berikut menambahkan klien ke VS Code

Ekstensi Klien Database memungkinkan Anda terhubung ke MySQL/MariaDB, PostgreSQL, SQLite, Redis, dan ElasticSearch. Anda dapat menjelajahi database di panel sidebar, membuka tabel database sebagai panel editor, dan menjalankan kueri SQL kustom. Konten tabel database dapat diedit. Setiap perubahan yang Anda buat segera disimpan dalam database

Ekstensi Thunder Client mengintegrasikan klien untuk REST API ke dalam VS Code. Ini adalah alternatif ringan untuk Postman. Anda dapat mengirim segala jenis permintaan Error Lens: Toggle..._3, melihat data respons, dan mengatur permintaan Anda dalam koleksi

Bekerja dengan wadah telah menjadi bagian penting dari pengembangan sehari-hari bagi banyak insinyur perangkat lunak. Dengan ekstensi Docker, Anda dapat menjelajahi wadah Docker yang sedang berjalan, mendapatkan dukungan editor untuk file Docker, dan banyak lagi

Bonus

Ini adalah ekstensi bonus kecil yang menurut saya sangat berguna

Anda dapat mengambil tangkapan layar yang indah dari kode Anda dalam waktu singkat dengan ekstensi CodeSnap. Mulailah dengan perintah Error Lens: Toggle..._4, pilih kode yang ingin Anda screenshot, dan klik tombol lense

Kesimpulan

Saya harap postingan tersebut memberi Anda beberapa ide untuk ekstensi yang dapat meningkatkan pengalaman VS Code Anda. Dengan Paket Ekstensi IDE JavaScript, Anda dapat menginstal semuanya dan kemudian menonaktifkan atau menghapus instalan yang tidak sesuai dengan kebutuhan Anda

Ekstensi mana yang terbaik untuk JavaScript di VS Code?

Bagaimana cara menambahkan JavaScript dalam Kode Visual Studio?

Bisakah saya menjalankan JavaScript dalam Visual Studio Code?

Apa ekstensi untuk kode JavaScript?