ฉันมีส่วนร่วมในโอเพ่นซอร์สเอดิเตอร์ และคุณก็เช่นกัน

ไม่กี่เดือนที่ผ่านมา โพสต์ของ Jason Grigsby เกี่ยวกับการเติมข้อความอัตโนมัติในแบบฟอร์มทำให้รอบนี้ ฉันชอบแนวคิดที่จะให้ผู้ใช้กรอกรายละเอียดบัตรเครดิตโดยการถ่ายภาพบัตร สิ่งที่ฉันไม่ชอบคือการเรียนรู้ค่าที่เป็นไปได้ทั้งหมดสำหรับการป้อนข้อความอัตโนมัติด้วยใจ ฉันขี้เกียจในวัยชรา

เมื่อเร็ว ๆ นี้ ฉันรู้สึกเบื่อหน่ายกับการใช้ตัวแก้ไขที่เติมข้อความอัตโนมัติอัจฉริยะให้ฉัน ซึ่งในอดีตมีเพียง IDEs ที่ซับซ้อนจำนวนมากเท่านั้นที่มีให้ เมื่อเปิดตัวแก้ไขที่ฉันเลือก ฉันได้สร้างองค์ประกอบ input และเพิ่มแอตทริบิวต์ autocomplete เพียงเพื่อจะพบว่าการเติมโค้ดให้สมบูรณ์ได้ให้สถานะของ on หรือ off แก่ฉัน น่าผิดหวัง

สิ่งที่ฉันต้องการมีดังต่อไปนี้:

สิ่งที่ยอดเยี่ยมเกี่ยวกับสภาพแวดล้อมการพัฒนาของเราในทุกวันนี้คือเราสร้างเครื่องมือที่เราใช้ในเทคโนโลยีที่เราใช้ในการเขียน ใช่ มันฟังดูน่าสับสน — เรามาถึงโค้ด Inception แล้ว Node.js ช่วยให้เราเรียกใช้ JavaScript ที่ส่วนหลัง และด้วย Electron เราสามารถสร้างแอปพลิเคชันที่ติดตั้งได้สำหรับทุกแพลตฟอร์มโดยใช้ HTML, CSS และ JavaScript

อ่านเพิ่มเติม เกี่ยวกับ SmashingMag:

• คุณจึงตัดสินใจเปิดโครงการในที่ทำงาน
• คำแนะนำสั้น ๆ เกี่ยวกับใบอนุญาตโอเพ่นซอร์ส
• วิธีการเริ่มโครงการโอเพ่นซอร์ส
• กรณีสำหรับการออกแบบโอเพ่นซอร์ส

Atom เป็นบรรณาธิการคนแรกที่ใช้เทคโนโลยีนี้และอนุญาตให้มีส่วนร่วมโดยเป็นโอเพ่นซอร์ส ตามด้วย Visual Studio Code ของ Microsoft อย่างใกล้ชิด

โปรแกรมแก้ไขอื่นๆ เกือบทั้งหมดที่ใช้งานช่วยให้เราเขียนส่วนขยาย ปลั๊กอิน หรือคอลเล็กชันตัวอย่างในรูปแบบต่างๆ ได้ ฉันไม่ได้ตั้งใจจะเขียนปลั๊กอินหรือส่วนขยาย แต่ต้องการเพิ่มฟังก์ชันนี้ให้กับแกนหลักของโปรแกรมแก้ไข ปลั๊กอิน ส่วนขยาย และตัวอย่างมีข้อดี ตัวอย่างเช่น อัปเดตได้ง่าย ปัญหาคือต้องค้นหาและติดตั้งต่อผู้ใช้แต่ละราย ฉันถือว่าการเติมข้อความอัตโนมัติสำคัญเกินไป และต้องการแฮ็กตัวแก้ไขเองแทน

ทั้ง Atom และ Visual Studio Code มีอยู่ใน GitHub และมาพร้อมกับคำแนะนำเกี่ยวกับวิธีการขยาย ความท้าทายคือสิ่งนี้สามารถรู้สึกน่ากลัว ฉันมาที่นี่วันนี้เพื่อแสดงให้คุณเห็นว่ามันไม่ได้ยากอย่างที่คุณคิด Visual Studio Code เป็นตัวแก้ไขปัจจุบันของฉัน และมีการเติมข้อความอัตโนมัติที่น่าทึ่ง นั่นคือสิ่งที่ฉันต้องการจัดการ

