VSCode ไม่กรอก HTML โดยอัตโนมัติ

87

ฉันมีปัญหากับ Visual Studio Code ที่ติดตั้งใหม่บน Windows 7 บน Mac ตัวแก้ไขจะปิดแท็ก html โดยอัตโนมัติ แต่ใน Win7 ของฉันไม่ได้ ฉันคิดว่าจะต้องมีตัวเลือกบางอย่างในการเปิดใช้งาน แต่ฉันหาไม่พบ

ฉันกำลังพูดถึงเมื่อเช่น การเขียน<htmlintelliSense จะปรากฏขึ้นและคุณคลิก Enter โดยปกติจะทำให้</html>เหมืองไม่ทำงานโดยอัตโนมัติ (ใน IntelliSense ปรากฏขึ้น แต่เมื่อคุณเลือกหนึ่งในตัวเลือกก็ไม่ได้ใกล้อัตโนมัติแท็ก: <h1> -> </h1>)

html intellisense visual-studio-code

— ฮาร์วีย์ 3589661
แหล่งที่มา

1. คุณสามารถใช้แท็กปิดอัตโนมัติซึ่งสามารถเติมเต็มความต้องการของคุณได้

— jialin wang

2

2. ป้อน tagname เช่นdivจากนั้นป้อนคีย์แท็บสองครั้งระบบจะเติมแท็ก whoe โดยอัตโนมัติ -----> <div> </div>

— jialin wang

42

จากบันทึกประจำรุ่น 0.3.0

ปิดอัตโนมัติ HTML ของแท็กในขณะนี้ได้ถูกลบออกไปและแทนที่ด้วย IntelliSense </อย่างชาญฉลาดใน

— John Papa
แหล่งที่มา

5

โอ้นั่นไม่ใช่สิ่งที่ฉันหวังไว้ มีวิธีใดบ้างที่จะนำมันกลับมา แก้ไขไฟล์บางไฟล์หรือดาวน์โหลดอะไร? ฉันต้องการใช้ VSCode แต่มีการเติมอัตโนมัติ ขอบคุณ.

— Harvey3589661

56

