Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development

Cara membuat ekstensi Brackets

by
Difficulty:IntermediateLength:LongLanguages:

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

Beberapa saat yang lalu saya menulis tentang update terbaru untuk editor Brackets. Brackets adalah sebuah proyek open source yang difokuskan pada web standar dan dibangun dengan teknologi web. Ini memiliki fokus sempit dan karena itu mungkin tidak memiliki fitur tertentu yang Anda telah datang ke tergantung. Untungnya, Brackets di berkati dengan API powerful ekstensi yang memungkinkan Anda menambahkan sejumlah fitur baru. Dalam artikel ini, saya akan membahas API ini dan menunjukkan bagaimana Anda bisa membangun ekstensi Anda sendiri.

Sangat penting bahwa Anda ingat bahwa Brackets adalah dalam perkembangan aktif. Artikel ini sedang ditulis pada Desember tahun 2013. Sangat jelas mungkin bahwa kode yang ditunjukkan di bawah ini sekarang usang. Ingat-ingat dan pastikan untuk memeriksa wiki untuk update terbaru pada ekstensi API.


Persiapan

Aku akan menganggap Anda membaca artikel terakhir saya dan sudah akrab dengan ektensi manager. Ini menyediakan sederhana, metode satu klik menginstal ekstensi. Salah satu cara terbaik Anda dapat belajar untuk menulis ekstensi adalah dengan melihat kerja yang dilakukan oleh orang lain (yang adalah bagaimana saya belajar). Saya akan merekomendasikan mendapatkan beberapa ekstensi (ada hampir 200 tersedia sekarang) dan utak-atik kode mereka. Jangan takut untuk memecahkan beberapa sementara kau di itu.

Brackets ekstensi menempatkan semua diinstal dalam satu folder utama. Untuk menemukan folder tersebut, buka menu Help dan pilih "Show Extenstions Folder". Untuk menginstal OS X saya, ini terletak di /Users/ray/Library/Application Support/bracket/ektensions/user. Jika Anda pergi dari folder itu, Anda akan melihat folder disabled juga. Brackets akan membuat usaha gagah berani untuk dimuat tidak peduli apa, tetapi jika Anda pernah menemukan diri dalam situasi di mana Brackets sepenuhnya crapped tempat tidur dan hanya tidak akan bekerja, mempertimbangkan ekstensi berpotensi buruk untuk pindah ke folder yang disabled. Nanti dalam artikel ini, saya akan membahas bagaimana Anda dapat memantau dan debug ekstensi untuk membantu mencegah masalah seperti itu di tempat pertama.

Mulai dengan pergi ke folder user dan membuat folder baru, helloworld1. Ya, meskipun itu benar-benar timpang, kita akan membangun sebuah ekstensi HelloWorld. Jangan membenci aku, aku suka sederhana. Di dalam folder itu buat sebuah file baru yang disebut main.js. Daftar yang menunjukkan apa yang harus isi file ini. Catatan bahwa dalam artikel ini saya akan pergi melalui beberapa iterasi yang berbeda dari ekstensi helloworld. Masing-masing akan diberi nama dengan sejumlah semakin tinggi. Jadi contoh pertama kami adalah dari helloworld1, helloworld2 berikutnya, dan seterusnya. Itu akan masuk akal bagi Anda untuk hanya Salin kode ke satu folder, helloworld, daripada menyalin masing-masing sendiri. Jika Anda melakukannya, Anda akan memiliki beberapa ekstensi terkait yang menjalankan sekaligus dan yang pasti dapat membingungkan.

Baris pertama mendefinisikan ekstensi kami sebagai modul yang akan dipakai oleh Brackets secara otomatis ketika aplikasi di muat. Sisa ekstensi adalah pesan log kustom (Anda akan melihat mengapa di kedua) dan memanggil logger itu. Setelah Anda memiliki file ini disimpan, pergi kembali ke Brackets, pilih Debug menu, dan tekan Reload. (Anda juga dapat menggunakan perintah / Control + R untuk reload juga.)

Brackets akan reload dan... tidak ada yang akan terjadi Ekstensi kami membangun benar-benar tidak melakukan apa pun yang kita bisa melihat, tapi itu melakukan log ke konsol. Tapi di mana konsol itu? Brackets menyediakan cara yang mudah untuk melihat konsol. Cukup kembali ke Debug menu dan pilih Show Developer Tools. Ini akan membuka tab baru di Chrome dengan Dev Tool UI yang akrab. Di screen shot di bawah aku sudah menyoroti log kami. Ekstensi lainnya, dan Brackets itu sendiri, juga akan log pesan ke layar ini. Dengan awalan pesan log saya dengan [helloworld], aku bisa membuat objek saya sendiri sedikit lebih mudah untuk ditemukan.

