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 Show
Berikut adalah ekstensi VSCode yang akan kami bahas Pengaturan SinkronisasiSinkronisasi Pengaturan menghemat banyak waktu Anda saat memasang ekstensi di seluruh perangkatSebelum 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 LangsungSegera lihat perubahan kode yang tercermin di browserIni 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 - SSHGunakan mesin jarak jauh apa pun dengan server SSHEkstensi 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 cantikHabiskan lebih sedikit waktu untuk memformat kode AndaPrettier 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 BraketSemua orang menyukai warna yang serasiPetunjuknya 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 OtomatisGanti nama tag secara otomatisSementara 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 GitLensTingkatkan kemampuan Git AndaGitLens 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 GitDapatkan visual yang bagus dari log gitMirip 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 CSSPerluas file HTML Anda untuk melihat kode CSS AndaEkstensi 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 JavaScriptLebih banyak fungsi JSSementara 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 MerakUbah warna instance VSCode AndaIni 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 WarnaiLihat warna apa yang Anda gunakan di panduan gaya AndaTetap 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 KodeTidak ada lagi kesalahan ejaanMeskipun 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 ChromeDebug kode JS Anda di VScodeDikembangkan 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 IkonGunakan ikonIcon 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 TurboSecara otomatis membuat pesan log yang berartiEkstensi 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 TODOSegera temukan TODO di kode Andasaya 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 vscodeTunggu, 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 RegexBuat pratinjau ekspresi reguler AndaEkspresi 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 BookmarkTambahkan bookmark ke kode AndaMeskipun 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?10 Ekstensi VS Code Terbaik untuk JavaScript . Cuplikan kode JavaScript (ES6). ESLint DotEnv Penguat JavaScript Lebih cantik Tailwind CSS IntelliSense Sortir Baris GitLens Bagaimana cara mengaktifkan JavaScript di VS Code?Setelah pemasangan ekstensi pelari kode, buka Kode JavaScript di VSCode. Tekan shortcut CTRL+ALT+N atau tekan F1 lalu tulis Run Code untuk menjalankan kode .
Apa ekstensi untuk JavaScript?File JavaScript memiliki ekstensi file . js .
Bagaimana cara menambahkan JavaScript dalam Kode Visual Studio?html Halaman HTML di sisi kanan editor kode VS tempat kita akan menulis kode JavaScript. Untuk menulis kode JavaScript di halaman HTML, cukup ketik “. ” (Emmet) dan tekan tombol enter |