ฉันจะฟอร์แมตโค้ด HTML ใหม่โดยใช้ Sublime Text 2 ได้อย่างไร

ฉันได้รับโค้ด HTML ที่มีรูปแบบไม่ดีที่ฉันต้องการจัดรูปแบบใหม่ มีคำสั่งที่จะฟอร์แมตโค้ด HTML ใหม่ใน Sublime Text 2 โดยอัตโนมัติหรือไม่ดังนั้นจึงดูดีขึ้นและอ่านง่ายขึ้น?

คุณไม่ต้องการปลั๊กอินใด ๆ ในการทำเช่นนี้ เพียงเลือกทุกบรรทัด ( Ctrl A) จากนั้นเลือกเมนูแก้ไข→บรรทัด→ป้อนสารบัญใหม่ นี้จะทำงานหากไฟล์ของคุณจะถูกบันทึกไว้ที่มีนามสกุลที่มี HTML เหมือนหรือ.html.php

หากคุณทำสิ่งนี้บ่อยครั้งคุณอาจพบว่าการจับคู่คีย์นี้มีประโยชน์:

{ "keys": ["ctrl+shift+r"], "command": "reindent" , "args": { "single_line": false } }

หากไฟล์ของคุณไม่ได้รับการบันทึก (เช่นคุณเพิ่งวางตัวอย่างในหน้าต่างใหม่) คุณสามารถตั้งค่าภาษาสำหรับการเยื้องด้วยตนเองโดยเลือกเมนูมุมมอง→ไวยากรณ์→ language of choiceก่อนเลือกตัวเลือก reindent

มีวิธีครึ่งโหลหรือมากกว่านั้นในการจัดรูปแบบ HTML ใน Sublime ฉันได้ทดสอบปลั๊กอินยอดนิยมแต่ละตัว (ดูรายละเอียดทั้งหมดที่ฉันทำในบล็อกของฉัน ) แต่นี่เป็นภาพรวมโดยย่อของตัวเลือกยอดนิยมบางส่วน:

คำสั่ง reindent

ข้อดี:

• จัดส่งพร้อม Sublime ดังนั้นไม่จำเป็นต้องติดตั้งปลั๊กอิน

จุดด้อย:

• ไม่ลบบรรทัดว่างพิเศษ
• ไม่สามารถจัดการ HTML ที่ย่อขนาดได้บรรทัดที่มีแท็กเปิดหลายรายการ
• จัดรูปแบบ<script>บล็อกไม่ถูกต้อง

แท็ก

ข้อดี:

• รองรับ ST2 / ST3
• ลบบรรทัดว่างพิเศษ
• ไม่มีการอ้างอิงแบบไบนารี

จุดด้อย:

• Chokes บนแท็ก PHP
• จัดการกับ<script>บล็อกไม่ถูกต้อง

HTMLTidy

ข้อดี:

• จัดการแท็ก PHP
• การตั้งค่าบางอย่างเพื่อปรับแต่งการจัดรูปแบบ

จุดด้อย:

• ต้องการ PHP (กลับไปใช้บริการเว็บ)
• ลำดับที่ 2 เท่านั้น
• ที่ถูกทิ้งร้าง?

HTMLBeautify

ข้อดี:

• รองรับ ST2 / ST3
• ง่ายและไม่มีการพึ่งพา binaray
• รองรับ OS X, Win และ Linux

จุดด้อย:

• ฉายาเล็กน้อยด้วยความคิดเห็นแบบอินไลน์
• ขยายย่อ / บีบอัดย่อเล็กสุด

HTML-CSS-JS Prettify

ข้อดี:

• รองรับ ST2 / ST3
• จัดการ HTML, CSS, JS
• การผสานที่ยอดเยี่ยมกับเมนูของ Sublime
• ปรับแต่งได้สูง
• การตั้งค่าต่อโครงการ
• รูปแบบตัวเลือกการบันทึก

จุดด้อย:

• ต้องการ Node.js
• ไม่ดีสำหรับ PHP แบบฝัง