ฉันกำลังมองหาสิ่งนี้เช่นกัน แต่ฉันสังเกตเห็นว่าการใช้แท็บเหมาะกับฉันใน 0.10.6 ประเภทเช่นdiv(ไม่<>) <div></div>แล้วกดแท็บทันทีและจะเข้าสู่ ไม่เหมือนกันทุกประการ แต่อาจจะใช้งานได้ Doco สำหรับทางลัดเหล่านี้ (

— emmet

3

ใช่นั่นเป็นเพราะ Emmet Emmet ให้เราพิมพ์ชื่อองค์ประกอบโดยไม่ต้องใช้เครื่องหมายวงเล็บและจะเพิ่มสิ่งที่จำเป็น มันทรงพลังจริงๆ

— John Papa

1

สิ่งนี้ใช้ไม่ได้สำหรับฉันใน VS Code 1.5.3 ถ้าฉันพิมพ์ <div> แล้ว </ มันไม่ได้ปิด / ทำให้แท็กสมบูรณ์ มีอะไรที่ฉันขาดหายไป?

— Michael Giovanni Pumo

2

เพียงแค่พิมพ์divโดยไม่มี<>แล้วกดแท็บจะไม่ทำงานอีกต่อไปหลังจากการอัปเดตล่าสุด มีวิธีเปิดใช้งานอีกครั้งหรือไม่?

— Kokodoko

173

พิมพ์ชื่อแท็ก (โดยไม่ต้องเริ่มต้น<) จากนั้นกด Tab

ตัวอย่างพิมพ์divจากนั้นกดแท็บและ VS จะแปลงเป็น<div></div>

หรือพิมพ์แท็กเปิดจากนั้นกด Tab สองครั้ง

ตัวอย่างเช่น :

ชนิด <div
กด Tab
กด Tab

มันจะเพิ่มแท็กปิด

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

2

แล้วแท็กปิดตัวเอง (เช่น <input />) ล่ะ?

— Randall Flagg

1

เพียงพิมพ์ input แล้วกด Tab สองครั้ง VS Code จะเติมให้อัตโนมัติเป็น <input type = "text">

— Amit Mittal

1

เพียงแค่ต้องการเพิ่มว่านี่เป็นส่วนหนึ่งของฟังก์ชัน Emmet ซึ่งช่วยให้คุณสร้างโครงสร้าง HTML ที่ซับซ้อนขึ้นได้อย่างง่ายดายไม่เพียง แต่คู่แท็กเท่านั้น สำหรับตัวอย่างคุณสามารถอ่านสิ่งนี้หรือเพียงแค่ google สำหรับ Emmet

— Alex Che

@Rabolf คุณสามารถพูดถึงทางลัด HMTL ที่ยอดเยี่ยมสำหรับ VS Code ได้หรือไม่?

— eMad

@eMAD น่าเสียดายที่ฉันไม่ได้ใช้ VS Code ต่อไป

— Rabolf

56

ฉันประสบปัญหาเดียวกันจากนั้นฉันเห็นบางอย่างที่ด้านล่างขวาของรหัส vs .. แทนที่จะใช้ HTML ฉันใช้ Django-HTML ดังนั้นฉันจึงเปลี่ยนภาษาเป็น html บูมทุกอย่างทำงานได้ดีอีกครั้ง ดูภาพ

— Siphamandla Hero Ngwenya
แหล่งที่มา

มีปัญหาคล้ายกัน แต่ในกรณีของฉันฉันรู้ตัวว่ากำลังเขียน HTML ลงในไฟล์ PHP สมมติว่าฉันจะไม่สามารถใช้ประโยชน์จากแท็กการปิดอัตโนมัติได้นานเท่าที่ฉันเป็นอยู่

— Prometheus

1

ไม่จำเป็นต้องเปลี่ยนภาษาเพิ่มเฉพาะ settings.json "emmet.includeLanguages": {"django-html": "html"}

— raultedesco

ฉันแก้ไขเทมเพลต Twig ของฉันที่ไม่ได้เข้ารหัส HTML ด้วยความคิดเห็นของ @raultedesco ด้านบน Ctrl+Shift+p-> เปิดPerferences: Open Settings (UI)-> ค้นหาincludedLanguages-> พบ Emmet Included Languages -> input Item: twig; Value: html-> กดAdd item-> enjoy

— วาเลนไทน์ชิ

22

นี่คือเคล็ดลับเด็ด ๆ(จริงๆแล้วคือตัวย่อของ Emmet) :

เขียนชื่อแท็ก| เช่นh1
เพิ่มเครื่องหมายดอกจันหลังจากนั้น| เช่นh1*
กด | (จะส่งผลให้)Tab<h1></h1>

_{PS:นี้ยังใช้งานสำหรับแท็กปิดด้วยตัวเองเช่น - input, imgฯลฯ}

— ɢʀᴜɴᴛ
แหล่งที่มา

1

@Kokodoko ใช่มันไม่ :P

— ɢʀᴜɴᴛ

มันแปลกมาก ..... ฉันไม่แน่ใจว่าจะเปลี่ยนการตั้งค่าใดเพื่อเปิดใช้งานอีกครั้ง ...

— Kokodoko

1

@Kokodoko คุณควรติดตั้งส่วนขยาย emmet

— Sudhanshu

1

ใช้งานได้ แต่ไม่จำเป็นต้องรวมไฟล์*. 1.21.0

— ซอส

1

@BlueClouds ใช่และสิ่งใดก็ตามที่ให้การสนับสนุนคำย่อ html ควรใช้งานได้ ตามกฎทั่วไปฉันใช้กฎที่มีการติดตั้งสูงสุด

— Sudhanshu

15

คุณสามารถลองใช้ส่วนขยายนี้สำหรับ VS Code ได้ใช้ฟังก์ชันปิดแท็กอัตโนมัติและจะตอบสนองความต้องการของคุณ:

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

— จุนฮัน
แหล่งที่มา

นี่คือสิ่งที่ฉันต้องการ ใช้งานได้เหมือน Brackets ซึ่งดีมาก ขอบคุณ!

— Harvey3589661

ใช่ แต่ ... มันถูกเปิดใช้งานใน VS Code เวอร์ชันก่อนหน้า นี่ไม่ใช่แค่การตั้งค่าที่ไหนสักแห่งในเขาวงกตของ settings.json?

— Kokodoko

7

ฉันพบปัญหาเดียวกันบน Mac Sierra (10.12.6) กับ VSCode (1.30.2) ขณะแก้ไขไฟล์ HTML ตามเอกสาร vscode https://code.visualstudio.com/docs/languages/html Intellisense ควรทำงานนอกกรอบ

กลับกลายเป็นว่า "การตรวจหาภาษา" (ที่มุมขวาของแถบสถานะแก้ไขที่ด้านล่างของหน้าจอ) django-htmlถูกตั้งค่าให้ตรวจสอบโดยอัตโนมัติและได้รับการยอมรับแฟ้มเป็น เมื่อเปลี่ยนกลับไปใช้ Html ธรรมดาด้วยตนเองทุกอย่างก็ใช้ได้

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

5

กดCtrl + Shift + Pเพื่อเปิดชุดคำสั่ง
พิมพ์'Change Language Mode'ในตัวค้นหา
เลือก'โหมดภาษาเปลี่ยน'
พิมพ์'HTML'ในตัวค้นหา
และเลือก"HTML" (อาจตั้งค่าเป็น "django-html)

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

3

กด𝐜𝐭𝐫𝐥+𝐬𝐡𝐢𝐟𝐭+𝐏-> พิมพ์𝐂𝐡𝐚𝐧𝐠𝐞𝐋𝐚𝐧𝐠𝐮𝐚𝐠𝐞𝐌𝐨𝐝𝐞 -> จากนั้นเลือก𝐀𝐮𝐭𝐨𝐃𝐞𝐭𝐞𝐜𝐭

มันใช้ได้กับฉัน

— สุวัลลักษมี
แหล่งที่มา

1

ฉันไม่เห็นอะไรใหม่ในคำตอบนี้

— Double Expresso

2

ไฟล์> ค่ากำหนด> คีย์แมปค้นหา "ปิดอัตโนมัติ" แล้วคลิกที่ติดตั้ง หากไม่ได้ผลให้โหลดปลั๊กอินซ้ำ

— Dheemanth Bhandarkar
แหล่งที่มา

1

ฉันประสบปัญหาเดียวกันจากนั้นฉันถอนการติดตั้งส่วนขยายที่ไม่จำเป็นจาก VS Code พร้อมกับส่วนขยาย JavaScript (SE) และมันก็ใช้ได้สำหรับฉัน

— 5 ไฮฟา
แหล่งที่มา

0

กดCtrl + Shift + Pเพื่อเปิดคำสั่ง จากนั้นพิมพ์Change Language ModeเลือกHTMLหรือภาษาอื่น ๆ ที่ต้องการ

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

0

เพียงตรวจสอบด้านล่างของ vscode ของคุณและเปลี่ยนโหมดภาษาเป็น HTML อาจมีการแสดง django-html หรือคลิก ctrl + shift + p เพื่อเปลี่ยนโหมดภาษา ภาพหน้าจอ

ตอนนี้คลิก [!] + TAB voila เสร็จแล้ว !!!

— โอโตบง
แหล่งที่มา

0

ถ้าคุณพิมพ์

div.class

จากนั้นกดTABโค้ด VS จะปิดแท็กDIVโดยอัตโนมัติด้วยCLASS ที่กำหนด

แต่ผมคิดว่าคุณต้องการที่จะดำเนินการในส่วนนี้โดยการกดENTERสำคัญ

ในกรณีนั้นไปที่การตั้งค่าผู้ใช้ VS Code ของคุณและวางรหัสต่อไปนี้:

"emmet.includeLanguages": {
    "javascript": "javascriptreact",
    "vue-html": "html",
    "razor": "html",
    "plaintext": "jade"
}

ตอนนี้ถ้าคุณพิมพ์

div.class

จากนั้นกดปุ่มENTERคุณจะเห็นความมหัศจรรย์

อย่างไรก็ตามโค้ดข้างต้นจะทำให้ VS รหัสอัตโนมัติเสร็จของคุณด้วยENTERที่สำคัญไม่เพียง แต่สำหรับปกติHTMLแต่ยังJSX ของ React , ตัวอย่าง Vue.jsยังจะครอบคลุมตามนี้

แต่ถ้าคุณต้องการทำเฉพาะสำหรับไฟล์ HTML เพียงแค่บรรทัดต่อไปนี้ก็เพียงพอแล้ว:

"emmet.includeLanguages": { "javascript": "html" }

ไชโย ..

— IFTEKHAR ฉัน ASIF
แหล่งที่มา