เครื่องมือขยายและปรับแต่งได้นั้นไม่มีอะไรใหม่ สิ่งที่เราใช้ส่วนใหญ่สามารถขยายได้ไม่ทางใดก็ทางหนึ่ง ไม่ว่าจะอยู่ในรูปแบบของส่วนเสริม ปลั๊กอิน หรือภาษาผู้เชี่ยวชาญ เครื่องมือแก้ไขตัวแรกที่ฉันใช้ด้วยความโมโหคือ HomeSite ของ Allaire และ Macromedia ซึ่งมีภาษาขี้ขลาดเช่น VTML, WIZML และ JScript ซึ่งเป็น JavaScript เวอร์ชัน Windows ในขณะนั้น ฉันเขียนส่วนขยายและแถบเครื่องมือจำนวนมากสำหรับตัวแก้ไขนั้น ซึ่งช่วยเพิ่มประสิทธิภาพการทำงานของบริษัทของฉันในตอนนั้นอย่างมาก

โชคดีที่ทุกวันนี้ บริษัทต่างๆ เข้าใจดีว่าการเสนอภาษาสำหรับผู้เชี่ยวชาญเป็นการเสียเวลา เมื่อเว็บสแต็กเติบโตขึ้นจนน่าสนใจมากขึ้นในการสร้างแอปพลิเคชันด้วย

หากคุณดาวน์โหลด Visual Studio Code ตอนนี้ คุณจะเห็นว่าคุณสมบัติการเติมข้อความอัตโนมัติของฉันเป็นส่วนหนึ่งของมัน และนี่คือวิธีที่ฉันทำอย่างนั้น

1. บ่น

ขั้นตอนแรกของฉันคือไปที่ที่เก็บ GitHub ของ Visual Studio Code และแจ้งปัญหาในการขอคุณสมบัตินี้สำหรับตัวแก้ไข นี่อาจเป็นขั้นตอนสุดท้ายของคุณหากคุณไม่ต้องการทำเอง คนอื่นที่กำลังมองหาบางอย่างที่จะทำสำหรับโครงการอาจพบการร้องเรียนของคุณและจัดการให้คุณ ในกรณีของฉัน ฉันต้องการทราบข้อมูลเพิ่มเติม

2. แยกรหัส

แทนที่จะแจ้งปัญหา ฉันไปที่ที่เก็บ GitHub และแยกรหัสออก ฉันใช้บัญชีส่วนตัวของฉันสำหรับสิ่งนี้ คุณไม่จำเป็นต้องเป็นพันธมิตรกับ Microsoft หรือเข้าร่วมกลุ่มพิเศษ พื้นที่เก็บข้อมูลเป็นแบบสาธารณะและเปิดอยู่ ยินดีต้อนรับทุกคน มีแม้กระทั่งจรรยาบรรณในการบริจาคซึ่งหมายความว่าผู้คนควรจะเล่นได้ดี ฉันดาวน์โหลดโค้ดลงในฮาร์ดไดรฟ์และทำตามคำแนะนำในการสร้างตัวแก้ไขในเครื่อง

3. รับเวิร์กโฟลว์การพัฒนาในสถานที่

Visual Studio Code เขียนด้วย Node.js และ TypeScript ขั้นตอนการพัฒนาเริ่มต้นด้วยสคริปต์ที่จัดเตรียมโดยทีม ซึ่งทำให้ Visual Studio Code เวอร์ชันพัฒนาทำงานถัดจากเวอร์ชันที่ฉันใช้อยู่ สคริปต์ที่ทำงานบนบรรทัดคำสั่งช่วยให้แน่ใจว่าการเปลี่ยนแปลงของฉันได้รับการบันทึก และทุกครั้งที่ฉันบันทึกโค้ด เวอร์ชันการพัฒนาของตัวแก้ไขจะรีสตาร์ท และฉันสามารถทดสอบการเปลี่ยนแปลงได้ ทั้งหมดนี้ได้รับการจัดทำเป็นเอกสารอย่างดี ตั้งแต่การสร้างและเรียกใช้โค้ดจากแหล่งที่มาไปจนถึงการตั้งค่าเวิร์กโฟลว์การพัฒนา และเป็นอิสระจากแพลตฟอร์ม — คุณจะได้รับคำแนะนำสำหรับ Windows, Linux และ Mac OS X

คุณสามารถดูว่าสิ่งนี้มีลักษณะอย่างไรในคอมพิวเตอร์ของฉันในภาพหน้าจอต่อไปนี้ ตัวแก้ไขมุมมองขนาดใหญ่ (1) เป็นตัวแก้ไขที่ฉันใช้เขียนโค้ดอีกตัวหนึ่ง ทางด้านขวา (3) คือรุ่นการพัฒนา และด้านล่าง (2) คือสคริปต์ที่สร้างเวอร์ชันใหม่ของเวอร์ชันการพัฒนา การเขียนเอดิเตอร์ในเอดิเตอร์นั้นดูแปลกๆ แต่คุณก็ชินกับมันแล้ว

