มีคุณสมบัติการเยื้องอัตโนมัติหรือปลั๊กอิน HTML สำหรับ Sublime Text (หรือที่รู้จักว่า prettify / beautify / format)?

ตัวอย่างเช่นสิ่งที่จะเปลี่ยนแปลง:

<section><article><h1></h1><p></p></article></section>

ไปที่:

<section>
  <article>
    <h1></h1>
    <p></p>
  </article>
</section>

... ที่ใช้งานได้เต็มหน้าและตัวอย่าง

การEdit > Line > Reindentตั้งค่าในตัวไม่สามารถทำได้
ปลั๊กอิน HTMLTidy จะเพิ่มheadและbodyแท็กดังนั้นจึงใช้งานไม่ได้กับ partials แต่ก็มีปัญหาอื่น ๆ อีกมากมาย
แท็กปลั๊กอินมีปัญหาต่าง ๆเพียงพอที่เป็นหลักไม่ทำงาน
ปลั๊กอิน HTMLPrettify มีปัญหาหลายอย่างต้องใช้ node.js และยังไม่ได้รับการอัปเดตในหลายเดือน
gist.github.com/mcdonc/3898894 อ้างสิทธิ์ในการทำ แต่ต้องการ Emacs

(Notepad ++ มีการเยื้องอัตโนมัติ, Dreamweaver มีการจัดรูปแบบซอร์ส, Aptana มีรูปแบบและอื่น ๆ )

ปลั๊กอินแท็กจัดการแท็กแบบอินไลน์อย่างไม่ถูกต้องตัวอย่างเช่นใช้กับตัวอย่างข้อมูลนี้:

<p>foo<a>bar<span>baz<span>qux</span></span></a></p>

ผลลัพธ์ใน:

<p>
    foo
    <a>
        bar
        <span>
            baz
            <span>qux</span>
        </span>
    </a>
</p>

html sublime-text-2 autoindent

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

คำถามคืออะไร? ยังไม่ชัดเจนจากโพสต์ของคุณว่าคำถามคืออะไร

— แบรดแพ็ตตัน

ชื่อเรื่องที่แก้ไขแล้วจะเป็นคำถาม ฉันพยายามหาวิธีย่อหน้า HTML อัตโนมัติใน Sublime Text

— user110241

ยังเห็นการจัดรูปแบบ HTML รหัสใช้ Sublime Text 2

— Karan

ขอบคุณฉันลองใช้แต่ละวิธีแก้ปัญหาในชุดข้อความนั้นไม่มีวิธีแก้ปัญหาใด ๆ ฉันได้ระบุสาเหตุที่หลายคนไม่สามารถใช้งานได้ในกระทู้นี้

— user110241

ฉันคิดว่านี่เป็นวิธีแก้ปัญหาที่ดีที่สุดในการทำงาน: jsbeautifier.orgฉันมีความต้องการในการจัดรูปแบบหลายแท็กแบบอินไลน์ อันนี้ใช้ได้ดีจริงๆ มันสร้างมาร์กอัปที่เหมาะสมสำหรับข้อความประเสริฐเช่นกันซึ่งสามารถปิดชิ้น นอกจากนี้ยังมีให้บริการใน CLI ในรูปแบบnpmjs.com/package/js-beautify

— Sai krishna Deep

คำตอบ:

การทำงานreindentไม่ได้ผลสำหรับตัวอย่างเสมอไป คุณสามารถใช้Tagปลั๊กอิน (ติดตั้งจากการควบคุมแพ็คเกจ) แล้วเพียงแค่กดctrl+ shift+ และประเภทp คุณจะเห็นตัวเลือกtag เลือกและกดAuto-Format tags on document Enterนั่นจะทำมัน

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

ดังที่ฉันพูดถึงในโพสต์ต้นฉบับปลั๊กอินแท็กจะใช้งานไม่ได้ส่วนใหญ่โดยเฉพาะอย่างยิ่งในการจัดการแท็กแบบอินไลน์รวมถึงข้อบกพร่องที่เลวร้ายอื่น ๆ ผู้เขียนบอกว่าเขาต้องการ "เขียนสิ่งใหม่ทั้งหมด" reindent ใช้งานไม่ได้กับ HTML จริงๆแล้วมันไม่ได้แก้ไขการเยื้อง เพียงปรับแท็กให้อยู่ในระดับเยื้อง