ไหนดีที่สุด

HTML-CSS-JS Prettify เป็นผู้ชนะในหนังสือของฉัน คุณสมบัติที่ยอดเยี่ยมมากมายไม่ต้องบ่นอะไรมากมาย

แพคเกจเดียวที่ฉันได้รับสามารถที่จะพบคือแท็ก

คุณสามารถติดตั้งได้โดยใช้การควบคุมแพ็คเกจ https://sublime.wbond.net

หลังจากติดตั้งชุดควบคุม ไปที่แพคเกจการควบคุม ( Preferences -> แพคเกจควบคุม ) จากนั้นพิมพ์ตีinstall enterจากนั้นพิมพ์และการตีtagenter

หลังจากติดตั้งแท็กเน้นข้อความและกดลัดCtrl+ +AltF

ฉันแนะนำปลั๊กอินนี้: HTML / CSS / JS Prettify ใช้งานได้จริง

Ctrl+Shift+Hหลังจากการติดตั้งเพียงแค่เลือกรหัสและกด

ทำ!

เพียงแค่เคล็ดลับทั่วไป สิ่งที่ฉันทำเพื่อทำให้เป็นระเบียบเรียบร้อยขึ้น HTML ของฉันคือการติดตั้งแพคเกจ HTML_Tidy จากนั้นเพิ่มการเชื่อมโยงปุ่มกดต่อไปนี้เป็นการตั้งค่าเริ่มต้น (ซึ่งฉันใช้):

{ "keys": ["enter"], "command": "html_tidy" },

การดำเนินการนี้จะเป็นระเบียบเรียบร้อย HTML เมื่อป้อนทุกครั้ง อาจมีข้อเสียคือฉันค่อนข้างใหม่สำหรับ Sublime แต่ดูเหมือนว่าจะทำสิ่งที่ฉันต้องการ :)

คำถามมีไว้สำหรับ HTML ฉันยังต้องการให้ข้อมูลเกี่ยวกับวิธีจัดรูปแบบโค้ด Javascript ของคุณโดยอัตโนมัติสำหรับ Sublime Text 2 ;

คุณสามารถเลือกรหัสทั้งหมดของคุณ ( ctrl+ A) และใช้ฟังก์ชั่นในแอพพลิเคชั่น, ใส่ใหม่ ( Edit-> Line-> Reindent) หรือคุณสามารถใช้ปลั๊กอินการจัดรูปแบบ JsFormat สำหรับSublime Text 2หากคุณต้องการตั้งค่าที่กำหนดเองเพิ่มเติมเกี่ยวกับวิธีการจัดรูปแบบรหัสของคุณ แท็บเริ่มต้นของ Sublime Text / การตั้งค่าเยื้อง

https://github.com/jdc0589/JsFormat

คุณสามารถติดตั้งJsFormatกับการใช้แพคเกจการควบคุม ( Preferences-> Package Control) ควบคุมแพคเกจเปิดแล้วพิมพ์ติดตั้งตี enterจากนั้นพิมพ์js formatและกดenterคุณเสร็จแล้ว (คอนโทรลเลอร์แพ็กเกจจะแสดงสถานะของการติดตั้งพร้อมความสำเร็จและข้อผิดพลาดที่แถบด้านล่างซ้ายของSublime)

เพิ่มบรรทัดต่อไปนี้ในการผูกคีย์ของคุณ ( Preferences-> Key Bindings User)

{ "keys": ["ctrl+alt+2"], "command": "js_format"}

ฉันใช้ctrl+ alt+ 2คุณสามารถเปลี่ยนปุ่มทางลัดนี้ตามที่คุณต้องการ จนถึงตอนJsFormatนี้เป็นปลั๊กอินที่ดีคุ้มค่าที่จะลอง!

หวังว่านี่จะช่วยใครซักคน

มีปลั๊กอินชื่อ SublimeHtmlTidy ซึ่งใช้งานได้ดี

https://github.com/welovewordpress/SublimeHtmlTidy

