การห่อแท็กในรหัส VS ทำอย่างไร?

170

ฉันต้องการตัด HTML ที่เลือกไว้ภายในแท็กด้วยรหัส VS ฉันจะทำอย่างไร

html visual-studio-code

1

หนึ่งในเหตุผลที่ฉันไม่สามารถย้ายไปยัง VSCode และ ditch Sublime ได้อย่างสมบูรณ์

— budji

3

@budji คุณลักษณะที่มาพร้อมกับ emmet ... ทุกสิ่งที่คุณต้องการได้ก็เป็นส่วนเสริมในตอนนี้และถ้าไม่ใช่คุณก็สามารถสร้างเองได้เสมอ

— James Coyle

ฉันชอบคำถามนี้และฉันรู้และเรียกส่วนต่อขยาย (Emmet Wrap with Abbrevation) แต่ใคร ๆ ก็รู้วิธีที่จะทำสิ่งที่ตรงกันข้าม ตัวอย่างเช่น: เขียน <p> ... </p> ก่อนและรวมไว้ใน <u> ** </u> ด้วยผลลัพธ์นี้ <p> ... <u> ** </u> ... </ p>

— Jmainol

342

เอ็มเมทที่ฝังตัวสามารถทำเคล็ดลับได้:

เลือกข้อความ (ไม่บังคับ)
จานสีคำสั่งเปิด (ปกติCtrl+ Shift+ P)
ปฏิบัติ Emmet: Wrap with Abbreviation
ป้อนแท็กdiv(หรือตัวย่อ.wrapper>p)
ตี Enter

คำสั่งสามารถกำหนดให้กับปุ่มลัด

สิ่งนี้ยังรองรับการส่งผ่านข้อโต้แย้ง:

{
    "key": "ctrl+shift+9",
    "command": "editor.emmet.action.wrapWithAbbreviation",
    "when": "editorHasSelection",
    "args": {
        "abbreviation": "span"
    }
},

ใช้มันแบบนี้:

span.myCssClass
span#myCssId
b
b.myCssClass

— อเล็กซ์
แหล่งที่มา

3

market.visualstudio.com/…

— อเล็กซ์

4

นี่ควรเป็นคำตอบ emmet ได้รับการติดตั้งแล้วใน vscode

— Nathan

15

Ctrl+ pคือ goToFile จานคำสั่งCtrl+ +Shift P

— Alex

1

สำหรับ JSX ต้องเพิ่มขั้นตอนพิเศษนี้: github.com/Microsoft/vscode/issues/4962#issuecomment-323880988

— Gezim

1

ด้วย VSCode 1.35.0 (และอาจเป็นไปได้ก่อนหน้านี้) ใช้งานได้กับ JSX - ไม่จำเป็นต้องมีการตั้งค่าเพิ่มเติมใด ๆ

— davnicwil

98

ค้นหาอย่างรวดเร็วในตลาด VSCode นี้: https://marketplace.visualstudio.com/items/bradgashler.htmltagwrap

เรียกทำงาน VS Code Quick Open ( Ctrl+ P)
วางext install htmltagwrapและป้อน
เลือก HTML
กดAlt+ W( Option+ Wสำหรับ Mac)

— hannes neukermans
แหล่งที่มา

คุณอาจจะหมายถึงการเลือกติดตั้งในขั้นตอนที่ 3

— ซา

1

"ในการใช้งานให้เลือกกลุ่มของรหัสและกด" Alt + W "(" Option + W "สำหรับ Mac) ง่ายพอ! ยกเว้นว่ามันจะไม่ทำงาน ฉันลองรุ่น 0.0.3 ด้วย VS Code 1.16.1 มันเกือบจะได้ผล มันพยายามรวมส่วนที่เลือกไว้ใน<p></p>แท็กแทนที่จะเป็นแบบทั่วไป<div></div>ซึ่งดูเหมือนจะมีเหตุผลมากกว่าที่จะทำ สิ่งที่แย่กว่านั้นคือมันล้มเหลว มันสร้างผลลัพธ์เช่น<p><p>My selected text.</p>

— Samir

1

ฉันลองใช้ส่วนขยายอื่น ๆ เช่นนั้น แต่จนถึงตอนนี้ฉันยังไม่มีโชคในการค้นหาสิ่งที่ใช้งานได้ อันนี้ใกล้เคียงกับวิธีการทำงาน ฉันลองใส่ 0.0.1 โดย David Taylor และ Ctrl + i ไม่ทำงานเลย

— Samir

1