อย่าท้อแท้หากทั้งหมดนี้ไม่ได้ผลสำหรับคุณในครั้งแรก ฉันเจออุปสรรคสองสามอย่างและต้องหันไปหา Google และ StackOverflow เพื่อหาทางแก้ไข ชุมชน Node.js มีประโยชน์มาก

4. เขียนฟังก์ชัน

ต่อไป ฉันพร้อมที่จะทำทุกอย่างและใช้ TypeScript เพื่อเขียนโค้ดที่ชาญฉลาด ฉันเข้าใจดีว่านี่เป็นจุดที่คนจำนวนมากโยนผ้าเช็ดตัว เพราะมันยากเกินไปที่จะดำเนินการต่อ

ปัญหาที่ใหญ่ที่สุดของฉันคือฉันไม่รู้ว่าจะเริ่มต้นใช้งานฟังก์ชันนี้จากที่ใด ดังนั้นฉันจึงทำในสิ่งที่เราทุกคนทำ: ฉันค้นหาข้อความแบบเต็มสำหรับการ autocomplete ในโปรเจ็กต์ทั้งหมด ด้วยวิธีการทางวิทยาศาสตร์ขั้นสูงนี้ ฉันพบไฟล์ htmlTags.ts ที่เต็มไปด้วยคำจำกัดความของแท็กและอาร์เรย์ของค่าแอตทริบิวต์ ฉันค้นหาองค์ประกอบ input และพบสิ่งนี้:

 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 ดูน่าสนใจ ดังนั้นฉันจึงตรวจสอบตำแหน่งที่กำหนด o นี่คือสิ่งที่ฉันพบ:

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

ดูเหมือนว่าจะเกิดอะไรขึ้นเมื่อฉันเพิ่มแอตทริบิวต์ autocomplete ในการเปลี่ยนแปลงนั้น ฉันได้ไปที่คำจำกัดความมาตรฐานของค่าการเติมข้อความอัตโนมัติที่เป็นไปได้และคัดลอกมา

ฉันสร้างชุดค่าใหม่ชื่อ inputautocomplete และวางในค่า:

 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'], … }

จากนั้นฉันก็ไปที่คำจำกัดความทั้งหมดขององค์ประกอบที่รองรับการ autocomplete และแทนที่ o ด้วย inputautocomplete ของฉันเอง:

 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' … ]),

ฉันบันทึกการเปลี่ยนแปลงของฉัน สคริปต์สร้างตัวแก้ไขใหม่ ฉันลองใช้ตัวแก้ไขเวอร์ชันพัฒนาแล้ว และ autocomplete ทำงานอย่างที่ฉันต้องการ

5. ส่งคำขอดึง

นั่นคือที่ ฉันยอมรับการเปลี่ยนแปลงของฉันกับ Git (ใน Visual Studio Code) ไปที่ GitHub และเพิ่มคำขอดึง ไม่กี่วันต่อมา ฉันได้รับความคิดเห็นว่าคำขอดึงของฉันผ่านไปแล้ว และสิ่งที่ฉันทำจะเป็นส่วนหนึ่งของงานสร้างครั้งต่อไป

6. งงงัน

ตรงไปตรงมา ฉันไม่คิดว่ามันน่าทึ่งพอที่จะรับประกันการเปลี่ยนแปลงหลักของบรรณาธิการ ฉันแค่อยากจะเล่นรอบๆ หลายๆ คนอาจจะคิดเหมือนกันกับงานที่คุณทำ และนั่นคือสิ่งที่: เราผิด การมีส่วนร่วมในโครงการโอเพ่นซอร์สไม่จำเป็นต้องให้คุณเป็นนักพัฒนาที่ยอดเยี่ยม คุณไม่จำเป็นต้องมีชื่อเสียงหรือเป็นส่วนหนึ่งของฝูงชน บางครั้งสิ่งที่คุณต้องทำคือดูบางอย่าง วิเคราะห์ และหาวิธีปรับปรุง

มันขึ้นอยู่กับเราที่จะสร้างเครื่องมือที่เราใช้ให้ดีขึ้น หากคุณเห็นวิธีการมีส่วนร่วมในโครงการโอเพนซอร์ซ อย่าอาย คุณอาจเป็นคนคิดไอเดียที่ชัดเจนและเรียบง่ายจนคนอื่นมองข้ามไป คุณอาจเป็นคนสร้างสิ่งที่มีประโยชน์หรือน่ามองมากขึ้น เราทุกคนมีทักษะในการมีส่วนร่วม มาทำมากกว่านั้นกันเถอะ