16 Ekstensi Kode VS Teratas untuk Pengembang Web

Microsoft Visual Studio Code (VS Code) adalah salah satu editor kode teratas untuk pengembang perangkat lunak. Sejak dirilis, popularitasnya melonjak tidak hanya karena platform stabil yang disediakannya, tetapi juga karena sifat ekstensif yang dibangun Microsoft di dalamnya. Pasar ekstensi adalah banyak sekali add-on dan fitur yang memungkinkan pengembang untuk menyesuaikan VS Code ke dalam lingkungan pengembangan impian mereka. Kami ingin merinci beberapa ekstensi VS Code teratas yang tersedia saat ini sehingga Anda tidak ketinggalan.

1. Sublime Text Keymap dan Pengaturan Importir

Topping daftar kami adalah Sublime Text Keymap and Settings Importer yang berjudul tepat. Jika judulnya tidak cukup deskriptif, ekstensi ini memungkinkan Anda memasukkan peta kunci dan pengaturan Sublime Text yang ada sehingga Anda dapat dengan mulus bertransisi menggunakan VS Code sebagai default Anda. Karena begitu banyak orang menyukai Sublime dan telah menghabiskan waktu bertahun-tahun untuk itu, membuat VS Code menjaga memori otot yang diperoleh dari editor itu sangat masuk akal.

2. Cuplikan Kode JavaScript (ES6)

Mengetik JavaScript (atau kode apa pun) bisa menjadi rumit saat Anda mengulangi cuplikan yang sama berulang kali. Ekstensi ini membantu meringankannya dengan membiarkan Anda pada dasarnya menulis pintasan untuk cuplikan kode yang sering digunakan. Saat dipicu, cuplikan hanya mengganti teks dan menyisipkan langsung ke dalam dokumen.

3. Pewarna Pasangan Braket 2

Terlepas dari bahasa yang Anda kode, tanda kurung mungkin akan menjadi bagian utama dari itu. Dan menjaga mereka tetap lurus bisa menjadi sakit kepala. Tetapi dengan ekstensi Kode VS ini, Anda dapat memberi kode warna pada pasangan yang cocok untuk membantu meringankan titik kesulitan itu dan bekerja untuk membuat kode itu sendiri berfungsi — bukan editor.

4. ESLint

Dalam banyak hal, ESLint adalah linter untuk JavaScript. Menangkap kesalahan dan memberi Anda umpan balik dan peringatan segera sangat penting untuk menjaga kode tim Anda tetap bersih, dan benar-benar tidak ada cara yang lebih baik untuk melakukannya di JS selain ESLint. Kami sangat menyarankan untuk menginstal yang ini sesegera mungkin.

5. Manajer Proyek

Masalah dengan Kode VS yang cukup sering muncul adalah bagaimana menukar antara proyek yang berbeda. Secara default, alurnya bukan yang paling intuitif. Jadi Manajer Proyek bekerja untuk memperbaiki masalah itu dengan memberi Anda menu di bilah sisi yang dapat Anda gunakan untuk menyimpan folder yang berbeda dan proyek Git untuk dengan mudah bertukar di antaranya. Ini bukan peningkatan editor karena ini adalah peningkatan kualitas hidup.

6. Pratinjau Peramban

Salah satu elemen pengembangan web yang lebih menjengkelkan adalah memuat dan menyegarkan konten Anda di berbagai browser untuk pengujian. Pratinjau Browser membantu membatasi jumlah yang Anda perlukan untuk melakukan ini dengan memberi Anda pratinjau yang solid tentang pekerjaan Anda di dalam VS Code itu sendiri dalam proses Chrome baru.

7. Lebih cantik

Kita semua menginginkan kode yang lebih cantik. Jadi kita semua mungkin harus menginstal Prettier untuk menanganinya untuk kita. Deskripsi menjelaskan Prettier sebagai "pemformat kode yang berpendapat, menerapkan gaya yang konsisten dengan menguraikan kode Anda dan mencetaknya kembali dengan aturannya sendiri yang memperhitungkan panjang garis maksimum, membungkus kode bila perlu." Anda mungkin tidak ingin menggunakannya untuk setiap bahasa atau proyek, jadi ada banyak pengaturan konfigurasi sehingga Anda dapat menyesuaikannya sesuai keinginan Anda.

8. gitlink

Kami menyukai gitlink karena kesederhanaannya. Meskipun ada banyak ekstensi Git di luar sana, salah satu hal tentang gitlink adalah sederhana dan hanya melakukan satu hal. Dan itu melakukannya dengan baik. Cukup sorot potongan kode, dan gitlink kemudian akan membawa Anda ke repo online untuk potongan tertentu itu. Sangat berguna untuk dengan cepat Pergi Ke repo Anda di mana pun itu di-host dari jarak jauh.

9. Komentar yang Lebih Baik

