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