emmet sublime

ปลั๊กอินนี้เลิกใช้แล้วและไม่ได้รับการบำรุงรักษาอีกต่อไป โปรดใช้เวอร์ชันใหม่

---

Emmet สำหรับข้อความประเสริฐ

ปลั๊กอิน Emmet อย่างเป็นทางการสำหรับ Sublime Text

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

วิธีการติดตั้ง

คำเตือน: ปลั๊กอินนี้อาจไม่ทำงานเลยในบางระบบปฏิบัติการเนื่องจากเขียนด้วย JavaScript และใช้ไบนารี PyV8 และ Google V8 เพื่อทำงาน หากคุณประสบปัญหาหรือตัวแก้ไขขัดข้อง โปรดกรอกปัญหา

ด้วยการควบคุมแพ็คเกจ:

1. เรียกใช้คำสั่ง “การควบคุมแพ็คเกจ: ติดตั้งแพ็คเกจ” ค้นหาและติดตั้งปลั๊กอิน Emmet
2. รีสตาร์ทตัวแก้ไข ST (ถ้าจำเป็น)

ด้วยตนเอง:

1. โคลนหรือดาวน์โหลด git repo ลงในโฟลเดอร์แพ็คเกจของคุณ (ใน ST ให้ค้นหารายการเมนูเรียกดูแพ็คเกจ... เพื่อเปิดโฟลเดอร์นี้)
2. รีสตาร์ทตัวแก้ไข ST (ถ้าจำเป็น)

---

คำเตือน : เมื่อติดตั้งปลั๊กอินแล้ว มันจะดาวน์โหลดไบนารี PyV8 ที่จำเป็นโดยอัตโนมัติ ดังนั้นคุณต้องรอสักครู่ (ดู การโหลดข้อความไบนารี PyV8 บนแถบสถานะ) หากคุณประสบปัญหากับตัวโหลด PyV8 อัตโนมัติ ให้ลองติดตั้งด้วยตนเอง

การดำเนินการที่มีอยู่

• ขยายคำย่อ – Tab หรือ Ctrl+E
• “ขยายคำย่อ” แบบโต้ตอบ — Ctrl+Alt+Enter
• จับคู่แท็กด้านนอก – ⌃D (Mac) / Ctrl+, (PC)
• จับคู่แท็กเข้าด้านใน – ⌃J / Shift+Ctrl+0
• ไปที่คู่ที่ตรงกัน – ⇧⌃T / Ctrl+Alt+J
• ห่อด้วยตัวย่อ — ⌃W / Shift+Ctrl+G
• ไปที่จุดแก้ไข — Ctrl+Alt+→ หรือ Ctrl+Alt+←
• เลือกรายการ – ⇧⌘ หรือ ⇧⌘, / Shift+Ctrl+ หรือ Shift+Ctrl+
• สลับความคิดเห็น — ⇧⌥/ / Shift+Ctrl+/
• แท็กแยก/เข้าร่วม — ⇧⌘' / Shift+Ctrl+`
• ลบแท็ก – ⌘' / Shift+Ctrl+;
• อัปเดตขนาดรูปภาพ — ⇧⌃I / Ctrl+U
• ประเมินนิพจน์ทางคณิตศาสตร์ — ⇧⌘Y / Shift+Ctrl+Y
• สะท้อนค่า CSS – ⇧⌘R / Shift+Ctrl+R
• เข้ารหัส/ถอดรหัสรูปภาพเป็นข้อมูล:URL – ⇧⌃D / Ctrl+'
• เปลี่ยนชื่อแท็ก – ⇧⌘K / Shift+Ctrl+'

การดำเนินการเพิ่ม/ลดจำนวน:

• เพิ่มขึ้นทีละ 1: Ctrl+↑
• ลดลง 1: Ctrl+↓
• เพิ่มขึ้น 0.1: Alt+↑
• ลดลง 0.1: Alt+↓
• เพิ่มขึ้น 10: ⌥⌘↑ / Shift+Alt+↑
• ลดลง 10: ⌥⌘↓ / Shift+Alt+↓

การสนับสนุนส่วนขยาย

คุณสามารถขยาย Emmet ได้อย่างง่ายดายด้วยแอคชั่นและฟิลเตอร์ใหม่ๆ หรือปรับแต่งอันที่มีอยู่ ใน Emmet.sublime-settings ให้กำหนดการตั้งค่า extensions_path แล้ว Emmet จะโหลดไฟล์ .js และ .json ทั้งหมดในโฟลเดอร์ที่ระบุเมื่อเริ่มต้นระบบ

ค่าเริ่มต้นของ extensions_path คือ ~/emmet ซึ่งชี้ไปที่โฟลเดอร์ emmet ภายในโฟลเดอร์โฮมของผู้ใช้ OS ของคุณ