— user110241

ดี Tag ทำงานให้ฉัน ฉันใช้ตัวอย่าง HTML ของคุณ มันทำงานได้อย่างไม่มีที่ติ reindent ทำงานได้กับ HTML แต่ภายใต้เงื่อนไขบางประการ

— Bibhas

ลองใช้การจัดรูปแบบอัตโนมัติของแท็กในตัวอย่างนี้<p>foo<a>bar<span>baz<span>qux</span></span></a></p>เพื่อดูว่าฉันหมายถึงอะไร นอกจากนี้มันยังยุ่งการจัดรูปแบบของแท็ก HTML ที่เปิดอยู่ซึ่งถูกห่อหุ้มในความคิดเห็นตามเงื่อนไข IE ซึ่งเป็นส่วนหนึ่งของ HTML5 Boilerplate (และความคิดเห็นทั่วไป) ลองใช้ตัวในLine > Reindentตัวอย่างนี้: jsfiddle.net/y8xXjเพื่อดูว่ามันล้มเหลวอย่างไร

— user110241

FYI - ลองใน Sublime Text 3 ด้วยตัวอย่าง HTML และใช้งานได้จริง!

— สตีเวน

ปัญหาเดียวกัน ฉันเคยใช้ตัวแก้ไขนับไม่ถ้วนในอดีต Coda, Sublime, Espresso, Chocolat, TextMate ... แต่ไม่มีใครสามารถจัดรูปแบบข้อความได้อย่างไม่มีที่ติเหมือนกับการใช้ Source Formatting ของ Dreamweaver เพื่อที่ผู้คนเพียงแค่แนะนำให้เป็นระเบียบเรียบร้อยหรือปลั๊กอินอื่น ๆ ที่ไม่เคยทำงานเหมือน Dreamweaver ฉันดีใจที่มีคน "Zooted" ดูเป็นปัญหานี้ มันโชคร้ายที่ยังไม่มีทางออก ใน Sublime Text 3 ตามที่ Zooted Noted ถึงแม้จะมี Tag แต่มันก็ใช้งานไม่ได้ (ตามตัวอย่างด้านบน) และฟีเจอร์ Reindent ดั้งเดิมนั้นไม่มีค่าเลย

— cchiera

เลือกทั้งหมด -> เมนูแก้ไข -> สาย -> แนะนำใหม่จะทำ คุณสามารถตั้งค่าการรวมกันทางลัดสำหรับการใช้งานเดียวกัน

{"keys": ["ctrl + shift + r"], "คำสั่ง": "reindent", "args": {"single_line": false}}

— Jasim Mahmood
แหล่งที่มา

ตามที่ฉันพูดถึงในคำถามนี้ไม่ทำงาน ลองใช้ตัวอย่างข้อมูลแรกที่ฉันมีให้: <section><article><h1></h1><p></p></article> </section>

— user110241

ใช้งานได้สำหรับฉัน ตั้งค่าไวยากรณ์เป็น HTML หรือไม่

— มานูเอลอาร์เวดชมิดท์

ใช้งานไม่ได้สำหรับฉัน

— Derek 朕會功夫

ใช่มันทำงานได้ค่อนข้างดี แต่ในที่สุดก็เริ่มลดลงในกรณีของฉัน<div>เปิดแท็ก

— ruffin

เพื่อให้ฟีเจอร์ Reindent ใช้งานได้คุณต้องยกเลิกการเลือกตัวเลือกสำหรับ "เยื้องการใช้ Spaces":

มุมมอง >> เยื้อง >> เยื้องใช้ช่องว่าง

เมื่อไม่ได้เลือกตัวเลือกนี้คุณสามารถเลือกข้อความของคุณและใส่ชื่อสารบัญ:

แก้ไข >> บรรทัด >> สารบัญ

สิ่งนี้จะทำงานกับไวยากรณ์ HTML เช่นเดียวกับ XML ไม่ได้ทดสอบกับผู้อื่น

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

จริง ๆ แล้วฉันทำงานกับที่ไม่ได้ตรวจสอบ คำสั่งที่คุณพูดถึงไม่ได้ทำอะไรกับตัวอย่างนี้ใน ST3:<html><head></head><body><div><p>foobar<span>baz</span></p></div></body></html>

— user110241