Ekstensi untuk javascript di vscode

Ekstensi ke IDE Anda sangat berharga untuk mempercepat pekerjaan Anda tanpa mengurangi kualitas keluaran Anda. Mengingat Visual Studio Code adalah IDE paling populer, berikut adalah 20 ekstensi VSCode yang akan membuat Anda menjadi developer yang lebih produktif. Ekstensi ini sebagian besar berlaku untuk pengembang web, tetapi ada beberapa ekstensi tujuan umum yang juga bermanfaat bagi orang lain

Berikut adalah ekstensi VSCode yang akan kami bahas

Pengaturan Sinkronisasi

Sinkronisasi Pengaturan menghemat banyak waktu Anda saat memasang ekstensi di seluruh perangkat

Sebelum mulai memasang ekstensi kiri dan kanan, ada baiknya mengetahui keberadaan Settings Sync. Ini memungkinkan Anda untuk menyinkronkan hampir semua yang Anda sesuaikan di VSCode ke Github, dari pengaturan hingga pintasan keyboard ke ekstensi VSCode lainnya

Dengan cara ini, Anda akan memiliki akses ke IDE pilihan Anda dari perangkat mana pun yang Anda inginkan, alih-alih harus memprogram dari lingkungan vanilla VSCode pada perangkat baru atau harus mengatur semuanya secara manual lagi

Server Langsung

Segera lihat perubahan kode yang tercermin di browser

Ini adalah salah satu ekstensi favorit saya. Live Server meluncurkan server pengembangan lokal dengan fitur live reload baik untuk halaman statis maupun dinamis

Setiap kali Anda menyimpan kode, Anda akan langsung melihat perubahan yang tercermin di browser. Anda akan jauh lebih cepat menemukan kesalahan dan jauh lebih mudah untuk melakukan beberapa percobaan cepat dengan kode Anda

Terpencil - SSH

Gunakan mesin jarak jauh apa pun dengan server SSH

Ekstensi Remote - SSH memungkinkan Anda menggunakan mesin jarak jauh apa pun dengan server SSH sebagai lingkungan pengembangan Anda. Ini membuatnya lebih mudah untuk mengembangkan dan/atau memecahkan masalah dalam berbagai skenario

Anda juga tidak memerlukan kode sumber apa pun di mesin lokal Anda, karena ekstensi menjalankan perintah dan ekstensi lainnya langsung di mesin jarak jauh

Lebih cantik

Habiskan lebih sedikit waktu untuk memformat kode Anda

Prettier adalah pemformat kode berpendirian yang bekerja sangat baik jika Anda memiliki banyak orang yang mengerjakan satu proyek, karena ekstensi menerapkan gaya yang konsisten

Anda dapat mengaturnya sehingga memformat kode Anda setiap kali Anda menyimpannya, secara signifikan mengurangi jumlah waktu yang Anda perlukan untuk memformat kode Anda

Pewarna Pasangan Braket

Semua orang menyukai warna yang serasi

Petunjuknya ada di judul, tetapi Bracket Pair Colorizer memberikan tanda kurung buka dan tutup dengan warna yang serasi, membuatnya lebih mudah untuk mengetahui tanda kurung mana yang termasuk.

Karakter braket khusus juga dapat dikonfigurasi, dan Anda juga dapat menambahkan warna latar belakang ke lingkup aktif

Tag Ganti Nama Otomatis

Ganti nama tag secara otomatis

Sementara VSCode secara inheren menyoroti tag yang cocok dan segera menambahkan tag penutup setiap kali Anda mengetik tag pembuka, Tag Ganti Nama Otomatis secara otomatis mengganti nama tag yang Anda ubah

Ekstensi berfungsi untuk HTML, XML, PHP, dan JavaScript, dan menghilangkan kebutuhan untuk mengubah nama tag Anda dua kali

sunting. beberapa orang di komentar menyebutkan bahwa Tag Ganti Nama Otomatis cukup bermasalah, jadi lanjutkan dengan hati-hati

GitLens

Tingkatkan kemampuan Git Anda

GitLens meningkatkan kemampuan Git dari Visual Studio Code. Ini adalah ekstensi hebat yang memungkinkan Anda melihat siapa, mengapa, dan bagaimana baris kode berubah dari waktu ke waktu (di antara banyak fitur lainnya)

GitLens adalah ekstensi yang sangat dapat disesuaikan. Jika Anda tidak menyukai pengaturan tertentu, Anda dapat dengan mudah mematikannya di pengaturan

Sejarah Git

Dapatkan visual yang bagus dari log git

Mirip dengan GitLens, Git History adalah ekstensi VSCode yang memberikan visual dari log git. Anda tidak lagi harus melihat melalui git log di terminal

Ekstensinya juga cukup lengkap. Ini memungkinkan Anda untuk membandingkan cabang, komit, dan file di seluruh komit. Anda juga dapat mencari avatar Github, yang cukup rapi

Intip CSS

Perluas file HTML Anda untuk melihat kode CSS Anda

