Visual Studio Code adalah salah satu editor kode paling populer yang tidak hanya open source tetapi juga lintas platform, ringan, dan cepat. Meskipun VS Code cukup kuat di luar kotak berkat teknologi Intellisense dan ekstensi yang disertakan seperti Emmet, Anda dapat lebih meningkatkan fungsionalitas dan kegunaannya dengan menginstal ekstensi tambahan. Berikut adalah beberapa ekstensi VScode terbaik yang saya temukan dari penggunaan Visual Studio Code selama beberapa tahun terakhir ini.
Ekstensi Kode Visual Studio Terbaik
1. Pengaturan Sinkronisasi
Settings Sync adalah salah satu yang terbaik dan harus memiliki ekstensi VS Code yang harus dimiliki oleh setiap pengguna. Alasannya, Settings Sync akan menyinkronkan semua pengaturan VS Code kustom, key binding, tema, dan daftar plugin dengan GitHub. Ini menghilangkan kebutuhan untuk menginstal ulang semua ekstensi dan tema dan mengkonfigurasinya kembali setiap kali Anda menginstal VS Code atau saat menggunakan VS Code pada banyak sistem. Hal terbaik tentang Settings Sync adalah penggunaannya yang cukup mudah. Faktanya, setelah Anda menautkannya dengan GitHub, Anda dapat mengunggah atau menyinkronkan pengaturan hanya dengan satu pintasan keyboard. Jika perlu, Anda dapat mengonfigurasinya untuk mengunggah atau mengunduh pengaturan secara otomatis.
2. Server Langsung
Jika Anda seorang pengembang web atau hanya seseorang yang bekerja dengan teknologi web seperti CSS, JavaScript, PHP, HTML, dll., Maka Live Server harus dimiliki. Apa yang Live Server lakukan adalah membuat server lokal dalam VS Code dan memungkinkan Anda membuka halaman pengembangan hanya dengan dua klik di browser pilihan Anda. Tidak perlu membuka lokasi file secara manual dan membukanya dari sana. Belum lagi, saat Live Server aktif dan berfungsi, halaman akan otomatis dimuat ulang setiap kali Anda menyimpan dokumen. Jadi, jika Anda seorang pengembang web, cobalah. Anda tidak akan kembali.
3. Buka Di Browser
Seperti yang dapat Anda ketahui dari namanya sendiri, Open in Browser extension memungkinkan Anda untuk membuka file yang didukung di browser default atau di browser pilihan Anda dengan satu klik. Meskipun tidak sekuat atau sekaya fitur ekstensi Live Server, Buka di Browser membantu Anda melihat pratinjau dokumen web dengan cepat tanpa membuat server latar belakang. Belum lagi, Open in Browser extension cukup ringan dan melakukan apa yang dikatakannya akan dilakukan tanpa cegukan.
4. Lebih cantik
Prettier adalah salah satu ekstensi favorit saya yang segera saya pasang. Seperti namanya, Prettier membuat kode terlihat cantik dan meningkatkan keterbacaan dengan memformatnya dengan benar sesuai dengan standar resmi dan industri. Setelah menginstal ekstensi, Anda dapat mendandani kode Anda dengan menekan pintasan keyboard atau mengonfigurasi ekstensi dari halaman pengaturan VS Code untuk memformat kode secara otomatis saat disimpan. Jika perlu, Anda dapat mengubah cara Prettier memformat kode Anda dengan mengubah berbagai pengaturan seperti spasi tab, spasi braket, koma tambahan, lebar cetak, pembungkusan, dll., Dari halaman pengaturan itu sendiri.
5. Info Warna
Info Warna adalah ekstensi yang sangat sederhana namun efektif yang menunjukkan pratinjau besar dan informasi tambahan tentang warna yang Anda gunakan di CSS. Jika Anda bertanya-tanya, ya, VS Code menunjukkan pratinjau kecil dari warna yang Anda gunakan. Namun, itu tidak terlalu membantu, terutama dalam tema gelap. Informasi tambahan yang ditampilkan oleh Info Warna termasuk namun tidak terbatas pada nilai HSL, nilai RGB, nilai alfa, beberapa jenis pratinjau warna, dll. Info Warna mendukung CSS, SASS, SCSS, dan LESS.
6. Todo Highlighter
Pernahkah Anda ingin membuat beberapa perubahan, memperbarui, atau menambahkan kode tetapi lupa? Pasang Todo Highlighter dan Anda tidak perlu mengalami cobaan itu lagi. Jika Anda pernah menggunakan fitur Todo di setiap IDE (Integrated Development Environment), Todo Highlighter di VS Code bekerja dengan cara yang sama. Cukup tambahkan Todo seperti biasa dan kode tersebut akan menonjol dari kode biasa Anda dan menarik perhatian Anda.
7. Pratinjau Regex
Tidak peduli berapa kali saya menggunakan Ekspresi Reguler, saya masih bingung dengannya. Terus terang, saya tidak bisa menulis Regex saya sendiri dengan benar. Salah satu alasannya adalah saya tidak dapat memverifikasi regex saya dengan cepat. Di sinilah Regex Preview berperan. Setelah menginstal Regex Preview, itu akan menampilkan pratinjau regex Anda secara berdampingan. Jika Anda bermain dengan banyak ekspresi reguler maka cobalah Pratinjau Regex dan lihat apakah itu sesuai dengan kebutuhan Anda.
8. Lensa Git
VS Code memiliki dukungan bawaan yang tepat untuk Git dan membuatnya mudah digunakan. Git Lens meningkatkan kemampuannya dan meningkatkan kemampuan Git bawaan dari VS Code. Apa yang membuat Git Lens istimewa adalah memudahkan untuk menjelajahi repositori, menjelajahi riwayat file, memvisualisasikan penulisan kode menggunakan anotasi kesalahan Git dan lensa kode, menyoroti perubahan terkini, melakukan pencarian, membandingkan cabang yang berbeda, dll. Jika Anda menggunakan Git secara ekstensif, cobalah Git Lens, membuat alur kerja Anda sangat berbeda.
9. Path Intellisense
Dalam pengembangan web, sangat umum untuk menautkan berbagai jenis file seperti CSS, JS dalam dokumen seperti HTML dan PHP. Meskipun tidak sulit untuk mengetik di jalur file, sedikit bantuan dalam bentuk pelengkapan otomatis bisa sangat membantu. Path Intellisense melakukan hal itu. yaitu, ini melengkapi nama dan jalur file secara otomatis sehingga Anda tidak perlu berpikir dua kali tentang jalur atau nama file.
10. Mengintip CSS
VS Code memiliki fitur rapi yang disebut Go To Definition dan Go To Type Definition yang membawa Anda ke deklarasi atau definisi tipe simbol. CSS Peek mengambil takik dan menunjukkan pratinjau CSS yang digunakan dalam dokumen Anda. Ini sangat berguna karena Anda tidak perlu meninggalkan dokumen Anda saat ini hanya untuk melihat apa yang Anda lakukan dengan kelas atau ID CSS tertentu. Jika Anda seorang desainer web maka CSS Peek adalah salah satu ekstensi yang harus dimiliki untuk VS Code.
11. Penurunan Harga Semua dalam Satu
Markdown All in One memungkinkan Anda dengan cepat membuat dan mengedit file readme atau rich text menggunakan Markdown tepat di dalam VS Code. Hal terbaik tentang Markdown All in One adalah ia dapat menampilkan pratinjau langsung dan penggunaannya juga sangat intuitif.
12. Penanda
Jika Anda menulis banyak kode, wajar jika Anda berpindah di antara beberapa bagian penting berulang kali. Meskipun VS Code memiliki nomor baris, itu membuat hidup Anda lebih mudah jika Anda dapat menandai baris penting tersebut. Ekstensi bookmark melakukan persis seperti itu sehingga Anda dapat dengan mudah menandai posisi penting dan menavigasi di antara mereka dengan cepat dan mudah.
13. Pewarna Pasangan Braket
Saya baru-baru ini menemukan ekstensi Bracket Pair Colorizer dan dengan cepat menjadi salah satu ekstensi favorit saya di VS Code. Seperti yang dapat Anda ketahui dari namanya sendiri, Bracket Pair Colorizer memudahkan untuk mengidentifikasi tanda kurung yang cocok. Tidak hanya itu akan mencocokkan tanda kurung dengan warna tetapi juga akan menyorot seluruh blok kode di dalam tanda kurung sehingga Anda akan tahu di mana Anda berada. Percayalah, saat Anda membuat loop bersarang atau pernyataan if, Bracket Pair Colorizer akan banyak membantu Anda.
Semoga membantu. Jika Anda merasa saya melewatkan salah satu ekstensi VS Code favorit Anda, maka bagikan di bagian komentar di bawah.