Brackets console messages

Perhatikan bahwa console.api Chrome penuh bekerja di sini. Anda dapat melakukan hal-hal seperti ini untuk memformat pesan konsol:

Silahkan menggila, tetapi mencoba untuk menghapus pesan ini sebelum Anda berbagi kode Anda dengan seluruh dunia. Jika Anda penasaran, Anda tidak dapat menggunakan tool dev di browser lain seperti Firefox, pada saat ini.


Integrasi poin

Sekarang bahwa Anda tahu dasar-dasar (sangat), mari kita bicara tentang apa yang dapat dilakukan Brackets ekstensi untuk editor:

  • Mereka dapat membuat pintasan keyboard, memungkinkan mereka untuk merespon keystroke tombol kustom.
  • Mereka dapat menambahkan top level menu.
  • Mereka dapat menambahkan menu konteks (dan untuk area tertentu, seperti daftar file atau jendela editor).
  • Mereka dapat membuat item UI. Ini bisa menjadi sebuah modal dialog atau bahkan sebuah panel. (Saat ini panel terkunci ke bagian bawah layar).
  • Mereka dapat membuat penyedia linting (pada dasarnya mereka dapat mendaftar diri sebagai sebuah kode checker untuk jenis file).
  • Mereka dapat membuat mereka sendiri inline editor (fitur utama dari Brackets).
  • Mereka dapat mendaftar sebagai penyedia dokumentasi (misalnya, menambahkan MDN dukungan untuk docs).
  • Mereka dapat mengintegrasikan dengan Quick Find dan Quick Open.
  • Mereka dapat menambahkan kode kustom petunjuk dan sintaks warna.
  • Mereka dapat membaca file dan dibuka di editor serta mengubahnya. (Mereka juga dapat melihat teks yang saat ini dipilih, jika ada.)

Yang menggambarkan bagaimana ekstensi dapat memodifikasi Brackets, tapi apa yang bisa ekstensi benar-benar lakukan dalam kode? Menjaga dalam pikiran bahwa Anda sedang menulis ekstensi standar web murni (HTML, JavaScript dan CSS), Anda benar-benar memiliki sedikit kekuasaan. Batas hanya berhubungan dengan data biner. Ada File system API yang memberi Anda kontrol atas file namun terbatas hanya data teks. Untungnya, Anda memiliki jalan keluar.

Semua Brackets ektensi dapat mengintegrasikan dengan Node.js. Jika Anda sudah punya paket Node.js yang ada ekstensi Anda dapat membuat panggilan untuk itu dan lakukan, Yah, apa pun Node.js dapat lakukan, yang pada dasarnya apa pun.

Mari kita update ekstensi kami untuk mengintegrasikan dengan editor sedikit lebih baik. Saya akan mulai dengan hanya menambahkan item menu untuk ekstensi.

Kami punya beberapa perubahan di sini jadi mari kita mengatasi mereka satu per satu. Anda akan melihat bahwa ekstensi dimulai dengan tiga panggilan ke brackets.getModule. Semua ekstensi memiliki akses ke objek brackets yang menyediakan API di mana kita dapat memuat di fungsionalitas core dari editor. Dalam kasus ini ekstensi telah memuat dua Perpustakaan kita akan membutuhkan untuk menu (Menus dan CommandManager) dan salah satu yang akan digunakan untuk membantu menginisialisasi ekstensi (AppInit).

Mari kita bicara tentang AppInit. Anda dapat melihat bahwa sebagian besar ekstensi sekarang penuh dengan callback appReady. Callback ini dijalankan ketika Brackets telah selesai meload dan umumnya dianggap sebagai "best practice" untuk ekstensi untuk membuat penggunaan.

Mendaftar menu item akan mengambil beberapa langkah. Saya mulai dengan mendefinisikan "ID perintah", pengenal unik untuk item yang aku akan tambahkan ke UI. Cara yang khas untuk melakukan ini adalah dengan format extensionname.someaction. Dalam kasus saya, saya menggunakan helloworld.execute. Saya kemudian dapat mendaftar perintah ini bersama dengan fungsi (handleHelloWorld) yang harus disebut ketika perintah dijalankan.