Ekstensi ini sangat berharga bagi pengembang front-end. Terinspirasi oleh fitur serupa di IDE Brackets, CSS Peek memungkinkan Anda memperluas file HTML dan ejs untuk menampilkan kode CSS/SCSS/LESS di dalam kode sumber

Ini juga memungkinkan Anda untuk dengan cepat melompat ke kode CSS yang tepat jika Anda mengetahui nama kelas atau ID

Cuplikan Kode JavaScript

Lebih banyak fungsi JS

Sementara VSCode menyertakan JS IntelliSense bawaan, Cuplikan Kode JS meningkatkan pengalaman itu dengan menambahkan banyak pemicu impor/ekspor, pembantu kelas, dan pemicu metode

Ekstensi ini mendukung JS, TypeScript, JS React, TS React, HTML, dan Vue. Di VSCode Marketplace, potongan kode untuk ragam lainnya, seperti Angular, juga sudah tersedia

Merak

Ubah warna instance VSCode Anda

Ini yang lucu. Peacock memungkinkan Anda mengubah warna lingkungan Visual Studio Code Anda, sehingga Anda dapat dengan cepat mengidentifikasi instans mana yang baru saja Anda alihkan

Warnai

Lihat warna apa yang Anda gunakan di panduan gaya Anda

Tetap dengan warna, Colorize langsung memvisualisasikan warna CSS di CSS/SASS/Less/. file. Ini membuatnya sangat mudah untuk melihat sekilas warna mana yang Anda gunakan di mana

Pemeriksa Ejaan Kode

Tidak ada lagi kesalahan ejaan

Meskipun tidak penting untuk mengancam jiwa, saya lebih suka kode saya tidak memiliki kesalahan ejaan. Pemeriksa Ejaan Kode menggarisbawahi kata-kata yang tidak dikenali dalam file kamusnya

Ekstensi tersedia dalam berbagai bahasa dan mendukung jargon seperti istilah medis

Debugger untuk Chrome

Debug kode JS Anda di VScode

Dikembangkan oleh Microsoft, Debugger untuk Chrome memungkinkan Anda untuk men-debug kode JS Anda di VSCode. Berlawanan dengan debugger di IDE lain, ini sangat mulus

Anda dapat menyetel breakpoint, menelusuri kode, men-debug skrip yang ditambahkan secara dinamis, dan banyak lagi

Font Ikon

Gunakan ikon

Icon Fonts menawarkan cuplikan untuk berbagai font ikon, termasuk paket ikon Font Awesome v5 yang populer

Bagi Anda yang tidak menggunakan VSCode, paket ini juga tersedia untuk Atom dan Sublime Text

Log Konsol Turbo

Secara otomatis membuat pesan log yang berarti

Ekstensi Log Konsol Turbo mengotomatiskan proses pembuatan pesan log yang bermakna. Itu membuat debug lebih mudah, karena Anda akan memiliki beberapa output konsol yang berguna untuk mencari tahu apa yang salah

Sorotan TODO

Segera temukan TODO di kode Anda

saya akui. Saya bersalah karena menulis TODO di komentar saya untuk kemudian melupakannya sama sekali. Sorotan TODO membuatnya lebih menonjol

Anda dapat mengaktifkan highlight dan juga dapat membuat daftar semua anotasi yang disorot dan mengungkapkannya dari file yang sesuai

ikon vscode

Tunggu, bukankah semua orang menyukai ikon?

Anda tidak akan berpikir ikon membuat perbedaan besar, tetapi mereka benar-benar melakukannya (setidaknya untuk saya). Ikon VSCode menambahkan percikan warna dan ikon kecil yang lucu ke IDE Anda yang saya sukai

Pratinjau Regex

Buat pratinjau ekspresi reguler Anda

Ekspresi reguler bisa menjadi teka-teki yang tepat. Regex Previewer memberi Anda dokumen sampingan yang cocok dengan regex Anda

Ekstensi memberikan banyak contoh untuk dicocokkan, sehingga menjadi lebih mudah untuk menulis regex dengan cepat dan akurat untuk berbagai kasus penggunaan

Bookmark

Tambahkan bookmark ke kode Anda

Meskipun VSCode memiliki nomor baris, Bookmarks memungkinkan Anda untuk menambahkan bookmark ke kode Anda, membantu Anda menavigasi dengan cepat dan melompat bolak-balik dengan mudah

Selain itu, ini memungkinkan Anda untuk memilih wilayah kode di antara kode yang di-bookmark, yang cukup berguna untuk sesuatu seperti analisis file log

---

Ini adalah 20 ekstensi VSCode untuk meningkatkan produktivitas pemrograman Anda tanpa mengurangi kualitas. Jika Anda menikmati artikel ini dan berpikir orang lain juga dapat memperoleh manfaat darinya, jangan ragu untuk membagikannya di media sosial menggunakan tombol di bagian atas halaman.

Ekstensi mana yang terbaik untuk JavaScript di VS Code?

Bagaimana cara mengaktifkan JavaScript di VS Code?

Apa ekstensi untuk JavaScript?

Bagaimana cara menambahkan JavaScript dalam Kode Visual Studio?