นอกจากนี้ คุณสามารถสร้างส่วนที่ตั้งชื่อเป็นไฟล์ส่วนขยาย (เช่น snippets การกำหนด preferences และ syntaxProfiles ) ภายในไฟล์ Emmet.sublime-settings ของผู้ใช้ และเขียนการปรับแต่งของคุณที่นั่น ดูตัวอย่างในไฟล์การตั้งค่าดั้งเดิม

การเอาชนะแป้นพิมพ์ลัด

Sublime Text เป็นโปรแกรมแก้ไขข้อความที่ยอดเยี่ยมพร้อมฟีเจอร์และการดำเนินการมากมาย การดำเนินการเหล่านี้ส่วนใหญ่เชื่อมโยงกับแป้นพิมพ์ลัด ดังนั้นจึงแทบเป็นไปไม่ได้เลยที่จะจัดให้มีทางลัดปลั๊กอินที่สะดวกสำหรับปลั๊กอินของบุคคลที่สาม

หากคุณไม่พอใจกับคีย์แมปเริ่มต้น คุณสามารถปิดใช้งานแป้นพิมพ์ลัดแต่ละรายการด้วยการตั้งค่า disabled_keymap_actions ของไฟล์ Emmet.sublime-settings

ใช้รายการชื่อการดำเนินการที่คั่นด้วยเครื่องหมายจุลภาคซึ่งควรปิดใช้งานแป้นพิมพ์ลัดเริ่มต้น ตัวอย่างเช่น หากคุณต้องการปล่อยทางลัด Ctrl+E (“ขยายตัวย่อ”) และ Ctrl+U (“อัปเดตขนาดรูปภาพ”) คุณต้องตั้งค่าต่อไปนี้:

 "disabled_keymap_actions": "expand_abbreviation, update_image_size"

คุณควรอ้างอิงไฟล์ Default (Your-OS-Name).sublime-keymap เพื่อรับรหัสการดำเนินการ (มองหาคีย์ args/action )

หากต้องการปิดใช้งานทางลัดเริ่มต้นทั้งหมด ให้ตั้งค่าเป็น all :

 "disabled_keymap_actions": "all"

ไม่ใช่ว่าหากคุณปิดการใช้งานการกระทำเช่นนั้นและคุณสร้างแป้นพิมพ์ลัดของคุณเอง คุณ ไม่ควร ใช้บริบท emmet_action_enabled.ACTION_NAME เนื่องจากนี่คือกุญแจที่จะปิดการใช้งานการทำงาน

วิธีขยายคำย่อด้วย Tab ในรูปแบบอื่น

Emmet ขยายคำย่อในรูปแบบที่จำกัดเท่านั้น: HTML, CSS, LESS, SCSS, Stylus และ PostCSS เหตุผลที่จำกัดตัวจัดการแท็บให้อยู่ในรายการไวยากรณ์ที่จำกัดก็เพราะว่าตัวจัดการแท็บทำลายตัวอย่าง Sublime Text ดั้งเดิม

หากคุณต้องการย่อด้วย Tab ในรูปแบบอื่น ๆ (เช่น JSX, HAML เป็นต้น) คุณต้องปรับแต่งการตั้งค่าแป้นพิมพ์ลัดของคุณ: เพิ่มคำสั่ง expand_abbreviation_by_tab สำหรับปุ่ม tab สำหรับ ตัวเลือกขอบเขต ไวยากรณ์ที่จำเป็น หากต้องการรับตัวเลือกขอบเขตไวยากรณ์ปัจจุบัน ให้กด ⇧⌃P (OSX) หรือ Ctrl+Alt+Shift+P ซึ่งจะแสดงในแถบสถานะตัวแก้ไข

ไปที่ Preferences > Key Bindings — User และแทรกข้อมูลโค้ด JSON ต่อไปนี้ด้วยตัวเลือกขอบเขตที่กำหนดค่าอย่างถูกต้องแทนโทเค็น SCOPE_SELECTOR :

 {
  "keys" : [ "tab" ] , 
  "command" : "expand_abbreviation_by_tab" , 

  // put comma-separated syntax selectors for which 
  // you want to expandEmmet abbreviations into "operand" key 
  // instead of SCOPE_SELECTOR.
  // Examples: source.js, text.html - source
  "context" : [
    {
      "operand" : "SCOPE_SELECTOR" , 
      "operator" : "equal" , 
      "match_all" : true , 
      "key" : "selector"
    } , 

    // run only if there's no selected text
    {
      "match_all" : true , 
      "key" : "selection_empty"
    } ,

    // don't work if there are active tabstops
    {
      "operator" : "equal" , 
      "operand" : false , 
      "match_all" : true , 
      "key" : "has_next_field"
    } , 

    // don't work if completion popup is visible and you
    // want to insert completion with Tab. If you want to
    // expand Emmet with Tab even if popup is visible -- 
    // remove this section
    {
      "operand" : false , 
      "operator" : "equal" , 
      "match_all" : true , 
      "key" : "auto_complete_visible"
    } , 
    {
      "match_all" : true , 
      "key" : "is_abbreviation"
    }
  ]
}