สำหรับฉันHTML Prettifyทางออกนั้นง่ายมาก ฉันไปที่หน้า HTML เสริมสวย

1. จำเป็นต้องใช้ Sublime Package Manager
2. ทำตามคำแนะนำสำหรับการติดตั้งตัวจัดการแพคเกจที่นี่
3. พิมพ์cmd + shift + pเพื่อเรียกเมนูขึ้นมา
4. พิมพ์ prettify
5. เลือกส่วนที่HTML prettifyเลือกในเมนู

ความเจริญ เสร็จสิ้น ดูดี

เพียงไปที่

แก้ไข -> แท็ก -> แท็กรูปแบบอัตโนมัติในเอกสาร

ฉันสร้างแพ็คเกจที่เรียกว่าHTMLBeautifyซึ่งทำงานได้ดีในการฟอร์แมต HTML ฉันใช้มันจากสคริปต์ Perl ที่ฉันค้นพบในปี 1997 ฉันอัปเดตเพื่อให้ทำงานร่วมกับแท็กที่ทันสมัยแบบใหม่ทั้งหมด :)

ตรวจสอบและแจ้งให้เราทราบว่าคุณคิดอย่างไร!

https://github.com/rareyman/HTMLBeautify

ฉันคิดว่านี่คือสิ่งที่คุณกำลังมองหา:

https://github.com/victorporof/Sublime-HTMLPrettify

ฉันยังไม่มีสิทธิ์แสดงความคิดเห็นดังนั้นนี่เป็นเพียงข้อมูลเพิ่มเติมที่เกี่ยวข้องกับคำตอบของ @ peter ด้านบนคำตอบ

ฉันพบ HTML ไม่ตรงตามที่คาดไว้หากความคิดเห็นตามเงื่อนไข IE ในส่วนหัวไม่สมบูรณ์ในบรรทัดเช่นล้างไปทางซ้าย:

<!--[if lt IE 7]>
<p class='chromeframe'>Your browser is <em>unsupported</em>. <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p>
<![endif]-->
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]--> 

มีปลั๊กอินโอเพนซอร์ซ CodeFormatter ที่ดีซึ่ง (พร้อมการใส่ใหม่) สามารถตกแต่งโค้ดที่สกปรกแม้ทั้งหมดจะอยู่ในบรรทัดเดียว

ฉันใช้ระเบียบเรียบร้อยร่วมกับระบบสร้างที่กำหนดเองเพื่อแสดง HTML

ฉันมี HTMLTidy.sublime-build ในแพ็คเกจ / ผู้ใช้ / ไดเรกทอรีของฉัน:

{
  "cmd": ["tidy", "-config", "$packages/User/tidy_config.cfg", "$file"]
}

และไฟล์ tidy_config.cfg ในไดเรกทอรีเดียวกัน:

indent: auto
tab-size: 4
show-warnings: no
write-back: yes
quiet: yes
indent-cdata: yes
tidy-mark: no
wrap: 0

และเพียงแค่เลือกสร้างระบบและกดctrl+ bหรือcmd+bเพื่อฟอร์แมตเนื้อหาไฟล์ ปัญหาเล็กน้อยอย่างหนึ่งคือ ST2 ไม่ได้ทำการรีโหลดไฟล์โดยอัตโนมัติเพื่อดูผลลัพธ์ที่คุณต้องสลับไปที่ไฟล์อื่นและย้อนกลับ (หรือไปที่แอปพลิเคชันอื่นและย้อนกลับ)

ใน Mac ฉันใช้ macports เพื่อติดตั้งเรียบร้อยบน Windows คุณต้องดาวน์โหลดด้วยตัวเองและระบุไดเรกทอรีทำงานในระบบบิลด์ที่เป็นที่เรียบร้อย:

"working_dir": "c:\\HTMLTidy\\"

หรือเพิ่มลงใน PATH

คุณสามารถตั้งค่าปุ่มลัดได้F12ง่าย !!!

{ "keys": ["f12"], "command": "reindent" , "args": { "single_line": false } }

ดูรายละเอียดที่นี่