Langkah terakhir adalah untuk menambahkan perintah ini ke menu. Anda mungkin bisa menebak bahwa saya item menu akan ditambahkan dibawah menu View berdasarkan nilai ini: Menus.AppMenuBar.VIEW_MENU. Bagaimana saya tahu nilai itu? Sederhana, saya melihat ekstensi lainnya melakukannya. Serius meskipun, belum daftar spesifik item seperti ini. Jangan lupa bahwa Bracket merupakan open source. Saya dengan mudah dapat mampir ke GitHub repo dan mengeceknya. Dalam kasus ini, file adalah Menus.js, terletak di Github. Di sana saya dapat melihat dimana core yang berbeda berbagai menu didefinisikan:

Sebagai aturan umum, masuk akal untuk memiliki setidaknya pemahaman sepintas tentang apa saja tersedia dalam Brackets itu sendiri. Ekstensi Anda akan, dari waktu ke waktu, membuat penggunaan beberapa fitur yang berbeda sehingga pasti dalam kepentingan terbaik Anda untuk setidaknya mengetahui letaknya.

Setelah reload Brackets, sekarang Anda akan melihat menu item dalam menu View. Persis di mana itu adalah mungkin sedikit acak karena Anda mungkin memiliki ekstensi lainnya terinstal.

View menu updated

Anda benar-benar dapat menjadi sedikit lebih spesifik tentang posisi Anda. Sekali lagi, ini adalah di mana kode sumber akan membantu Anda. File yang sama saya terhubung ke atas juga mengandung definisi addMenuItem.


Menaruh beberapa lipstik pada celeng itu

Sekarang bahwa Anda telah melihat contoh sederhana bagaimana ekstensi dapat mengintegrasikan ke dalam Brackets, mari kita lihat bagaimana kami memperbarui UI. Pada versi sebelumnya kode kita, peringatan digunakan untuk mengirim pesan. Sementara ini bekerja, tidak sangat cantik. Kode Anda dapat mengakses editor Brackets seperti kode modifikasi DOM lainnya. Sementara Anda dapat melakukan apapun yang Anda inginkan, ada beberapa cara standar ekstensi memperbarui UI dalam tanda Brackets. (Sebagai peringatan, pada umumnya Anda tidak ingin menyentuh DOM editor utama UI. Anda bisa, tapi dengan ada pembaruan, kode dapat merusak. Juga, pengguna mungkin tidak senang jika perubahan ekstensi Anda sesuatu core untuk Brackets.)

Metode pertama kita akan melihat menggunakan modal dialog. Brackets sudah menggunakan ini dan memiliki API tersedia untuk ekstensi untuk dipanggil. Sebagai contoh sederhana, mari kita hanya update ekstensi HelloWorld untuk menggunakan modal sebagai gantinya.

Perhatikan penambahan 2 modul Brackets tambahan: Dialogs dan DefaultDialogs. Perubahan berikutnya adalah di handleHelloWorld. Salah satu metode di Perpustakaan Dialog adalah kemampuan untuk menampilkan dialog (tidak mengherankan di sana, saya kira). Metode menginginkan class, judul, dan body, dan hanya itu. Ada lebih banyak yang dapat Anda lakukan dengan dialog, tetapi untuk sekarang, ini menunjukkan fitur. Sekarang ketika kita menjalankan perintah, kita mendapatkan UI yang jauh lebih cantik. (Bersama dengan tombol standar dan perilaku untuk menangani penutupan dialog.)

Dialog example

Itu adalah salah satu contoh, sekarang mari kita melihat lain: menciptakan panel bawah. Sebagai dengan dialog, kami telah mendapat dukungan dari Brackets untuk membuatnya lebih mudah. Mari kita lihat contoh dan kemudian saya akan menjelaskan perubahan.

Mari kita fokus pada perubahan. Pertama, aku masukan modul Dialog seperti saya tidak lagi menggunakan mereka. Sebaliknya, kami meload PanelManager. Dibawah di blok appReady saya telah didefinisikan panel baru yang menggunakan PanelManager API metode createBottomPanel. Seperti perintah menu ini mendapatkan ID unik sehingga saya hanya menggunakan kembali HELLOWORLD_EXECUTE. Argumen kedua adalah sebuah blok jQuery-wrapped html (dan dalam kasus Anda bertanya-tanya, ya kita dapat melakukan ini lebih bagus), dan akhirnya, ukuran minimum. Ini set up panel tetapi tidak benar-benar menjalankannya.

