7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. Python

Cara Membuat Plugin Text Sublime 2

Scroll to top
Read Time: 16 mins

Indonesian (Bahasa Indonesia) translation by Zadip (you can also view the original English article)

Luhur teks 2 adalah editor teks dikustomisasi yang telah semakin menangkap perhatian dari coders mencari alat yang kuat, cepat, dan modern. Hari ini, kita akan membuat ulang plugin Sublime populer saya yang mengirimkan CSS melalui API Nettuts+ Prefixr untuk CSS lintas-browser yang mudah.

Setelah selesai, Anda akan memiliki pemahaman yang kuat tentang bagaimana plugin Sublime Prefixr ditulis, dan dilengkapi untuk mulai menulis plugin Anda sendiri untuk editor!


Kata Pengantar: Istilah dan Bahan Referensi

Model ekstensi untuk Sublime Text 2 cukup berfitur lengkap.

Model ekstensi untuk Sublime Text 2 cukup berfitur lengkap. Ada cara untuk mengubah syntax highlighting, krom editor yang sebenarnya dan semua menu. Selain itu, dimungkinkan untuk membuat sistem build baru, pelengkapan otomatis, definisi bahasa, snippet, macro, binding kunci, binding mouse dan plugin. Semua jenis modifikasi ini diimplementasikan melalui file yang disusun dalam paket.

Paket adalah folder yang disimpan di direktori Packages Anda. Anda dapat mengakses direktori Paket Anda dengan mengklik entri menu Preferences > Browse Packages…. Paket bundel menjadi satu file juga dimungkinkan dengan membuat file zip dan mengubah ekstensi menjadi .sublime-package. Kita akan membahas pengemasan lebih lanjut dalam tutorial ini.

Sublime dibundel dengan sejumlah paket berbeda. Sebagian besar paket yang dibundel adalah khusus bahasa. Ini berisi definisi bahasa, pelengkapan otomatis dan sistem bangun. Selain paket bahasa, ada dua paket lain: Default dan User. The
Paket Default berisi semua binding kunci standar, definisi menu, pengaturan file, dan sejumlah plugin yang ditulis dengan Python. Paket User adalah spesial karena selalu dimuat terakhir. Ini memungkinkan pengguna untuk mengganti default dengan menyesuaikan file dalam paket User mereka.

Selama proses penulisan sebuah plugin, referensi Sublime Text 2 API akan sangat penting.

Selama proses penulisan sebuah plugin, referensi Sublime Text 2 API akan sangat penting. Selain itu, paket Default bertindak sebagai referensi yang baik untuk mencari tahu bagaimana melakukan sesuatu dan apa yang mungkin. Sebagian besar fungsi editor diekspos melalui perintah. Operasi apa pun selain mengetik karakter dilakukan melalui perintah. Dengan melihat Preferences > Key Bindings - Defaultmenu, dimungkinkan untuk menemukan harta karun fungsionalitas bawaan.

Sekarang perbedaan antara plugin dan paket sudah jelas, mari mulai menulis plugin kita.


Langkah 1 - Memulai Plugin

Sublime hadir dengan fungsionalitas yang menghasilkan kerangka kode Python yang diperlukan untuk menulis plugin sederhana. Pilih entri menu Tools > New Plugin..., dan buffer baru akan dibuka dengan boilerplate ini.

Di sini Anda dapat melihat dua modul Sublime Python diimpor untuk memungkinkan penggunaan API dan kelas perintah baru dibuat. Sebelum mengedit ini dan mulai membuat plugin kita sendiri, mari kita simpan file dan memicu fungsionalitas bawaan.

Saat kita menyimpan file, kita akan membuat paket baru untuk menyimpannya. Tekan ctrl+s (Windows/Linux) atau cmd+s (OS X) untuk menyimpan file. Dialog penyimpanan akan terbuka ke paket User. Jangan menyimpan file di sana, melainkan jelajahi folder dan buat folder baru bernama Prefixr.

Sekarang simpan file di dalam folder Prefix sebagai Prefix.py. Sebenarnya tidak masalah apa nama file itu, hanya saja ia berakhir dengan .py. Namun, berdasarkan konvensi kita akan menggunakan nama plugin untuk nama file.