UPDATE: ส่วนขยายทำงานได้อย่างถูกต้องและแก้ไขปัญหาข้างต้น ไม่มีแท็กที่ซ้ำกันอีกและคุณสามารถปรับแต่งแท็กที่คุณต้องการแทรกผ่านการตั้งค่าได้แล้ว ดังนั้นหากคุณต้องการให้แท็กเป็น<div>คุณเพิ่มการตั้งค่าต่อไปนี้, "htmltagwrap.tag": "div".

— bgashler1

การใช้งานที่ไม่ดีพอ - ทำงานกับแท็กเดียวมันจะดีถ้ามีบางอย่างที่คล้ายกับ notepad ++ html plugin ซึ่งคุณสามารถตัดส่วนที่เลือกด้วยแท็กจากการเลือกแท็กที่คุณกำหนดได้

— Sasha Bond

37

ในขณะที่ฉันไม่สามารถแสดงความคิดเห็นฉันจะขยายคำตอบที่ยอดเยี่ยมของอเล็กซ์

หากคุณต้องการประสบการณ์แบบ Sublime ที่มีการห่อเปิดส่วนขยาย Keymap (การตั้งค่า> ส่วนขยายของ Keymap [ Cmd+ K Cmd+ M]) และเพิ่มวัตถุต่อไปนี้:

{
    "key": "alt+w",
    "command": "editor.emmet.action.wrapIndividualLinesWithAbbreviation",
    "when": "editorHasSelection && editorTextFocus"
}

ซึ่งจะผูกคำสั่ง Emmet wrap กับAlt+ Wเมื่อเลือกข้อความ

(ขออภัยสำหรับคำแนะนำ OSX เท่านั้น)

— Andrew Lewis
แหล่งที่มา

7

นี่คือวิธีที่ฉันได้เพิ่มทางลัด: การตั้งค่า> ทางลัด Keyamp; ... จากนั้นค้นหา emmet wrap; ... คลิก + เพื่อเพิ่มทางลัดของคุณ; ... :)

— Luckylooke

1

นอกจากนี้ฉันได้เพิ่ม && resourceLangId == 'html' เพื่อใช้งานเฉพาะกับหน้าเว็บ

— surpavan

@urpavan ดี แต่มันก็มีประโยชน์ที่จะมีในไฟล์ประเภทอื่น ๆ เช่นไฟล์เทมเพลต html

— Andrew Lewis

1

@AndrewLewis - ใช่นั่นคือเหตุผลที่ฉันเก็บไว้เป็นรหัสภาษาและไม่ใช่นามสกุลไฟล์ (files.associations)

— surpavan

Shift + Alt + W ฟรีสำหรับ windows

— Timofeus

24

เปิดแป้นพิมพ์ลัดโดยพิมพ์⌘ Command+ k ⌘ Command+ sหรือCode > Preferences > Keyboard Shortcuts
ชนิด emmet wrap
คลิกที่เครื่องหมายบวกทางด้านซ้ายของ "Emmet: Wrap with Abbreviation"
ประเภท⌥ Option+w
กด Enter

— อดัมกอนซาเลส
แหล่งที่มา

3

imo มีคำตอบที่ดีกว่าสำหรับการใช้ตัวอย่างนี้

สร้างตัวอย่างด้วยคำจำกัดความเช่นนี้:

"name_of_your_snippet": {
    "scope": "javascript,html",
    "prefix": "name_of_your_snippet",
    "body": "<${0:b}>$TM_SELECTED_TEXT</${0:b}>"
}

จากนั้นผูกกับคีย์ใน keybindings.json เช่นนี้

{ 
    "key": "alt+w",
    "command": "editor.action.insertSnippet",
    "args": { "name": "name_of_your_snippet" }
}

ฉันคิดว่าสิ่งนี้ควรให้ผลลัพธ์เหมือนกับ htmltagwrap แต่ไม่ต้องติดตั้งส่วนขยาย

มันจะแทรกแท็กรอบข้อความที่เลือกเริ่มต้นที่<b>แท็ก & เลือกแท็กดังนั้นการพิมพ์ช่วยให้คุณเปลี่ยน

หากคุณต้องการใช้แท็กเริ่มต้นอื่นเพียงแค่เปลี่ยนbในbodyคุณสมบัติของตัวอย่าง

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

นี่เป็นสิ่งที่ดี แต่ Emmet สามารถทำสิ่งนี้และอื่น ๆ อีกมากมายเช่นการสร้าง HTML แอตทริบิวต์และรายการที่ซ้อนกัน Emmet ออกมาพร้อมกับรหัส VS

— Andrew Lewis เมื่อ

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

— Andrei V

ฉันตื่นเต้นมากกับสิ่งนี้ แต่ฉันไม่สามารถทำงานได้: /

— อิคาโร