Dalam event handler, kami telah mengikat ke menu, kita dapat meminta panel jika itu terlihat dan kemudian menyembunyikan atau menampilkan itu. Bagian itu harus cukup sepele. Untuk bersenang-senang, saya telah menambahkan sedikit lebih kompleksitas. Perhatikan bahwa CommandManager memungkinkan kita mendapatkan menu item dan mengatur properti yang dicek. Ini mungkin tidak perlu karena pengguna dapat melihat panel dengan mudah cukup, tetapi menambahkan cek hanya membuat hal-hal yang sedikit lebih jelas. Di sceen shot di bawah Anda dapat melihat panel dalam keadaan yang terlihat.

Panel example

Segera Anda mungkin bertanya-tanya tentang panel HTML. Apakah ada cara yang lebih baik untuk memberikan HTML? Bagaimanapun untuk style itu? Ya, mari kita melihat versi yang lebih maju.

Seperti sebelumnya, aku akan fokus pada perubahan. Catatan pertama saya telah menyertakan sebuah variabel disebut panelHtml yang dimuat melalui require. Hal ini memungkinkan saya mendefinisikan HTML di luar kode JavaScript. (Anda juga dapat menggunakan template engine. Brackets dipaketkan dengan Mustache.) HTML di belakang panel agak sederhana.

Kembali ke main.js, saya telah menunjukkan fitur lain, loadStyleSheet. Hal ini memungkinkan Anda memuat ekstensi style sheet tertentu. Saya membuat sebuah file, helloworld.css, dengan beberapa sederhana (tapi enak) style CSS.

Perhatikan bahwa saya prefixed style dengan nama unik. Ini akan membantu memastikan class saya tidak bertentangan dengan apa pun yang dibangun ke dalam Brackets. Dengan perubahan sederhana ini panel saya sekarang terlihat jauh lebih baik, dan Anda dapat melihat mengapa saya dikenal di seluruh dunia untuk keterampilan desain yang unggul.

Epic CSS

Packaging dan Sharing menendang pantat ekstensi

Tentu saja, hanya membuat ekstensi Brackets keren tidaklah cukup. Anda mungkin (mudah-mudahan!) ingin berbagi dengan orang lain. Salah satu pilihan adalah untuk hanya men-zip direktori dan meletakkan pada website Anda. Orang-orang dapat men-download zip, ekstrak, dan salin ke folder ekstensi Brackets mereka.

Tapi itu tidak keren. Anda ingin menjadi keren, benar kan? Untuk berbagi ekstensi dan membuatnya tersedia melalui ekstensi Bracker manajer, Anda hanya perlu menambahkan package.json file untuk ekstensi Anda. Jika Anda pernah menggunakan Node.js, maka hal ini akan tampak akrab. Berikut adalah contoh salah satu ekstensi kami.

Sebagian besar ini cukup jelas, tetapi bagian yang penting adalah blok engines. Brackets updatenya sendiri cukup cepat. Jika Brackers menambahkan fitur tertentu di beberapa titik yang mengandalkan ekstensi Anda, Anda dapat menambahkan simple condition berikut untuk memastikan orang-orang tidak mencoba untuk menginstal ekstensi Anda pada versi yang kompatibel. (Anda dapat menemukan daftar lengkap pengaturan tersedia di Wiki.)

Setelah Anda melakukan ini, Bagian selanjutnya adalah untuk meng-upload ke Brackets Registry. Anda harus log in melalui akun GitHub, tetapi setelah Anda sudah melakukannya, Anda dapat kemudian cukup meng-upload zip. Ekstensi Anda kemudian akan tersedia bagi siapa saja yang menggunakan Brackets. Bahkan lebih baik, jika Anda memperbarui ekstensi Anda, manajer ekstensi akan benar-benar dapat memberitahu ini kepada pengguna sehingga mereka tahu ada.


Apa lagi?

Mudah-mudahan, Anda telah melihat betapa mudahnya untuk memperpanjang Brackets. Ada lagi kami tidak terangkan, seperti Linting API dan NodeJS integrasi, tapi artikel ini harus lebih dari cukup untuk Anda mulai. Sebagai pengingat, jangan lupa ada koleksi banyak ekstensi yang tersedia bagi Anda untuk mulai bermain sekarang. Semoga sukses!

Advertisement
Advertisement
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.