Saya Berkontribusi Pada Editor Sumber Terbuka, Anda Juga Bisa

Beberapa bulan yang lalu, postingan Jason Grigsby tentang pelengkapan otomatis dalam formulir menjadi perbincangan. Saya menyukai gagasan yang memungkinkan pengguna untuk mengisi rincian kartu kredit mereka dengan mengambil gambar kartu mereka. Yang tidak saya sukai adalah mempelajari semua nilai yang mungkin untuk isi otomatis dengan hati. Aku mulai malas di hari tuaku.

Akhir-akhir ini, saya dimanjakan dengan penggunaan editor yang melakukan pelengkapan otomatis cerdas untuk saya, sesuatu yang di masa lalu hanya ditawarkan oleh IDE kompleks yang sangat besar. Membuka editor pilihan saya, saya membuat elemen input dan menambahkan atribut autocomplete , hanya untuk menemukan bahwa penyelesaian kode memberi saya status on atau off . Mengecewakan.

Yang saya inginkan adalah sebagai berikut:

Hal hebat tentang lingkungan pengembangan kami akhir-akhir ini adalah kami membangun alat yang kami gunakan dalam teknologi yang kami gunakan untuk menulis. Ya, ini terdengar membingungkan — kami telah mencapai kode Inception. Node.js memungkinkan kita untuk menjalankan JavaScript di bagian belakang, dan dengan Electron kita dapat membuat aplikasi yang dapat diinstal untuk semua platform menggunakan HTML, CSS, dan JavaScript.

Bacaan Lebih Lanjut tentang SmashingMag:

• Jadi Anda Memutuskan Untuk Membuka Sumber Proyek Di Tempat Kerja
• Panduan Singkat Untuk Lisensi Sumber Terbuka
• Cara Memulai Proyek Sumber Terbuka
• Kasus Untuk Desain Sumber Terbuka

Atom adalah editor pertama yang menggunakan teknologi ini dan memungkinkan kontribusi dengan menjadi open source, diikuti oleh Microsoft Visual Studio Code.

Hampir semua editor lain yang digunakan memungkinkan kita untuk menulis ekstensi, plugin, atau koleksi cuplikan dalam berbagai format. Saya sengaja tidak ingin menulis plugin atau ekstensi, melainkan ingin menambahkan fungsi ini ke inti editor. Plugin, ekstensi, dan cuplikan memiliki kelebihannya sendiri; misalnya, mereka mudah diperbarui. Masalahnya adalah mereka harus ditemukan dan diinstal per pengguna. Saya menganggap pelengkapan otomatis terlalu penting dan ingin meretas editor itu sendiri.

Baik Atom dan Visual Studio Code tersedia di GitHub dan dilengkapi dengan instruksi tentang cara memperluasnya. Tantangannya adalah bahwa ini bisa terasa menakutkan. Saya di sini hari ini untuk menunjukkan kepada Anda bahwa itu tidak sesulit yang Anda bayangkan. Visual Studio Code adalah editor saya saat ini, dan fitur pelengkapan otomatis yang luar biasa. Itu yang ingin saya atasi.

Alat yang dapat diperluas dan dapat disesuaikan bukanlah hal baru. Sebagian besar dari apa yang kami gunakan dapat diperluas dengan satu atau lain cara, baik dalam bentuk add-on, plugin, atau bahasa khusus. Editor pertama yang saya gunakan dalam kemarahan adalah Allaire dan Macromedia's HomeSite, yang memiliki bahasa funky seperti VTML, WIZML dan JScript, JavaScript versi Windows pada saat itu. Saya menulis banyak ekstensi dan bilah alat untuk editor itu, yang sangat meningkatkan produktivitas perusahaan saya saat itu.

Untungnya, hari-hari ini, perusahaan memahami bahwa menawarkan bahasa khusus hanya membuang waktu, ketika tumpukan web telah berkembang menjadi jauh lebih menarik untuk membangun aplikasi.