ตัวจัดการคีย์แท็บ

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

ตามค่าเริ่มต้น ตัวจัดการแท็บจะทำงานใน ขอบเขตไวยากรณ์ ที่จำกัด: HTML, XML, HAML, CSS, SASS/SCSS, LESS, PostCSS และ สตริงในภาษาการเขียนโปรแกรม (เช่น JavaScript, Python, Ruby ฯลฯ) มันหมายความว่า:

• คุณต้องเปลี่ยนเอกสารของคุณเป็นรูปแบบใดรูปแบบหนึ่งที่แสดงด้านบนเพื่อขยายคำย่อด้วยปุ่ม Tab
• ด้วยทางลัด Ctrl-E คุณสามารถขยายตัวย่อได้ทุกที่ โดยไม่จำกัดขอบเขต
• เมื่อคุณขยายตัวย่อภายในสตริงของภาษาการเขียนโปรแกรม เอาต์พุตจะถูกสร้างขึ้นด้วยโปรไฟล์เอาต์พุตพิเศษชื่อ line ที่สร้างเอาต์พุตเป็นบรรทัดเดียว

หากต้องการปรับแต่งตัวจัดการคีย์ Tab คุณสามารถใช้การตั้งค่าต่อไปนี้ในไฟล์ Emmet.sublime-settings ของผู้ใช้:

• disable_tab_abbreviations_for_scopes - รายการขอบเขตไวยากรณ์ที่คั่นด้วยเครื่องหมายจุลภาคซึ่งควรปิดใช้งานตัวจัดการคีย์ Tab ตัวอย่างเช่น หากคุณต้องการปิดการใช้งานตัวจัดการภายในสตริงของภาษาการเขียนโปรแกรมและไวยากรณ์ HAML การตั้งค่าของคุณจะมีลักษณะดังนี้:

 "disable_tab_abbreviations_for_scopes" : " text.haml, string "

• disabled_single_snippet_for_scopes - รายการขอบเขตไวยากรณ์ที่คั่นด้วยเครื่องหมายจุลภาค โดยที่ตัวจัดการแท็บควรปิดใช้งานเมื่อขยายตัวย่อเดี่ยว ปัจจุบัน ST ไม่มี API สำหรับรับรายการตัวอย่างข้อมูลเนทิฟ ตัวอย่างเช่น หากคุณพยายามขยายตัวย่อ php มันจะถูกส่งไปยัง Emmet ซึ่งจะส่งออก แทนที่จะเป็นบล็อก PHP ตามที่กำหนดไว้ในตัวอย่าง ST ดั้งเดิม วิธีแก้ปัญหาชั่วคราว หากคุณกำลังพยายามขยายตัวย่อตัวเดียวภายในขอบเขตที่กำหนดไว้ในการตั้งค่า disabled_single_snippet_for_scopes Emmet จะค้นหาชื่อของมันในแค็ตตาล็อกตัวอย่างของตัวเองก่อน จากนั้นภายในการตั้งค่า known_html_tags ลำดับที่สอง และหากไม่พบ จะอนุญาตให้ ST จัดการและ ขยายคำย่อดั้งเดิม หากตรงกัน
• known_html_tags — รายการแท็ก HTML ที่รู้จักทั้งหมดที่คั่นด้วยช่องว่างซึ่งใช้สำหรับการค้นหาตามที่อธิบายไว้ข้างต้น

หากคุณไม่พอใจกับการทำงานของตัวจัดการแท็บ Emmet คุณสามารถปิดการใช้งานได้: เพียงเพิ่ม "disable_tab_abbreviations": true ลงในไฟล์ Preferences.sublime-settings ของผู้ใช้

ปิดใช้งานการแทรกคำนำหน้าผู้ขายอัตโนมัติ

หากเวิร์กโฟลว์ของคุณมีงานอัตโนมัติสำหรับคำนำหน้าผู้ขาย CSS อยู่แล้ว (เช่น Autoprefixer) คุณสามารถปิดใช้งานการแทรกคำนำหน้าผู้ขายอัตโนมัติของ Emmet ได้โดยเพิ่มตัวเลือกนี้ลงในไฟล์ Emmet.sublime-settings ของผู้ใช้ของคุณ:

{
  "preferences" : {
    "css.autoInsertVendorPrefixes" : false
  }
}