Sampai saat ini, ada sejumlah alat pengembangan yang cukup dengan dukungan untuk bahasa JavaScript dan kerangka kerja berdasarkan itu. Pertanyaan memilih alat tertentu berada di luar ruang lingkup artikel ini, saya akan segera mencoba menggambarkan pengalaman pengguna saya dengan Visual Studio Code dan alat-alat yang dirancang untuk membuat hidup lebih mudah bagi pengembang JS, khususnya mereka yang menggunakan Vue.
Ada banyak plugin di toko ekstensi VSCode, yang paling nyaman untuk pengembangan web akan tercantum di bawah ini.
HTML & CSS
Gaya tata letak dan penulisan sering kali merupakan tugas yang monoton, sehingga ekstensi berikut dapat memfasilitasi dan mempercepat pekerjaan Anda:
- Tag Tutup Otomatis dan Tag Ganti Nama Otomatis - ekstensi sederhana dan mudah, untuk menyederhanakan pekerjaan dengan tata letak, memiliki dukungan untuk komponen file tunggal Vue.
- CSS Peek adalah ekstensi sederhana yang menambahkan kemampuan untuk dengan cepat melihat atau menavigasi aturan.
- Info Warna - memungkinkan Anda melihat informasi terperinci tentang warna, memiliki margin pengaturan yang baik.
- Sorotan Warna - menambahkan tampilan warna dalam bentuk garis pembatas, jika penyandian warna terdeteksi dalam kode.
- IntelliSense untuk nama kelas CSS dalam HTML - menganalisis lingkungan kerja untuk menambahkan kemampuan ke kelas CSS yang dilengkapi secara otomatis.
Javascript
- Debbugger untuk Chrome - ekstensi untuk menyederhanakan debugging langsung dari editor kode, bekerja dengan semua yang dimiliki Chrome DevTools.
- Cuplikan kode JavaScript (ES6) - seperangkat cuplikan untuk JS, sangat mempercepat pengembangan.
- JSHint - ekstensi untuk tips tentang desain dan organisasi kode JS, memiliki pengaturan yang fleksibel.
- ESLint adalah linter untuk JS dengan pengaturan yang fleksibel.
Vue
Tidak banyak ekstensi yang sesuai untuk bekerja dengan Vue, di bawah ini adalah beberapa yang paling berguna:
- Vetur adalah set lengkap add-on yang paling diperlukan untuk bekerja dengan vue, seperti snippet, highlighting sintaks.
- Vue Peek - Menambahkan transisi yang nyaman ke komponen vue.
Git
VSCode memiliki dukungan untuk bekerja dengan git di luar kotak, tetapi tetap saja fungsi bawaan tidak selalu cukup. Berikut ini adalah ekstensi yang akan membuat bekerja dengan git sedikit lebih mudah:
- GitLens mungkin merupakan ekstensi paling terkenal untuk bekerja dengan git, yang menambahkan banyak fitur untuk melihat informasi git.
- Git History - menambahkan kemampuan untuk dengan mudah melihat riwayat perubahan di git, memiliki antarmuka yang lebih nyaman.
- Indikator Git - indikator sederhana aktivitas git di baki VSCode bawah.
Lingkungan kerja dan proses pengembangan
Untuk pekerjaan yang produktif, alangkah baiknya jika ada pembantu dalam bentuk add-on yang menyoroti kesalahan sederhana, menyarankan gaya penulisan dan petunjuk / tindakan mudah lainnya. Coba ekstensi berikut:
- Bracket Pair Colorizer - menambahkan setengah cahaya pada tanda kurung yang mengelilingi blok kode, memfasilitasi persepsi kode dengan penyaratan yang dalam, memisahkan secara visual kode.
- Mempercantik adalah, menurut pendapat saya, ekstensi paling nyaman untuk penataan kode otomatis, rincian lebih lanjut dapat ditemukan di tautan.
- Live Server adalah ekstensi yang sangat berguna yang memungkinkan Anda meluncurkan server langsung dengan cepat, misalnya untuk tata letak.
- Biaya Impor adalah ekstensi hebat yang menampilkan ukuran modul yang diimpor, memungkinkan Anda memilih bagian yang diimpor dari modul secara lebih rinci tanpa menggunakan penganalisa bundel.
- NPM Intellisense - pelengkapan otomatis untuk modul npm.
- Buka di browser adalah ekstensi sederhana yang menambahkan titik pembuka di browser.
- Path Intellisense - pelengkapan otomatis untuk nama file dan lokasinya.
- Pengaturan Sinkronisasi - setelah menyelesaikan instalasi alat yang diperlukan dan pengaturan lingkungan, akan lebih mudah untuk menyimpan konfigurasi, ekstensi ini akan memungkinkan Anda untuk menyinkronkan semua yang ada di git gist.
- Sortir baris - cara mudah untuk mengatur penyortiran garis dalam kode sesuai dengan kondisi yang diberikan.
- Sorotan TODO adalah ekstensi sederhana untuk menyorot kata kunci seperti TODO, FIXME.
- Trailing Spaces - menyoroti ruang ekstra.
- VS Live Share - banyak yang menghadapi masalah ketika mereka harus menjelaskan kepada pengembang jarak jauh untuk waktu yang sangat lama di mana dan apa yang salah, ekstensi ini menyederhanakan kehidupan dalam situasi seperti itu, memungkinkan Anda untuk membuat demonstrasi langsung, mendukung pekerjaan beberapa pengguna, meneruskan lingkungan yang berjalan ke mesin klien.
- Visual Studio IntelliCode - mengotomatiskan tugas-tugas rutin untuk pengembang dalam bahasa seperti Python, TypeScript / JavaScript dan Java.
Mungkin juga menarik.
- GraphQL untuk VSCode - semacam intellisense untuk GraphQL, ekstensi yang paling nyaman, di bawah jelaga banyak berguna, lebih banyak pada tautan.
- Penandaan Instan - pratinjau langsung untuk markup penandaan.
- Tempel JSON sebagai Kode adalah ekstensi yang nyaman yang menghasilkan model tipe dari data JSON. Mendukung TypeScript, Python, Go, Ruby, C #, Java, Swift, Rust, Kotlin, C ++, Flow, Objective-C, JavaScript, Elm, dan JSON Schema.
- Rainbow CSV - lampu latar untuk file CSV.
- Previewer Regex adalah ekstensi yang sangat berguna untuk pratinjau reguler.
- SVG Viewer - SVG viewer.
Saya harap daftar ini bermanfaat bagi Anda, saya akan dengan senang hati menambahkannya.