Jika Anda mengunduh Visual Studio Code sekarang, Anda akan melihat bahwa fitur pelengkapan otomatis saya adalah bagian darinya. Dan inilah cara saya melakukannya.

1. Mengeluh

Langkah pertama saya adalah pergi ke repositori GitHub Visual Studio Code dan mengajukan masalah yang meminta fitur ini untuk editor. Ini juga bisa menjadi langkah terakhir Anda jika Anda tidak ingin melakukannya sendiri. Orang lain yang mencari sesuatu untuk dilakukan untuk proyek tersebut mungkin menemukan keluhan Anda dan menanganinya untuk Anda. Dalam kasus saya, saya ingin mencari tahu lebih banyak.

2. Garpu Kode

Alih-alih hanya mengajukan masalah, saya pergi ke repositori GitHub dan mem-fork kodenya. Saya menggunakan akun pribadi saya untuk ini. Anda tidak perlu berafiliasi dengan Microsoft atau ditambahkan ke grup khusus. Repositori bersifat publik dan terbuka. Semua orang dipersilakan. Bahkan ada kode etik untuk kontribusi, yang berarti bahwa orang harus bersikap baik. Saya mengunduh kode ke hard drive saya dan mengikuti petunjuk tentang cara membuat editor secara lokal.

3. Dapatkan Alur Kerja Pengembangan Di Tempat

Kode Visual Studio ditulis dalam Node.js dan TypeScript. Alur pengembangan dimulai dengan skrip yang disediakan oleh tim, yang memberi saya versi pengembangan Visual Studio Code yang berjalan di sebelah yang saya gunakan. Skrip yang berjalan pada baris perintah memastikan bahwa perubahan saya ditangkap dan bahwa setiap kali saya menyimpan kode saya, versi pengembangan editor dimulai ulang dan saya dapat menguji perubahannya. Semua ini didokumentasikan dengan baik, mulai dari membangun dan menjalankan kode dari sumber hingga menyiapkan alur kerja pengembangan. Dan itu tidak tergantung pada platform — Anda mendapatkan instruksi untuk Windows, Linux, dan Mac OS X.

Anda dapat melihat seperti apa ini di komputer saya di tangkapan layar berikut. Editor tampilan besar (1) adalah yang saya gunakan untuk mengkode yang lain; yang di sebelah kanan (3) adalah edisi pengembangan; dan di bagian bawah (2) adalah skrip yang membuat versi baru dari edisi pengembangan. Menulis editor di editor memang terasa aneh, tetapi Anda akan terbiasa.

Jangan berkecil hati jika semua ini tidak berhasil untuk Anda pada perjalanan pertama. Saya menemukan beberapa hambatan dan harus beralih ke Google dan StackOverflow untuk mencari solusi. Komunitas Node.js sangat membantu.

4. Tulis Fungsinya

Selanjutnya, saya siap untuk masuk semua dan menggunakan TypeScript untuk menulis beberapa kode pintar. Saya mengerti bahwa di sinilah banyak orang menyerah, mengingat terlalu sulit untuk melanjutkan.

Masalah terbesar saya adalah saya tidak tahu harus mulai dari mana dengan fungsi ini. Jadi, saya melakukan apa yang kami semua lakukan: Saya melakukan pencarian teks lengkap untuk autocomplete di seluruh proyek. Dengan menggunakan pendekatan yang sangat ilmiah ini, saya menemukan file htmlTags.ts yang penuh dengan definisi tag dan larik nilai atribut. Saya mencari elemen input dan menemukan ini:

 input: new HTMLTagSpecification( nls.localize('tags.input', 'The input element represents a typed data field, usually with a form control to allow the user to edit the data.'), ['accept', 'alt', 'autocomplete:o', 'autofocus:v', 'checked:v', 'dirname', 'disabled:v', 'form', 'formaction', 'formenctype:et', 'formmethod:fm', 'formnovalidate:v', 'formtarget', 'height', 'inputmode:im', 'list', 'max', 'maxlength', 'min', 'minlength', 'multiple:v', 'name', 'pattern', 'placeholder', 'readonly:v', 'required:v', 'size', 'src', 'step', 'type:t', 'value', 'width']),

