Teknotes.id – Ekstensi sangat berguna untuk membantu pengembang menulis kode yang lebih cepat, lebih mudah, dan lebih konsisten. Ekstensi Visual Studio Code memungkinkan Anda untuk menambahkan alat, bahasa, debugger, dan banyak lagi.
Perlu diingat bahwa Visual Studio Code adalah open-source dan gratis tanpa perlu mengeluarkan biaya. Ini memiliki komunitas pengembang yang berdedikasi yang terus bekerja untuk meningkatkan perangkat lunak.
Pada artikel ini saya telah menulis 15 Ekstensi Visual Studio Code Terbaik untuk membantu web developer yang akan membuat menjadi lebih produktif.
Daftar Isi
1. Live Server
Setiap kali Anda menyimpan kode, Anda akan langsung melihat perubahan yang ditampilkan di browser. Ini berarti jauh lebih cepat dalam menemukan kesalahan dan jauh lebih mudah untuk melakukan beberapa eksperimen cepat dengan kode Anda.
Live Server meluncurkan server pengembangan lokal dengan fitur live reload baik untuk halaman statis dan dinamis. Ini adalah salah satu ekstensi yang saya gunakan.
2. Quokka.js
Jika Anda sedang membuat proyek dengan bahasa pemrograman JavaScript atau TypeScript, maka Anda wajib menginstal ekstensi ini. Ekstensi ini bertujuan untuk mempercepat pengembangan dengan menampilkan nilai runtime dalam IDE saat membuat kode.
Ini adalah ekstensi yang sederhana dan ringan, ini cocok untuk digunakan untuk pengembang berpengalaman dan pemula. Ini gratis untuk digunakan, tetapi jika Anda seorang profesional, Anda juga dapat membeli lisensi Pro yang memungkinkan Anda memodifikasi nilai runtime tanpa harus mengubah kode Anda.
3. Code Spell Checker
Jika Anda tidak menguasai bahasa Inggris, maka ekstensi ini cocok digunakan untuk memeriksa kesalahan ejaan ketika membuat kesalahan ketik. Code Spell Checker menggaris bawahi kata-kata yang tidak dikenali dalam file kamusnya. Ekstensi ini tersedia dalam berbagai bahasa.
4. GitLens
GitLens meningkatkan kemampuan Git dari Visual Studio Code, ini adalah ekstensi yang memungkinkan Anda untuk melihat siapa, mengapa, dan bagaimana baris kode telah berubah dari waktu ke waktu. Ini adalah ekstensi yang sangat dapat di andalkan dan disesuaikan.
Anda dapat menelusuri dan menjelajahi riwayat file, melihat anotasi kesalahan git untuk setiap baris file, dan bahkan menambahkan anotasi hover perubahan (diff), yang semuanya sepenuhnya dapat disesuaikan.
5. Prettier
Prettier adalah formater kode yang bekerja sangat baik yang dapat merapikan kode yang acak-acakan menjadi lebih terstruktur dan rapi, karena ekstensi ini memberlakukan gaya yang konsisten.
Anda dapat mengaturnya sehingga memformat kode Anda setiap kali Anda menyimpannya, secara signifikan mengurangi jumlah waktu yang Anda butuhkan untuk memformat kode Anda. Ini adalah ekstensi andalan saya untuk merapikan kode.
6. VSCode Icons
Jika Anda bosan dengan tampilan icon itu-itu saja, maka ekstensi ini cocok untuk menghilangkan kebosanan itu. Karena ekstensi ini dapat mengubah icon menjadi lebih menarik dan berbeda antara satu dengan yang lain.
7. Debugger for Chrome
Jika Anda seorang pengembang dan menggunakan bahasa pemrograman khususnya JavaScript. Maka ekstensi Debugger for Chrome menghemat waktu untuk menemukan banyak bug.
Dengan menggunakan ekstensi ini, Anda dapat mengedit kode JavaScript Anda langsung di browser Chorme atau melalui aplikasi Visual Studio Code. Ini akan menemukan bug kode mana yang bersembunyi
8. ESLint
Ekstensi ini mengintegrasikan ESLint ke dalam Visual Studio Code, dan mengharuskan Anda untuk menginstal ESLint di komputer Anda baik secara lokal maupun global.
Ekstensi ini dapat dikonfigurasi untuk memformat kode Anda secara otomatis, ini juga dapat dikonfigurasi dengan sempurna untuk menunjukkan kesalahan atau peringatan ini kepada Anda.
9. Live Saas Compiler
Ekstensi Visual Studio Code yang membantu Anda mengkompilasi / mentranspitasi file SASS / SCSS Anda ke file CSS secara realtime dengan memuat ulang browser langsung.
10. Browser Preview
Browser Preview digunakan membuka pratinjau browser nyata di dalam editor yang dapat Anda debug. Browser Preview didukung oleh Chromium dan bekerja dengan memulai instance Chromium dalam proses baru.
Hal ini memungkinkan cara yang aman untuk membuat konten web di dalam Visual Studio Code, dan memungkinkan fitur menarik seperti debugging in-editor dan banyak lagi!
11. Path Intellisense
Path Intellisense membuat bekerja dengan path/jalur file mudah dengan menawarkan perlengkapan otomatis atau saran untuk kode Anda. Cukup mulai mengetikkan path dalam kutipan dan akan secara otomatis menyelesaikan jalur untuk Anda atau menyarankan berbagai opsi berbeda. Jika Anda menggunakan file tersembunyi, Path Intellisense dapat membantu Anda dengan itu juga.
12. Auto Close Tag
Seperti namanya, ekstensi ini digunakan untuk menutup tag HTML atau XML secara otomatis untuk IDE. Jadi, ketika Anda mengetikkan tag pembuka, ekstensi ini akan membuat tag penutup secara otomatis.
13. Auto Rename Tag
Ekstensi Auto Rename Tag menyoroti tag yang cocok dan secara otomatis mengganti nama tag yang Anda ubah. Ekstensi ini berfungsi untuk HTML, XML, PHP, dan JavaScript.
Jadi, Anda hanya perlu mengganti nama tag pembuka atau penutup, dan yang lainnya akan diganti namanya secara otomatis. Sederhana, tapi efektif.
14. Open in Browser
Seperti namanya ekstensi Visual Studio Code digunakan untuk melihat file HTML di browser. Ini membuka halaman HTML di browser default Anda, tetapi Anda juga dapat memilih browser lain.
Visual Studio Code tidak mempunyai fitur untuk membuka file langsung di browser. Ekstensi ini menambahkan item Open With Default Browser.
15. Highlight Matching Tag
Ekstensi ini menyoroti tag pembukaan dan / atau penutupan yang cocok. Secara opsional juga menunjukkan jalur untuk menandai di bilah status. Meskipun Visual Studio Code memiliki beberapa pencocokan tag dasar, hanya saja – dasar.
Ekstensi ini akan mencoba mencocokkan tag di mana saja: dari atribut tag, bagian dalam string, file apa pun, sementara juga menyediakan opsi styling yang luas untuk menyesuaikan bagaimana tag disorot. Markup yang didukung secara resmi: HTML, JSX.XML, Vue, Angular, PHP.
Kesimpulan
Visual Studio Code memiliki library atau marketplace yang didalamnya sangat banyak ekstensi untuk dipilih atau digunakan. Akan tetapi saya hanya mencakup 15 teratas yang direkomendasikan atau kebanyakan orang sering gunakan.
Demikian artikel 15 Ekstensi Visual Studio Code Terbaik. Jika Anda memiliki ekstensi lain yang belum ada di daftar diatas, jangan ragu untuk memberitahu kami di komentar. Terima kasih telah membaca dan semoga bermanfaat.
