วิธีเพิ่มตัวอย่างโค้ดแบบกำหนดเองไปยัง Atom

ไม่ใช่เรื่องบังเอิญที่ อะตอม, ตัวแก้ไขซอร์สโค้ดที่สร้างโดย Github นั้นเป็นที่นิยมในชุมชนการพัฒนาเว็บ มันไม่เพียง แต่ ยืดได้ง่าย ด้วยแพ็คเกจ Atom หลายพันรายการและมี รองรับภาษาที่หลากหลาย, แต่เกือบทุกส่วนของมันคือ ปรับแต่ง โดยผู้ใช้.

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

ใช้ตัวอย่างโค้ดในตัว

โดยค่าเริ่มต้น Atom มาพร้อมกับ ตัวอย่างโค้ดในตัว, ซึ่งแต่ละอันก็คือ ผูกพันกับขอบเขต เป็นของประเภทไฟล์ที่แน่นอน ตัวอย่างเช่นหากคุณกำลังทำงานกับไฟล์ด้วย .js นามสกุลไฟล์เท่านั้นที่เป็นของขอบเขต JavaScript จะสามารถใช้ได้สำหรับไฟล์นั้น.

เพื่อที่จะได้เห็น ตัวอย่างที่มีอยู่ทั้งหมด สำหรับประเภทไฟล์ปัจจุบันของคุณให้กด Alt + Shift + S หากคุณเลือกตัวอย่างจากรายการแบบหล่นลงและคลิกที่มัน Atom จะแทรกข้อมูลโค้ดแบบเต็มลงในเครื่องมือแก้ไขของคุณโดยไม่ต้องยุ่งยากอีกต่อไป.

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

ตัวอย่างเช่นถ้าคุณพิมพ์ ชั่วโมง ตัวละครเป็น .HTML ไฟล์รายการแบบเลื่อนลงที่มีตัวอย่าง HTML ทั้งหมดในตัวเริ่มต้นด้วย ชั่วโมง จะปรากฏขึ้น.

เมื่อคลิกที่ตัวเลือกใด ๆ Atom จะ วางแท็ก HTML แบบเต็ม (เช่น. ) และ วางเคอร์เซอร์ไว้ภายในแท็กเริ่มต้นและแท็กปิด.

หากคุณไม่ต้องการรบกวนรายการดรอปดาวน์คุณสามารถบรรลุผลลัพธ์เดียวกันโดยพิมพ์ h1, และกดปุ่ม Tab หรือ Enter - ทั้งสองปุ่ม แทรกข้อมูลโค้ดแบบเต็ม เป็นของคำนำหน้าของตัวอย่าง.

เพิ่มตัวอย่างโค้ดที่กำหนดเองของคุณ

1. ค้นหาไฟล์กำหนดค่า

หากต้องการเพิ่มตัวอย่างโค้ดที่กำหนดเองของคุณใน Atom ก่อนอื่นคุณต้องค้นหา ไฟล์การกำหนดค่าที่เรียกว่า snippets.cson นั่นคือ สัญลักษณ์วัตถุ CoffeeScript ไฟล์.

คลิกที่ ไฟล์> ตัวอย่าง ... เมนูในแถบด้านบนและ Atom จะเปิด snippets.cson ไฟล์ที่คุณสามารถเพิ่มตัวอย่างที่กำหนดเองของคุณ.

2. ค้นหาขอบเขตที่เหมาะสม

คุณจะต้องการ สี่สิ่ง เพื่อเพิ่มตัวอย่างที่กำหนดเองของคุณ:

ชื่อของขอบเขต
ชื่อของตัวอย่าง
อุปสรรค ที่จะทำหน้าที่เป็นที่จับของตัวอย่าง
ร่างกายของตัวอย่าง

ชื่อคำนำหน้าและเนื้อหาของเกร็ดเล็กเกร็ดน้อย (2-4) ขึ้นอยู่กับคุณ แต่เพียงผู้เดียวอย่างไรก็ตามคุณต้อง ค้นหาชื่อของขอบเขต (1) ก่อนเพิ่มตัวอย่างที่กำหนดเองของคุณ.

หากต้องการค้นหาขอบเขตที่คุณต้องการให้คลิกที่ ไฟล์> การตั้งค่า เมนูในแถบเมนูด้านบนแล้วค้นหา แพคเกจ ระหว่างการตั้งค่า ที่นี่ให้ทำการค้นหาขอบเขตที่คุณต้องการตัวอย่างเช่นหากคุณต้องการเพิ่มข้อมูลโค้ดในภาษา HTML ให้พิมพ์ HTML ในแถบค้นหา.

คลิกที่ แพ็คเกจสนับสนุนภาษา ของภาษาที่เลือกและเปิดการตั้งค่าของมันเอง ท่ามกลาง การตั้งค่าไวยากรณ์, คุณสามารถค้นหาชื่อของขอบเขตได้อย่างรวดเร็วดังที่คุณเห็นในภาพด้านล่าง.

นี่คือขอบเขตที่คุณอาจต้องการใช้ในโครงการ Atom ของคุณ:

ข้อความธรรมดา: .text.plain
HTML: .text.html.basic
CSS: .source.css
Sass: .source.sass
หัก .source.css.less
JavaScript: .source.js
PHP: .text.html.php
งูหลาม: .source.python
Java: .source.java

อย่าลืมว่าคุณจะต้อง เพิ่มจุด (.) ด้านหน้าชื่อขอบเขต เพื่อที่จะใช้ใน snippets.cson ไฟล์.

3. สร้างตัวอย่างโค้ดแบบบรรทัดเดียว

เพื่อสร้าง ข้อมูลโค้ดบรรทัดเดียว, คุณต้องเพิ่มขอบเขตชื่อคำนำหน้าและเนื้อความของตัวอย่างใน snippets.cson ไฟล์โดยใช้ไวยากรณ์ต่อไปนี้:

 '.text.html.basic': 'ชื่อ Widget': 'คำนำหน้า': 'wti "body': ''

ตัวอย่างโค้ดนี้เพิ่ม a

แท็กด้วย `วิดเจ็ตชื่อ` ชั้นเรียนเพื่อขอบเขต HTML คุณสามารถเพิ่มข้อมูลโค้ดบรรทัดเดียวอื่น ๆ ลงในตัวแก้ไข Atom ของคุณโดยทำตามไวยากรณ์นี้.

หลังจากบันทึกไฟล์กำหนดค่าทุกครั้งที่คุณ พิมพ์คำนำหน้าและกดปุ่ม Tab, Atom จะวางเนื้อหาของส่วนย่อยไว้ในเครื่องมือแก้ไขรหัสของคุณ ชื่อของตัวอย่าง (ในตัวอย่าง `ชื่อวิดเจ็ต`) จะปรากฏในช่องผลลัพธ์การเติมข้อความอัตโนมัติ.

4. สร้างตัวอย่างโค้ดหลายบรรทัด

ตัวอย่างโค้ดหลายบรรทัด ใช้ไวยากรณ์ที่แตกต่างกันเล็กน้อย คุณต้องเพิ่มข้อมูลเดียวกับตัวอย่างข้อมูลบรรทัดเดียว - ขอบเขตชื่อคำนำหน้าและเนื้อความของตัวอย่าง.

สิ่งที่แตกต่างในที่นี้คือคุณต้องวางร่างกายตัวอย่าง ภายในหนึ่งคู่ """ (สามคำพูดสองครั้ง).

 '.text.html.basic': 'ลิงค์รูปภาพ': 'คำนำหน้า': 'iml "body':" ""     
 """

หากคุณต้องการเพิ่ม ตัวอย่างที่กำหนดเองมากกว่าหนึ่งรายการ ในขอบเขตเดียวกันเพิ่มชื่อของขอบเขต ครั้งเดียวเท่านั้น, จากนั้นระบุรายการตัวอย่างทีละรายการ:

 '.text.html.basic': 'ชื่อ Widget': 'คำนำหน้า': 'wti "body': '"ลิงค์รูปภาพ ':' คำนำหน้า ':' iml" body ': "" "     
 """

5. เพิ่มแท็บหยุด

คุณสามารถอำนวยความสะดวกในการใช้ข้อมูลโค้ดที่กำหนดเองของคุณเพิ่มเติมโดยการเพิ่ม แท็บหยุด ต่อร่างกายตัวอย่าง แท็บหยุดบ่งบอกถึงจุดที่ผู้ใช้สามารถนำทางโดยใช้ปุ่ม Tab ด้วยแท็บหยุดคุณสามารถประหยัดเวลาที่ต้องการการนำทางในข้อความ.

คุณสามารถเพิ่มแท็บหยุด ใช้ $ 1, $ 2, $ 3, ... วากยสัมพันธ์. Atom จะวางตำแหน่งเคอร์เซอร์ไปยังตำแหน่งที่พบ $ 1, จากนั้นคุณสามารถข้ามไปที่ $ 2 ด้วยปุ่ม Tab จากนั้นไปที่ $ 3, และอื่น ๆ.

 '.text.html.basic': 'ลิงค์รูปภาพ': 'คำนำหน้า': 'iml "body':" ""     
 """

6. เพิ่มพารามิเตอร์ทางเลือก

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

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

 '.text.html.basic': 'ชื่อ Widget': 'คำนำหน้า': 'wti "body': '"description ':' คุณสามารถเพิ่มชื่อวิดเจ็ตด้วยตัวอย่างนี้ในวิดเจ็ตแถบด้านข้างของคุณ" descriptionMoreURL ':' http://hongkiat.com '

เมื่อผู้ใช้เริ่มพิมพ์คำนำหน้า WTI, ข้อมูลเพิ่มเติม (คำอธิบาย + ลิงก์) จะปรากฏที่ด้านล่างของช่องผลลัพธ์การเติมข้อความอัตโนมัติ ลองดูที่ พารามิเตอร์ทางเลือกอื่น ๆ คุณสามารถใช้เพื่อเพิ่มข้อมูลพิเศษให้กับข้อมูลโค้ดที่กำหนดเองของคุณ.