Penulis materi, terjemahan yang kami terbitkan hari ini, telah membuat 33 ekstensi untuk VS Code. Dia memutuskan untuk berbagi dengan mereka yang menyukai editor ini, metode mengembangkan dan mendukung ekstensi. Selain itu, dia secara singkat berbicara tentang proyeknya. Mungkin Anda akan menemukan di antara mereka sesuatu yang bermanfaat bagi Anda.
Cara menulis ekstensi
Saya berusaha keras untuk pekerjaan yang produktif dan cinta otomatis, jadi saya mengembangkan proses yang terorganisir dengan baik untuk mengembangkan ekstensi untuk VS Code. Saya akan memberi tahu Anda tentang komponen utama dari proses ini.
▍ Alat
Saya menulis alat yang sangat sederhana yang membantu Anda memulai dengan cepat pada proyek baru menggunakan templat. Utilitas yang sesuai berfungsi seperti ini:
- Ia menerima folder sebagai input (inilah yang disebut "templat").
- Itu memproses semua file menggunakan paket setang , menanyakan dalam proses memproses pertanyaan tentang apa yang harus diganti untuk setiap placeholder yang ditemukan (seperti
{{name}} ). - Akibatnya, ia membentuk folder baru, file-file yang berisi apa yang dimasukkan sebagai jawaban atas pertanyaannya.
Saya berpikir tentang menggunakan utilitas
yeoman untuk bekerja dengan templat, tetapi, untuk kebutuhan saya, tampaknya terlalu rumit. Saya menggunakan alat
khaos , tetapi tidak didukung dan tidak memperbarui templat secara otomatis, dan memutakhirkannya secara manual setiap kali saya perlu menggunakannya tidak terlalu nyaman.
EmpTemplate
Inilah cara saya, menggunakan
ekstensi template-vscode , mulai mengembangkan ekstensi baru untuk Kode VS.
Buat proyek baruSetelah jawaban atas pertanyaan program telah dimasukkan, saya memiliki perpanjangan kerja, sesuatu seperti "Halo, dunia!" untuk Kode VS. Templat menyertakan banyak fungsi pembantu, yang ternyata sering saya gunakan ketika mengembangkan ekstensi. Secara khusus, template mendukung memuat file konfigurasi pengguna dari folder
.vscode , registrasi otomatis perintah, dapat menemukan direktori root saat ini berdasarkan pada file yang aktif dan menyelesaikan masalah serupa lainnya.
Jika saya dapat memutar balik waktu, saya mungkin akan meletakkan semua fungsi pembantu ini dalam paket mandiri, dalam sesuatu seperti
vscode-utils , daripada membuat salinan dari fungsi-fungsi ini di setiap proyek pengembangan ekstensi. Tetapi kemudian, sayangnya, saya tidak tahu bahwa saya akan membuat lusinan ekstensi. Sekarang saya harus meluangkan waktu memperbarui kode yang sesuai di semua proyek ekstensi saya.
Jika Anda berencana untuk mengembangkan ekstensi untuk Kode VS, saya akan menyarankan Anda untuk membuat template Anda sendiri, mungkin mengambil milik saya sebagai dasar.
Documentation Dokumentasi yang bermanfaat
Selama proses pengembangan, saya selalu memiliki
dokumentasi untuk Kode API VS. Pada awalnya, bekerja dengan dokumen ini, yang merupakan halaman besar, tidak terlalu nyaman, tetapi jika Anda meluangkan waktu untuk segera memeriksanya, jika Anda memahami API mana yang tersedia untuk Anda, itu akan nyaman untuk digunakan. Secara umum, saya dapat mencatat bahwa set API yang tersedia cukup baik untuk saya.
Omong-omong, jika Anda ingin mengembangkan ekstensi untuk Kode VS, akan sangat berguna bagi Anda untuk membaca bagian dokumentasi ini.
▍Tentang ekstensi yang saya kembangkan
Saya mengembangkan ekstensi untuk menyelesaikan berbagai masalah, kami akan membicarakannya di bawah ini. Selain itu, beberapa ekstensi ini membantu saya mengembangkan ekstensi lain.
Ekstensi saya
Seperti yang saya katakan, saya mengusahakan produktivitas, begitu banyak ekstensi saya ditujukan untuk meningkatkan produktivitas tenaga kerja. Saya mencoba untuk tidak berurusan dengan penemuan sepeda yang konstan, saya mencoba untuk mencapai pemisahan fungsi yang jelas antara berbagai ekstensi sehingga penggunaan bersama mereka tidak akan menimbulkan masalah.
Saya tidak tahu apakah ini baik atau buruk, tetapi saya ingin membuat ekstensi untuk Kode VS. Selain itu, aliran tugas yang dapat diotomatisasi tidak mengering. Itulah sebabnya saya, setelah saya menulis ekstensi pertama, membuat ekstensi kedua, lalu ketiga, mencapai, hingga tigapuluh tiga.
Sekarang saya akan berbicara singkat tentang ekstensi saya. Rincian tentang mereka dapat ditemukan di halaman mereka.
▍ Ekstensi untuk membuat ekstensi
1 Manajer debug
Ekstensi
Debug Manager memungkinkan Anda untuk memulai debugging, bahkan dari terminal, tanpa perlu membuat tugas atau file konfigurasi. Saya membuat ekstensi ini karena saya tidak ingin menyumbat repositori dengan file yang tidak perlu (dan siapa, misalnya, yang menggunakan tugas?). Saya percaya bahwa meluncurkan debugger dari terminal adalah fitur yang sangat berguna sehingga harus
dimasukkan dalam VS Code itu sendiri.
Menjalankan debugger dari terminal2 Debugger StatusBar
Ekstensi
StatusBar Debugger menambahkan kontrol debugging ke bilah status program. Ini jauh lebih nyaman daripada
panel debug standar. Juga, jika VS Code akan memberikan
lebih banyak data debug , ekstensi saya akan lebih baik.
Nomor 3 Instal .VSIX
Ekstensi Install .VSIX memungkinkan Anda untuk menginstal file
.vsix langsung dari panel
. Alasan untuk ekstensi ini adalah kenyataan bahwa prosedur instalasi standar untuk file-file tersebut
tidak nyaman .
Nomor 4 Benjolan
Ekstensi
Bump memungkinkan Anda untuk meningkatkan nomor versi proyek dan memasukkan data baru ke dalam log perubahan. Alat ini bertindak sesuai dengan logika internalnya sendiri, tetapi dapat dikustomisasi. Saya membuatnya karena fakta bahwa ekstensi yang layak memerlukan log perubahan, tetapi ini tidak berarti bahwa pengembang ekstensi tersebut harus memasukkan jurnal secara manual. Ini adalah salah satu ekstensi favorit saya. Mungkin saya akan membuat alat baris perintah berdasarkan itu, karena saya ingin suatu hari nanti memungkinkan otomatisasi rilis GitHub.
Menggunakan Bump ExtensionNo. 5. Optimalkan Gambar
Ekstensi
Gambar Optimasi memungkinkan Anda untuk mengoptimalkan gambar yang tersedia di proyek menggunakan aplikasi eksternal yang dipilih oleh pengguna. Satu tim - dan pekerjaan selesai.
▍ Manajemen Proyek
No. 6. Proyek +
Ekstensi
Projects + digunakan untuk mengelola proyek. Ini memiliki kemampuan yang kaya, dapat dikonfigurasi, secara otomatis menemukan proyek. Salah satu ekstensi yang paling banyak digunakan dari jenis ini adalah
Manajer Proyek , tetapi saya memiliki sekitar seratus repositori, dan saya memerlukan alat yang tepat untuk mengelolanya, salah satunya adalah dukungan untuk grup bersarang tanpa batas.
Bekerja dengan Proyek + Perpanjangan▍ Mengelola daftar agenda
Nomor 7 Todo +
Ekstensi Todo + menyederhanakan bekerja dengan daftar todo. Ini adalah alat yang ampuh yang mudah digunakan dan disesuaikan. Jika Anda tidak perlu penyorotan sintaks untuk file
TODO , atau jika Anda mungkin puas dengan penyorotan
TODO standar, Anda dapat mencoba ekstensi
Todo Tree yang bagus.
Penyorotan sintaksis menggunakan Todo + dan informasi tingkat proyekNomor 8 Sorot
Ekstensi
Sorotan adalah alat penyorotan sintaks ekspresi reguler lanjutan. Ini berguna untuk bekerja dengan daftar agenda, anotasi, dan sejenisnya. Ekstensi
Sorotan TODO sangat populer di area ini, tetapi ekstensi saya lebih fleksibel dan jauh lebih kuat. Selain itu, ini mungkin bekerja lebih cepat.
No. 9. Penurunan harga todo
Ekstensi
Markdown Todo memudahkan untuk bekerja dengan daftar todo di dalam file penurunan harga. Tidak ada yang istimewa tentang itu, tetapi memungkinkan Anda untuk menggunakan kemampuan Todo + di dalam file penurunan harga.
No. 10. Proyek + Todo +
Perpanjangan
Projects + Todo + memungkinkan Anda untuk menganalisis proyek, dari sudut pandang burung, untuk melihat hasil agregasi semua file todo dalam satu file. Jika Anda menggunakan ekstensi Projects + untuk manajemen proyek, dan Todo + untuk bekerja dengan daftar agenda, maka berkat ekstensi ini, Anda dapat mengumpulkan daftar agenda dari semua (atau dari beberapa) proyek di satu tempat.
▍ Perluasan untuk membuka file
Yang penting bagi saya adalah kemampuan untuk dengan cepat beralih di antara berbagai aplikasi atau halaman web. Itulah sebabnya saya membuat serangkaian ekstensi untuk VS Code yang menyederhanakan solusi dari masalah tersebut.
No. 11. Buka di aplikasi
Ekstensi
Open in Application memungkinkan Anda untuk membuka file sewenang-wenang di aplikasi default atau di aplikasi yang memutuskan untuk digunakan pengembang. Ini adalah ekstensi universal.
No. 12. Buka di browser
Ekstensi Open in Browser menambahkan perintah ke editor yang memungkinkan Anda untuk membuka file atau proyek saat ini di browser apa pun, atau bahkan segera di semua browser yang tersedia.
13 Kode terbuka
Ekstensi
Open in Code memudahkan untuk beralih antara VS Code dan VS Code Insiders.
No. 14. Buka di finder
Ekstensi
Open in Finder dirancang untuk membuka file atau proyek saat ini di file manager Finder.
Nomor 15 Buka di github
Ekstensi
Open in GitHub memungkinkan Anda untuk membuka proyek atau file saat ini di github.com. Ada banyak ekstensi untuk menyelesaikan masalah ini, tetapi ketika saya mencobanya, ternyata mereka memiliki terlalu banyak fungsi yang tidak saya butuhkan.
No. 16 Buka di gittower
Ekstensi Open in GitTower menambahkan perintah ke editor untuk membuka proyek saat ini di
GitTower .
Nomor 17 Buka di pasar
Ekstensi
Open in Marketplace melengkapi editor dengan tim untuk membuka proyek saat ini di
direktori ekstensi untuk Kode VS.
Nomor 18 Buka di node_modules
Ekstensi Open in node_modules memungkinkan Anda menemukan modul yang sesuai dengan teks yang dipilih atau beberapa baris arbitrer di folder
node_modules dan membuka folder mereka. Ini berguna untuk kasus-kasus tersebut ketika pengembang ingin lebih memahami modul yang ia gunakan.
19 Buka di npm
Ekstensi
Open in NPM memungkinkan Anda untuk membuka halaman modul di direktori npm. Lebih mudah digunakan untuk melihat informasi bantuan modul.
20 Buka di kapal
Ekstensi
Open in Ship menambahkan perintah ke editor untuk membuka proyek saat ini di Ship. Sayangnya, Kapal berhenti bekerja. Jadi sekarang, agar tidak melupakan informasi yang saya terima tentang masalah dalam proyek saya, saya harus menggunakan lembar pengingat khusus di
Noty .
21 Buka di terminal
Ekstensi
Open in Terminal memudahkan untuk membuka proyek saat ini di terminal.
Nomor 22 Buka dalam pengiriman
Ekstensi
Open in Transmit memungkinkan Anda untuk membuka file atau proyek saat ini dalam
Transmit .
▍ Lain-lain
Nomor 23 Refresh browser
Ekstensi
Browser Refresh memungkinkan Anda untuk me-refresh halaman di browser dengan menekan ⌘R langsung dari VS Code, tanpa harus beralih ke browser. Ekstensi ini berguna dalam kasus di mana opsi reload interaktif tidak dapat digunakan, dan ketika Anda tidak perlu
browser-sync me-refresh halaman
tanpa perlu ini .
Nomor 24 Perintah
Ekstensi
Perintah memungkinkan Anda untuk memanggil perintah sewenang-wenang dari bilah status. Argumen yang lewat didukung.
Perintah Kustom Dibuat oleh PerintahNomor 25 Diff
Ekstensi
Diff memungkinkan Anda untuk membandingkan file yang terbuka. Saya membuat ekstensi ini karena
code-diff path1 path2 terlalu lambat.
No. 26. Riwayat file git
Ekstensi
Git File History menyederhanakan analisis perbedaan antara file saat ini dan versi sebelumnya. Ada banyak ekstensi untuk mengatasi masalah ini, tetapi ketika saya mencobanya, mereka ternyata penuh dengan fitur yang tidak perlu atau tidak beroperasi.
Nomor 27 Pemberitahuan Github
Ekstensi
Pemberitahuan GitHub yang aman dan dapat disesuaikan dirancang untuk menampilkan informasi pemberitahuan GitHub pada bilah status.
28 Tema Malam Monokai
Tema Malam Monokai adalah tema gelap minimalis berdasarkan tema Monokai. Saya membuatnya karena fakta bahwa saya tidak dapat mengambil apa yang cocok untuk saya dari topik yang ada.
Tema Malam MonokaiNo. 29. Tidak [Tidak didukung]
Ekstensi
Tidak [Tidak Didukung] dimaksudkan untuk menghapus baris “[Tidak Didukung]” dari tajuk editor. Ekstensi ini sudah usang, jadi saya sarankan
Perbaiki VSCode Checksums sebagai gantinya . Sayangnya, bahkan setelah diskusi
ini dan
ini , prasasti menjengkelkan "[Tidak didukung]" belum hilang.
No. 30. Buka banyak file
Ekstensi
Open Multiple Files memungkinkan Anda untuk secara bersamaan membuka semua file dalam folder tertentu. Jika perlu, file dapat difilter menurut templat.
No. 31. Cari - Buka Semua Hasil
Pencarian - Buka Semua Hasil ekstensi memungkinkan Anda untuk secara bersamaan menampilkan semua hasil pencarian menggunakan satu perintah.
Nomor 32 Manajer terminal
Ekstensi
Terminal Manager mengotomatiskan pekerjaan dengan beberapa terminal sekaligus, misalnya, pelaksanaan beberapa perintah di dalamnya. Saya harus mengatakan bahwa Manajer Terminal adalah ekstensi pertama saya. Jika Anda menggunakan terminal - saya sarankan mencobanya.
No. 33. Mengirimkan
Ekstensi
Transmit melengkapi editor dengan beberapa perintah untuk mengatur interaksi dengan Transmit.
Manajemen ekstensi
Mengelola banyak repositori dapat menjadi tugas yang menakutkan. Saya akan memberi tahu Anda cara melakukannya.
▍ Berkomitmen berulang
Cepat atau lambat, saatnya tiba ketika Anda perlu melakukan perubahan pada semua repositori yang didukung. Ini bermuara pada kenyataan bahwa banyak repositori harus melakukan komitmen yang sama. Segera itu berubah menjadi tugas yang membosankan.
Untuk mengotomatisasi solusi dari masalah ini, saya membuat
autogit - alat yang memungkinkan Anda untuk mengeksekusi perintah ketika diterapkan ke banyak repositori.
Menjalankan perintah menggunakan autogitSaya selalu menemukan cara baru untuk menggunakan
autogit . Misalnya, baru-baru ini, menggunakan alat ini, saya membuat perubahan berikut di semua repositori tempat kode ekstensi saya untuk Kode VS disimpan:
- Bangun dengan
webpack . Ini menghasilkan peningkatan kecepatan startup sekitar 80%. - Mengabaikan
package-lock.json . File ini hanya menyumbat riwayat komit saya. Berikut adalah beberapa materi bagus tentang topik ini. - Perbarui
tsconfig.json . Saya menggunakan fitur baru bahasa secara intensif, khususnya, fungsi asinkron. Mereka ditransposisikan jika target transpilasi ditetapkan sebagai <= es5 , untuk konstruksi yang sangat lambat. Karena VS Code memahami kode modern, ini tidak lagi diperlukan. - Copot pemasangan TSLint . Saya menemukan bahwa, pada dasarnya, saya tidak memperhatikan tip dari orang yang suka membaca, jadi saya menyingkirkan kesempatan ini.
- Penggunaan logo resolusi tinggi dalam bahan referensi. Saya dulu menggunakan logo 128x128, sekarang, untuk meningkatkan tampilan materi referensi, saya menggunakan gambar yang lebih baik. Saya tidak bisa mengatakan bahwa gambar itu sendiri adalah mukjizat yang baik, tapi itu cerita lain.
Untuk membuat perubahan seperti itu dalam satu repositori tidak lama, tetapi ketika sampai tiga puluh tiga, itu jauh lebih sulit untuk hidup tanpa alat otomatisasi.
▍ Sinkronisasi deskripsi dan kata kunci dengan GitHub
Apa yang sedang dibahas di sini tidak perlu dilakukan, tetapi alat yang mengotomatiskan sinkronisasi deskripsi dan kata kunci tidak akan merugikan saya. Tugas ini dapat ditangani oleh alat
autogit dan alat
autogit-command-github-sync saya .
Sinkronkan deskripsi dan kata kunci dengan autogitTetapi
autogit-command-github-publish adalah alat saya untuk secara otomatis membuat repositori baru.
EpLaporan
Segera setelah saya membuat beberapa ekstensi, saya menjadi tertarik untuk belajar tentang seberapa populernya mereka, bagaimana, seiring waktu, jumlah unduhan mereka berubah. Anda dapat menemukan informasi tentang semua ekstensi pengembang tertentu di halaman khusus. Sebagai contoh,
ini adalah halaman saya. Namun, halaman ini tidak memberikan informasi, misalnya, tentang berapa banyak unduhan ekstensi telah dilakukan sejak pemeriksaan terakhir. Itu sebabnya saya membuat
RSSA . Ini adalah alat yang memungkinkan Anda untuk melacak perubahan apa pun yang dapat diakses oleh URL.
Data diterima oleh RSSATeksnya bagus, tetapi akan jauh lebih baik untuk menyajikan data dalam grafik. Sekarang saya sedang mengembangkan alat untuk memecahkan masalah ini, saya belum menerbitkannya. Di sini, misalnya, terlihat seperti jadwal pengunduhan untuk ekstensi
Todo + , yang dibangun berdasarkan data yang diperoleh dengan menggunakan
rssa .
Todo + Jadwal PengunduhanDi sini, di beberapa tempat, Anda dapat melihat peningkatan tajam dalam jumlah unduhan. Ini terjadi ketika pembaruan diterbitkan, karena pemasangan pembaruan ekstensi dianggap oleh sistem sebagai unduhan. Ini mengarah pada fakta bahwa siapa pun dapat menjadi penulis ekstensi dengan sejuta unduhan, menulisnya, dan menerbitkan banyak pembaruan. Omong-omong, ini adalah salah satu
masalah katalog ekstensi untuk Kode VS.
Ringkasan
Pada suatu waktu, saya berpikir bahwa, dalam hal jumlah ekstensi yang diterbitkan untuk VS Code, saya berada di posisi kedua setelah Microsoft. Namun, ternyata,
beberapa dari mereka memiliki 2 lebih dari milik saya. Karena itu, saya terus menulis ekstensi.
Pembaca yang budiman! Apakah Anda menulis ekstensi untuk Kode VS?