Mengomentari kode Anda adalah salah satu kebiasaan terpenting yang dapat dimiliki pengembang. Lebih dari itu, mengomentari kode Anda dengan baik adalah keterampilan yang harus diajarkan di setiap kelas ilmu komputer dan bootcamp pengkodean di luar sana. Yang mengatakan, Komentar Lebih Baik adalah salah satu Ekstensi Kode VS yang dibutuhkan semua orang karena itu akan, jika Anda mempercayai namanya, membiarkan Anda meninggalkan komentar yang lebih baik dalam kode Anda. Dengan pintasan yang memungkinkan Anda membedakan antara pertanyaan, seruan, kode komentar, kueri, peringatan, sorotan, dan TODO, ekstensi ini tidak hanya akan membuat hidup Anda lebih mudah, tetapi juga membuat hidup tim Anda lebih mudah. Dan pengembang mana pun yang mengejar Anda dalam proyek tersebut. Kami tidak bisa merekomendasikan ini cukup.

10. Ikon Kode VS

Bagian utama dari menyesuaikan Kode VS dengan ekstensi adalah penyesuaian yang sebenarnya. Bukan hanya perubahan fungsi. Dengan Ikon Kode VS, editor menjadi sedikit lebih berwarna dan lebih mudah dinavigasi. Sistem file dikuliti dengan ikon yang mewakili berbagai jenis file, dan ini muncul di explorer serta tab dokumen itu sendiri. Itu membuat pekerjaan Anda melalui sistem file yang rumit menjadi lebih mudah dan tidak terlalu merepotkan. Secara harfiah kadang-kadang. Ikon yang begitu mudah dibaca mencegah kelelahan mata dan dengan demikian sakit kepala. Jadi untuk kesehatan Anda, instal Ikon Kode VS.

11. Tag Tutup Otomatis

Mungkin itu kami, tetapi mengetik tag penutup untuk bahasa apa pun menjadi tugas yang berat. Ada sesuatu tentang menambahkan / di pada akhirnya yang membuat penekanan tombol terasa sedikit. Tidak pernah takut. Tag Tutup Otomatis telah membuat hidup kita lebih mudah. Jadi kami ingin membuat Anda lebih mudah. Ini sederhana dan mudah dan Anda dapat terus mengetik di antara mereka dan cukup menekan tombol ke baris berikutnya atau ke akhir baris itu. Instal ini dan istirahatkan jari Anda dari senam tag penutup secara manual.

12. mewarnai

CSSnya bagus. Memilih warna dalam CSS tidak. Saat Anda berurusan dengan kode hex dan nilai RGBA, terkadang sulit untuk mendapatkan gambaran mental tentang palet apa yang telah Anda tetapkan untuk sebuah situs. Ekstensi ini membantu meringankannya dengan memberikan catatan visual untuk kode warna apa pun yang Anda gunakan di dalam file Anda. Anda dapat melihat warna yang Anda gunakan di dalam teks itu sendiri sebagai sorotan sehingga Anda tidak harus terus-menerus bertukar bolak-balik dari swatch dan pemilih warna dan seterusnya.

13. Polakode

Polacode seperti kamera Polaroid untuk editor kode Anda. Dirancang untuk membuat snapshot kode Anda lebih bersih dan lebih mudah, ini adalah suatu keharusan bagi setiap penulis tutorial yang ingin kode mereka tepat.

14. GitLens

Sulit untuk menjelaskan sepenuhnya apa yang membuat GitLens begitu hebat. Ini berfungsi seolah-olah Git dan VS Code dirancang dengan mempertimbangkan satu sama lain, dan alih-alih bekerja melalui hierarki baris perintah, Anda mendapatkan visualisasi dan wawasan yang menghilangkan banyak kebingungan dari kerja tim Git. Anda dapat melihat berbagai hal melalui hover, melihat perubahan dan anotasi terbaru, tampilan perbandingan dalam VS Code itu sendiri, peta panas, riwayat baris, dan banyak lagi. Ini pada dasarnya adalah ekstensi Git yang sempurna, dan kami pikir Anda harus menginstalnya terlebih dahulu.

15. Server Langsung

Pernahkah Anda ingin meluncurkan server dev lokal dari dalam IDE Anda dan mengerjakannya secara real-time? Tidak peduli bagaimana Anda menjawab pertanyaan itu, Anda pasti ingin mencoba Live Server. Karena itulah tepatnya yang dapat Anda lakukan dengannya. Meskipun mungkin tidak sepenuhnya menghilangkan kebutuhan akan produk seperti Local by Flywheel dan MAMP, ini tentu saja mengurangi kebutuhan mereka dalam banyak situasi.

16. Mempercantik

Beautify menggunakan js-beautify yang populer untuk menjaga JavaScript Anda terlihat bagus dan rapi. Jangan khawatir tentang garis putus-putus dan spasi serta lekukan yang aneh. Cukup klik tombol, dan semua kode Anda akan siap untuk close-up (mungkin dengan Polacode dari atas).

Kesimpulan

Daftar ini bisa terdiri dari ribuan item. Bahkan, mungkin ada beberapa dari Anda yang memiliki ratusan ekstensi berbeda yang diinstal yang Anda aktifkan dan nonaktifkan pada waktu yang berbeda. Tapi kami merasa ini adalah ekstensi VS Code yang dapat Anda instal dan kemudian pelajari apa lagi yang Anda inginkan saat Anda menggali lebih dalam ke pasar.

Apa ekstensi Kode VS masuk Anda? Beri tahu kami di komentar!

Gambar unggulan artikel oleh SVIATLANA SHEINA / shutterstock.com