Sekarang plugin sudah disimpan, mari kita coba. Buka konsol Sublime dengan menekan ctrl+`. Ini adalah konsol Python yang memiliki akses ke theAPI. Masukkan Python berikut untuk menguji plugin baru:

Anda akan melihat Hello World dimasukkan ke awal file plugin. Pastikan untuk membatalkan perubahan ini sebelum kita melanjutkan.


Langkah 2 - Jenis Perintah dan Penamaan

Untuk plugin, Sublime menyediakan tiga jenis perintah yang berbeda.

  • Perintah teks memberikan akses ke konten file/buffer yang dipilih melalui objek View
  • Perintah Window memberikan referensi ke jendela saat ini melalui objek Window
  • Perintah aplikasi tidak memiliki referensi ke jendela atau file/buffer tertentu dan lebih jarang digunakan

Karena kita akan memanipulasi konten CSS file/buffer dengan plugin ini, kita akan menggunakan kelas sublime_plugin.TextCommand sebagai dasar dari perintah Prefixr kustom. Ini membawa kita ke topik penamaan kelas perintah.

Dalam kerangka plugin yang disediakan oleh Sublime, Anda akan melihat kelas:

Ketika ingin menjalankan perintah, kita mengeksekusi kode berikut di konsol:

Sublime akan mengambil kelas apa pun yang memperpanjang salah satu kelas sublime_plugin
(TextCommand, WindowCommand atau ApplicationCommand), hapus Command suffix dan kemudian konversikan CamelCase into menjadi garis underscore_notation untuk nama perintah.

Jadi, untuk membuat perintah dengan nama prefixr, kelas harus PrefixrCommand.


Langkah 3 - Memilih Teks

Salah satu fitur Sublime yang paling berguna adalah kemampuan untuk memiliki banyak pilihan.

Sekarang kita memiliki plugin yang dinamai dengan benar, kita dapat memulai proses mengambil CSS dari buffer saat ini dan mengirimkannya ke Prefixr API. Salah satu fitur Sublime yang paling berguna adalah kemampuan untuk memiliki banyak pilihan. Saat kita mengambil teks yang dipilih, kita perlu menulis plug kita ke pegangan tidak hanya pilihan pertama, tetapi semuanya.

Karena kita sedang menulis perintah teks, kita memiliki akses ke tampilan saat ini melalui self.view. Metode sel() dari objek View mengembalikan RegionSet iterable dari pilihan saat ini. Kita mulai dengan memindai ini untuk kawat gigi keriting. Jika kurung kurawal tidak ada, kita dapat memperluas pilihan ke kurung kurawal untuk memastikan seluruh blok diawali. Apakah pilihan kita termasuk kurung kurawal juga akan berguna nantinya untuk mengetahui apakah kita dapat mengubah spasi dan memformat pada hasil yang kita dapatkan dari API Prefixr.

Kode ini menggantikan konten metode kerangka run().

Jika kita tidak menemukan kawat gigi keriting, kita mengulangi setiap pilihan dan menyesuaikan pilihan dengan kurung kurawal penutupan terdekat. Selanjutnya, kita menggunakan perintah built-in expand_selection dengan to arg set ke brackets untuk memastikan kita memiliki konten lengkap dari setiap blok CSS yang dipilih.

Jika Anda ingin memeriksa ulang pekerjaan Anda sejauh ini, harap bandingkan sumbernya dengan file Prefixr-1.py di file kode sumber kode.


Langkah 4 - Threading

Untuk mencegah koneksi yang buruk dari mengganggu pekerjaan lain, kita perlu memastikan bahwa panggilan API Prefixr terjadi di background.

Pada titik ini, pilihan telah diperluas untuk mengambil konten penuh dari setiap blok CSS. Sekarang, kita perlu mengirimnya ke Prefixr API. Ini adalah permintaan HTTP sederhana, yang akan kita gunakan modul urllib dan urllib2 untuk. Namun, sebelum kita memulai permintaan web, kita perlu memikirkan bagaimana permintaan web yang berpotensi lamban dapat mempengaruhi kinerja editor. Jika, karena suatu alasan, pengguna berada pada latensi tinggi, atau koneksi lambat, permintaan ke API Prefixr dapat dengan mudah memerlukan waktu beberapa detik atau lebih.

Untuk mencegah koneksi yang buruk dari mengganggu pekerjaan lain, kita perlu memastikan bahwa panggilan API Prefixr terjadi di background. Jika Anda tidak tahu apa-apa tentang threading, penjelasan yang sangat mendasar adalah bahwa utas adalah cara bagi sebuah program untuk menjadwalkan beberapa set kode agar berjalan pada saat yang sama. Ini sangat penting dalam kasus kami karena memungkinkan kode yang mengirim data ke, dan menunggu respons dari, Prefixr API mencegah pembekuan interface pengguna Sublime lainnya dari pembekuan.


Langkah 5 - Membuat Thread

Kita akan menggunakan modul threading Python untuk membuat utas. Untuk menggunakan modul threading, kita membuat kelas baru yang memperluas threading.Thread disebut PrefixrApiCall. Kelas-kelas yang memperpanjang threading.Thread termasuk metode run() yang berisi semua kode yang akan dieksekusi di utas.

Di sini kita menggunakan metode utas __init __() untuk mengatur semua nilai yang akan diperlukan selama permintaan web. Metode run() berisi kode untuk mengatur dan menjalankan permintaan HTTP untuk API Prefixr. Karena utas beroperasi bersamaan dengan kode lain, tidak mungkin untuk langsung mengembalikan nilai. Alih-alih, kita mengatur self.result ke hasil panggilan.

Karena kita baru saja mulai menggunakan beberapa modul di plugin, kita harus menambahkannya ke pernyataan impor di bagian atas skrip.

Sekarang kita memiliki kelas utas untuk melakukan panggilan HTTP, kita perlu membuat utas untuk setiap pilihan. Untuk melakukan ini, kita melompat kembali ke metode run() dari kelas PrefixrCommand kita dan menggunakan loop berikut:

Kita melacak setiap utas yang dibuat dan kemudian memanggil metode start() untuk memulai masing-masing.

Jika Anda ingin memeriksa pekerjaan Anda sejauh ini, harap bandingkan sumbernya dengan file Prefixr-2.py di file kode sumber kode.


Langkah 6 - Mempersiapkan Hasil

Sekarang kita telah memulai permintaan API Awalan yang sebenarnya, kita perlu menyiapkan beberapa detail terakhir sebelum menangani respons.

Pertama, kita menghapus semua pilihan karena kita memodifikasinya sebelumnya. Nanti kita akan mengaturnya kembali ke keadaan wajar.

Selain itu kita memulai objek Edit baru. Ini mengelompokkan operasi untuk undo dan redo. Kita menetapkan bahwa kita sedang membuat grup untuk perintah prefixr.

Sebagai langkah terakhir, kita memanggil metode yang akan ditulis selanjutnya yang akan menangani hasil permintaan API.


Langkah 7 - Menangani Thread

Pada titik ini utas kita sedang berjalan, atau mungkin bahkan selesai. Selanjutnya, kita perlu mengimplementasikan metode handle_threads() yang baru saja kita rujuk. Metode ini akan mengulang daftar utas dan mencari utas yang tidak lagi berjalan.

Jika utas masih hidup, kita menambahkannya ke daftar utas untuk memeriksa lagi nanti. Jika hasilnya gagal, kita abaikan, namun untuk hasil yang baik kita memanggil metode replace() baru yang akan segera ditulis.

Jika ada utas yang masih hidup, kita perlu memeriksanya lagi segera. Selain itu, ini merupakan peningkatan interface pengguna yang bagus untuk memberikan indikator aktivitas untuk menunjukkan bahwa plugin kita masih berjalan.

Bagian pertama dari kode menggunakan nilai integer sederhana yang disimpan dalam variabel i untuk memindahkan = bolak-balik antara dua tanda kurung. Bagian terakhir adalah yang paling penting. Ini memberitahu Sublime untuk menjalankan metode handle_threads() lagi, dengan nilai baru, dalam 100 milidetik lainnya. Ini seperti fungsi setTimeout() di JavaScript.

Kata kunci lambda adalah fitur Python yang memungkinkan kita membuat fungsi baru tanpa nama, atau anonim.

Metode sublime.set_timeout() membutuhkan fungsi atau metode dan jumlah milidetik hingga harus dijalankan. Tanpa lambda kita dapat mengatakan bahwa ingin menjalankan handle_threads(), tetapi kita tidak akan dapat menentukan parameternya.

Jika semua utas telah selesai, kita tidak perlu menetapkan batas waktu lain, tetapi kita menyelesaikan kelompok undo kita dan memperbarui interface pengguna untuk memberi tahu pengguna bahwa semuanya sudah selesai.

Jika Anda ingin memeriksa pekerjaan Anda sejauh ini, harap bandingkan sumbernya dengan file Prefixr-3.py di file kode sumber kode.


Langkah 8 - Melakukan Penggantian

Dengan utas kita ditangani, kita sekarang hanya perlu menulis kode yang menggantikan CSS asli dengan hasil dari API Prefixr. Seperti yang kita rujuk sebelumnya, kita akan menulis metode yang disebut replace().

Metode ini menerima sejumlah parameter, termasuk objek Edit untuk membatalkan, utas yang meraih hasil dari Prefixr API, jika seleksi asli termasuk kurung kurawal, dan akhirnya pemilihan offset.

Offset diperlukan ketika berhadapan dengan banyak pilihan. Saat kita mengganti blok CSS dengan CSS yang diawali, panjang blok itu akan bertambah. Offset memastikan kita mengganti konten yang benar untuk pemilihan selanjutnya karena teks menempatkan semua perubahan pada setiap penggantian.

Langkah selanjutnya adalah menyiapkan hasil dari Prefixr API untuk dimasukkan sebagai pengganti CSS. Ini termasuk mengubah akhir baris dan lekukan agar sesuai dengan dokumen saat ini dan seleksi asli.

Sebagai langkah terakhir, kita menetapkan pilihan pengguna untuk memasukkan akhir dari baris terakhir CSS baru yang kita masukkan, dan kemudian mengembalikan offset yang disesuaikan untuk digunakan untuk pilihan lebih lanjut.

Jika Anda ingin memeriksa pekerjaan Anda sejauh ini, harap bandingkan sumbernya dengan file Prefixr-4.py di file kode sumber kode.


Langkah 9 - Manipulasi Ruang Putih

Kita menggunakan dua metode khusus selama proses penggantian untuk menyiapkan CSS baru untuk dokumen. Metode-metode ini mengambil hasil dari Prefixr dan memodifikasinya agar sesuai dengan dokumen saat ini.

normalize_line_endings() mengambil string dan memastikannya cocok dengan akhiran baris dari file saat ini. Kita menggunakan kelas Settings dari API Sublime untuk mendapatkan akhiran garis yang tepat.

Metode fix_whitespace() sedikit lebih rumit, tetapi melakukan manipulasi yang sama, hanya untuk lekukan dan spasi putih di blok CSS. Manipulasi ini hanya benar-benar berfungsi dengan satu blok CSS, jadi kita keluar jika satu atau lebih kawat gigi dimasukkan dalam pilihan asli.

Kalau tidak, kita mulai dengan menentukan tingkat indentasi CSS asli. Ini dilakukan dengan mencari spasi putih di awal seleksi.

Selanjutnya kita memotong spasi dari CSS yang diawali dan menggunakan pengaturan tampilan saat ini untuk indentasi CSS yang dipangkas ke tingkat asli menggunakan tab atau spasi baik tergantung pada pengaturan editor saat ini.

Kita menyelesaikan metode ini dengan menggunakan awal dan spasi tambahan putih asli untuk memastikan CSS awalan baru cocok tepat di tempat asli.

Dengan metode fix_whitespace() kita menggunakan modul regular expression (re) Python, jadi kita perlu menambahkannya ke daftar impor di bagian atas skrip.

Dan dengan ini, kita telah menyelesaikan proses penulisan perintah prefixr. Langkah selanjutnya adalah membuat perintah itu mudah dijalankan dengan menyediakan pintasan keyboard dan entri menu.


Langkah 10 - Ikatan Kunci

Sebagian besar pengaturan dan modifikasi yang dapat dibuat untuk Sublime dilakukan melalui file JSON, dan ini berlaku untuk binding utama. Binding kunci biasanya khusus OS, yang berarti bahwa tiga file binding kunci perlu dibuat untuk plugin Anda. File-file tersebut harus bernama Default (Windows).sublime-keymap, Default (Linux).sublime-keymap dan Default (OSX).sublime-keymap.

File .sublime-keymap berisi larik JSON yang berisi objek JSON untuk menentukan ikatan kunci. Objek JSON harus berisi keys dan command, dan juga dapat berisi kunci args jika perintah tersebut membutuhkan argumen. Bagian yang paling sulit tentang memilih mengikat kunci adalah untuk memastikan mengikat kunci tidak sudah digunakan. Ini dapat dilakukan dengan masuk ke Preferences > Key Bindings – Default dan mencari pengikat kunci yang ingin Anda gunakan. Setelah Anda menemukan ikatan yang tidak terpakai yang sesuai, tambahkan ke .sublim-keymap Anda file.

Biasanya ikatan kunci Linux dan Windows adalah sama. Tombol cmd pada OS X ditentukan oleh string super di .sublime-keymap file. Ketika porting kunci yang mengikat LOS, itu umum untuk kunci ctrl pada Windows dan Linux untuk swap untuk super pada OS X. Namun, ini mungkin bukan gerakan tangan yang paling alami, jadi jika mungkin coba dan uji ikatan tombol Anda dengan keyboard sungguhan.


Langkah 11 - Entri Menu

Salah satu hal keren tentang memperluas Sublime adalah memungkinkan untuk menambahkan item ke struktur menu dengan membuat .sublime-menu file. Menufil harus dinamai nama spesifik untuk menunjukkan menu apa yang mereka pengaruhi:

  • Main.sublime-menu mengontrol menu program utama
  • Side Bar.sublime-menu menu klik kanan pada file atau folder di sidebar
  • Context.sublime-menu mengontrol menu klik kanan pada file yang sedang diedit

Ada beberapa file menu lain yang mempengaruhi berbagai menu lain di seluruh interface. Menjelajah melalui paket Default adalah cara termudah untuk mempelajari semua ini.

Untuk Prefixr kita ingin menambahkan item menu ke menu Edit dan beberapa entri ke menu Preferensi untuk pengaturan. Contoh berikut adalah struktur JSON untuk entri menu Edit. Saya telah menghapus entri untuk menu Preferences karena cukup bersarang beberapa tingkat.

Bagian yang perlu diperhatikan adalah kunci id. Dengan menentukan id entri menu yang ada, dimungkinkan untuk menambahkan entri tanpa mendefinisikan ulang struktur yang ada. Jika Anda membuka Main.sublime-menu file dari paket Default dan menelusuri sekitar, Anda dapat menentukan id apa yang ingin Anda tambahkan entri Anda.

Pada titik ini paket Prefixr Anda akan terlihat hampir sama dengan versi resmi di GitHub.


Langkah 12 - Mendistribusikan Paket Anda

Sekarang Anda telah meluangkan waktu untuk menulis plugin Sublime yang berguna, sekarang saatnya untuk masuk ke tangan pengguna lain.

Sublime mendukung mendistribusikan file zip dari direktori paket sebagai cara sederhana untuk berbagi paket. Cukup zip folder paket Anda dan ubah ekstensi menjadi .sublime-package. Pengguna lain sekarang dapat menempatkan ini dalam direktori Paket yang Terpasang dan memulai kembali Sublime untuk menginstal paket.

Seiring dengan ketersediaan yang mudah bagi banyak pengguna, memiliki paket Anda tersedia melalui Kontrol Paket memastikan pengguna ditingkatkan secara otomatis ke pembaruan terbaru Anda.

Meskipun ini pasti dapat bekerja, ada juga manajer paket untuk Sublime yang disebut Package Controlyang mendukung daftar induk paket dan peningkatan otomatis. Untuk mendapatkan paket Anda ditambahkan ke saluran default, cukup host di GitHubor BitBucket dan kemudian garpu file saluran (pada GitHub, atau BitBucket), tambahkan repositori Anda dan kirim pull request. Setelah pull request diterima, paket Anda akan tersedia untuk ribuan pengguna yang menggunakan Sublime. Seiring dengan ketersediaan yang mudah bagi banyak pengguna, memiliki paket Anda tersedia melalui Kontrol Paket memastikan pengguna ditingkatkan secara otomatis ke pembaruan terbaru Anda.

Jika Anda tidak ingin meng-host di GitHub atau BitBucket, ada sistem saluran/repositori customJSON yang dapat digunakan untuk menjadi tuan rumah di mana saja, sambil tetap menyediakan paket untuk semua pengguna. Ini juga menyediakan fungsionalitas canggih seperti menentukan ketersediaan paket oleh OS. Lihat halaman PackageControl untuk lebih jelasnya.


Go Write Some Plugins!

Sekarang kita telah membahas langkah-langkah untuk menulis plugin Sublime, sekarang saatnya bagi Anda untuk menyelam! Komunitas plugin Sublime membuat dan menerbitkan fungsi baru hampir setiap hari. Dengan setiap rilis, Sublime menjadi semakin kuat dan serbaguna. Sublime Text Forum adalah tempat yang tepat untuk mendapatkan bantuan dan berbicara dengan orang lain tentang apa yang Anda bangun.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.