Mereka menerjemahkan untuk Anda
sebuah artikel oleh Philip Korea tentang bagaimana ia mengembangkan ekstensi untuk editor Atom dan VS Code. Proyek tidak dapat disebut kompleks, tetapi ini adalah keuntungannya: Anda dapat segera memahami apa yang perlu dilakukan untuk membuat ekstensi Anda sendiri.
Ketika editor Atom pertama kali diperkenalkan, saya, seperti banyak pengembang web lainnya, merasa senang. "Oh, keren, editor yang bisa dikembangkan yang dibangun di atas tumpukan yang aku tahu," pikirku kemudian. Dan segera mulai memperluas kemampuan editor, serta ribuan pengembang lainnya.
Omong-omong, saya bekerja dengan Atom karena dua alasan. Pertama, ada ekstensi bagus setiap minggu. Yang kedua - Saya tahu tumpukan dan dapat bekerja dengannya tanpa masalah, membuat versi ekstensi saya sendiri.
Kami mengingatkan Anda: untuk semua pembaca "Habr" - diskon 10.000 rubel saat mendaftar untuk kursus Skillbox apa pun menggunakan kode promo "Habr".
Skillbox merekomendasikan: Kursus online Profesi Pengembang Frontend .
Ekstensi kursor besar
Ketika Atom keluar, saya memprogram Slim, Sass, dan CoffeeScript. Kemudian saya tidak tahu cara lain untuk mengedit indentasi, kecuali yang paling biasa - untuk mengubah setiap indentasi secara individual. Terkadang sulit untuk menentukan penyelesaian blok, jadi saya memutuskan untuk mengubah tampilan kursor. Saya ingin mengubahnya menjadi sesuatu seperti penggaris yang memungkinkan Anda mengukur semuanya dengan akurat. Berikut ini sebuah contoh:
Untuk memahami bagaimana melakukan ini, saya mempelajari alat pengembang Atom, memilih elemen kursor, dan kemudian mengubahnya menggunakan CSS. Jadi, saya berhasil mendapatkan bukti konsep - saya menyadari bahwa ide saya dapat diwujudkan.
Selanjutnya, saya mempelajari dokumentasi (lagi) untuk mengetahui bagaimana Anda bisa mendaftarkan perintah dan menerapkan perubahan pada kelas kursor. Iterasi pertama sangat sederhana.
module.exports = activate: (state) -> atom.workspaceView.command 'big-cursor:toggle', @toggle toggle: ()-> atom.workspaceView.getActiveView() .find(".cursor").toggleClass("big-cursor") .big-cursor { top: 0 !important; height:100%; }
Ini adalah ekstensi yang sederhana dan berfungsi.
Apa yang terjadi padanya?
Tidak ada yang istimewa, saya menulisnya ketika bahkan versi 1.0 Atom tidak ada, jadi API berubah kemudian, tetapi saya tidak lagi memerlukan ekstensi dan saya berhenti mendukungnya.
Kode VS
Setelah beberapa tahun, saya memutuskan untuk beralih ke VS Code. Untuk kenyamanan, saya menggunakan ekstensi, yang memungkinkan Anda dengan cepat mengubah parameter yang diperlukan, seperti nama variabel. Tapi saya harus terus-menerus masuk tim untuk membuat perubahan ini. Dan saya tidak ingin mengikatnya ke tombol apa pun pada keyboard, jadi saya mulai mempertimbangkan opsi untuk bekerja dengan alias di shell ZSH.
ZSH memiliki banyak plugin, plus Anda dapat menggunakan versi pendek dari perintah untuk menjalankannya. Contoh - menjalankan plugin git checkout dapat dilakukan dengan gco, dan plugin rails server dengan perintah rs.
Sebenarnya, untuk tim seperti Change Case Snake Case, saya bisa memasukkan huruf pertama dari semua kata, yaitu, jalankan semua ini menggunakan singkatan ccsc.
Menulis ekstensi untuk Kode VSJadi, saya mulai mengeksplorasi kemungkinan untuk membuat ekstensi. Saya sudah agak terbiasa dengan beberapa poin, karena saya membuat tambahan saya untuk Scry (server bahasa untuk Crystal), jadi saya mempelajari ekstensi Crystal untuk VS Code.
Jadi, itu dibuat menggunakan generator Yeoman. Itu terlihat seperti ini:
Dasar dari ekstensi naskah adalah cukup nyaman. Anda dapat mengonfigurasikan semuanya menggunakan tsconfig (yang, bagaimanapun, berarti file-file Typescript sering dapat menghasilkan kesalahan dan tidak dapat dikompilasi), tetapi Anda dapat memilih opsi kedua - tslint.
Setelah generator dikonfigurasi, Anda memiliki ekstensi hello world, yang menambahkan perintah hello world logging. Proyek ini menggunakan tugas debug Kode VS untuk memungkinkan Anda menjalankan instance Kode VS dengan ekstensi diaktifkan. Semua ini benar-benar dapat dengan mudah dikonfigurasi dengan penambahan breakpoint jika perlu. Hasilnya, Anda dapat mempelajari API tanpa masalah.
Untuk membuat ekstensi yang saya butuhkan, saya perlu tahu beberapa hal:
- Cara membuat kotak palet tempat pengguna dapat bekerja.
- Cara memfilter kotak palet untuk menampilkan perintah sesuai dengan versi pendeknya yang dimasukkan oleh pengguna.
- Cara mendapatkan semua perintah yang tersedia sehingga ada sesuatu yang harus dicari tepat di jendela.
- Cara menjalankan perintah.
Saya harus mempelajari dokumentasi untuk mendapatkan semua data. API sangat terbatas, ini masalah. Tetapi saya melakukan apa yang saya rencanakan.
1. Kotak paletAnda tidak perlu mengakses DOM atau tampilan untuk ini. Ada serangkaian tampilan di sini yang dapat Anda gunakan (salah satunya adalah panel HTML). Ada presentasi untuk kotak palet, jadi saya bisa mengerti cara kerjanya.
2. Memfilter kotak paletSaya harus mencoba di sini, karena API QuickPick tidak menawarkan kesempatan seperti itu. Tapi dia memang memiliki acara yang dapat dicegat setiap kali pengguna mulai mengetik sesuatu, saya hanya mengubah daftar opsi. Opsi ini bekerja sangat baik.
let disposable = vscode.commands.registerCommand('short-commands.activatePalette', () => { let list = vscode.window.createQuickPick<CommandOption>(); list.placeholder = "Hello type some stuff"; list.onDidChangeValue((ee) => { if (ee.length === 0) { list.items = []; } else { list.items = options.filter((e) => e.short.startsWith(ee)) } }); });
3. Dapatkan daftar perintah yang tersediaDi sini, juga, ada kesulitan, Anda bisa mendapatkan daftar ekstensi yang diinstal lainnya. Untuk semua orang, Anda perlu mengakses package.json sendiri.
function parseExtensionCommands( extensions: Extension<any>[] ): CommandOption[] { let options: CommandOption[] = []; extensions.forEach(ext => { let { packageJSON: { contributes: { commands } = { commands: [] } } } = ext; if (commands) { commands.forEach((c: Command) => { options.push(new CommandOption(c)); }); } }); return options; }
4. Eksekusi perintahNah, semuanya sederhana di sini, kita beralih ke API untuk memanggil perintah yang diinginkan.
vscode.commands.executeCommand (list.activeItems [0] .command.command)
Sebagai kesimpulan
Sebenarnya, hanya itu yang saya lakukan untuk editor. Tujuan saya adalah untuk menunjukkan bagaimana Anda dapat mulai mengembangkan ekstensi Anda sendiri. Berikut adalah daftar apa yang saya gunakan dalam pekerjaan saya, ditambah sumber proyek:
Skillbox merekomendasikan: