ใน Sublime Text คุณเขียนโค้ดสั้น ๆ ได้อย่างไร

9

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

ในหลายวิดีโอฉันเห็นคนทำสิ่งต่าง ๆ เช่น:

div.classและมันจะสร้างหลังจากที่<div class="class"></div>tab

sublime-text-2

— DᴀʀᴛʜVᴀᴅᴇʀ
แหล่งที่มา

คุณยังสามารถสร้างตัวอย่างของคุณเอง docs.sublimetext.info/th/latest/extensibility/snippets.html

— Abdessamad Idrissi

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

— anjanesh

11

สถานที่ที่คุณอธิบายเป็นส่วนหนึ่งของ Sublime Text 2 นอกกรอบ ตรวจสอบให้แน่ใจว่าเอกสารของคุณใช้ไวยากรณ์ HTML ( ดู»ไวยากรณ์» HTML )

พิมพ์foo.barกดและคุณจะได้รับTab <foo class="bar"></foo>นอกจากนี้ยังมีfoo#bar(สำหรับidแทนclass) ทั้งสองจะถูกนำมาใช้ในPackages/HTML/html_completions.py

— Daniel Beck
แหล่งที่มา

มีเอกสารเกี่ยวกับวิธีสร้างaแท็กออกและบางอย่างเช่นliแท็กหรือไม่ นี่สำหรับ HTML เท่านั้นหรือ และ +1

— DᴀʀᴛʜVᴀᴅᴇʀ

@Gramps ไม่แน่ใจว่าสิ่งที่คุณหมายถึง แต่โปรดทราบว่าฉันชี้สคริปต์ที่ใช้คุณลักษณะนี้ (เลือกรายการเมนูเรียกดูแพคเกจ ...เพื่อไปยังไดเรกทอรีที่ฉันพูดถึง) ตัวอย่างเช่นคุณสามารถขยายสคริปต์ที่มีอยู่เพื่อรองรับเช่นตัวคั่นเพิ่มเติม สคริปต์ Sublime Text 2 ถูกนำมาใช้ใน Python นี่คือเอกสาร Pythonและหน้านี้มีเอกสารเฉพาะของ Sublime Text 2

— Daniel Beck

ฉันเคยเห็นใครบางคนทำdiv#main.containerแต่ Sublime พ่นmainองค์ประกอบด้วยคลาสcontainerเมื่อฉันลอง?

— taco

7

Emmet / Zen-Coding

Emmetเป็นปลั๊กอินที่คุณเขียนโครงสร้างพื้นฐานในลักษณะที่คล้ายกับ CSS-selector และให้ตัวแก้ไขขยายออกมา คุณสามารถค้นหาแพ็คเกจบน GitHubและติดตั้งผ่านผู้จัดการแพ็คเกจ

_{(ที่มา: smashingmagazine.com )}

นิตยสาร Smashing นี้มีบทความเกี่ยวกับเรื่องนี้ ตัวอย่างเช่น,

(.foo>h1)+(.bar>h2)

จะขยายตัวด้วยTabถึง

<div class="foo">
  <h1></h1>
</div>
<div class="bar">
  <h2></h2>
</div>

ตัดส่วนที่เลือกในแท็ก

สิ่งที่คุณสามารถทำได้คือกดAltShiftWเพื่อสร้างแท็กเปิดหรือตัดส่วนที่เลือกปัจจุบันในแท็ก (ดูแก้ไข»แท็ก»ตัดส่วนที่เลือกปัจจุบันในแท็ก )

โดยค่าเริ่มต้นมันจะสร้าง:

<p></p>

โดยเลือกชื่อแท็กเพื่อให้คุณสามารถเขียนทับได้

การกดTabจะทำให้คุณอยู่ในแท็กต่อไป หรือหากคุณกดSpaceคุณสามารถสร้างแอตทริบิวต์ได้เช่น:

AltShiftW(บน Windows / Linux) หรือCtrlShiftWบน OS X
A
Space
พิมพ์href="..."จากนั้นTab
ผลลัพธ์<a href="..."></a>โดยมีเคอร์เซอร์อยู่ในตำแหน่งภายในแท็ก

— slhck
แหล่งที่มา