autocomplete:o itu tampak menarik, jadi saya memeriksa di mana o didefinisikan. Inilah yang saya temukan:

 var valueSets: IValueSets = { … o: ['on', 'off'], … }

Itu tampak seperti apa yang terjadi ketika saya menambahkan atribut autocomplete . Untuk mengubahnya, saya pergi ke definisi standar kemungkinan nilai pelengkapan otomatis dan menyalinnya.

Saya membuat set nilai baru bernama inputautocomplete dan menempelkan nilainya:

 var valueSets: IValueSets = { … inputautocomplete: ['additional-name', 'address-level1', 'address-level2', 'address-level3', 'address-level4', 'address-line1', 'address-line2', 'address-line3', 'bday', 'bday-year', 'bday-day', 'bday-month', 'billing', 'cc-additional-name', 'cc-csc', 'cc-exp', 'cc-exp-month', 'cc-exp-year', 'cc-family-name', 'cc-given-name', 'cc-name', 'cc-number', 'cc-type', 'country', 'country-name', 'current-password', 'email', 'family-name', 'fax', 'given-name', 'home', 'honorific-prefix', 'honorific-suffix', 'impp', 'language', 'mobile', 'name', 'new-password', 'nickname', 'organization', 'organization-title', 'pager', 'photo', 'postal-code', 'sex', 'shipping', 'street-address', 't].sort()el-area-code', 'tel', 'tel-country-code', 'tel-extension', 'tel-local', 'tel-local-prefix', 'tel-local-suffix', 'tel-national', 'transaction-amount', 'transaction-currency', 'url', 'username', 'work'], … }

Saya kemudian pergi ke semua definisi elemen yang mendukung autocomplete dan mengganti o dengan inputautocomplete saya sendiri :

 input: new HTMLTagSpecification( nls.localize('tags.input', 'The input element represents a typed data field, usually with a form control to allow the user to edit the data.'), ['accept', 'alt', 'autocomplete:inputautocomplete' … ]),

Saya menyimpan perubahan saya; skrip membangun kembali editor; Saya mencoba versi pengembangan editor; dan autocomplete bekerja seperti yang saya inginkan.

5. Kirim Permintaan Tarik

Itu tadi. Saya melakukan perubahan saya ke Git (di dalam Visual Studio Code), pergi ke GitHub dan menambahkan permintaan tarik. Beberapa hari kemudian, saya mendapat komentar yang mengatakan bahwa pull request saya berhasil dan apa yang saya lakukan akan menjadi bagian dari build berikutnya.

6. Bingung

Terus terang, saya tidak berpikir ini cukup luar biasa untuk menjamin perubahan inti editor. Aku hanya ingin bermain-main. Banyak dari Anda mungkin berpikiran sama tentang pekerjaan yang Anda lakukan. Dan itulah masalahnya: Kami salah. Berkontribusi pada proyek sumber terbuka tidak mengharuskan Anda menjadi pengembang yang luar biasa. Juga tidak mengharuskan Anda untuk menjadi terkenal atau menjadi bagian dari orang banyak. Terkadang yang perlu Anda lakukan hanyalah melihat sesuatu, menganalisisnya, dan menemukan cara untuk memperbaikinya.

Terserah kita untuk membuat alat yang kita gunakan lebih baik. Jika Anda melihat cara untuk berkontribusi pada proyek sumber terbuka, jangan malu-malu. Anda mungkin orang yang memiliki ide yang begitu jelas dan sederhana sehingga orang lain mengabaikannya. Anda mungkin orang yang membuat sesuatu lebih bermanfaat atau lebih bagus untuk dilihat. Kita semua memiliki keterampilan untuk berkontribusi. Mari kita lakukan lebih dari itu.