Làm cách nào để định dạng lại mã HTML bằng Sublime Text 2?

Tôi đã có một số mã HTML được định dạng kém mà tôi muốn định dạng lại. Có một lệnh sẽ tự động định dạng lại mã HTML trong Sublime Text 2 để nó trông đẹp hơn và dễ đọc hơn không?

Bạn không cần bất kỳ plugin nào để làm điều này. Chỉ cần chọn tất cả các dòng ( Ctrl A) và sau đó từ menu chọn Chỉnh sửa → Dòng → Reindent. Điều này sẽ hoạt động nếu tệp của bạn được lưu với một phần mở rộng có chứa HTML như .htmlhoặc .php.

Nếu bạn làm điều này thường xuyên, bạn có thể thấy ánh xạ khóa này hữu ích:

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

Nếu tệp của bạn chưa được lưu (ví dụ: bạn vừa dán đoạn trích vào cửa sổ mới), bạn có thể đặt ngôn ngữ thụt lề theo cách thủ công bằng cách chọn menu Xem → Cú pháp → language of choicetrước khi chọn tùy chọn reindent.

Có nửa tá cách để định dạng HTML trong Sublime. Tôi đã thử nghiệm từng plugin phổ biến nhất (xem phần viết tôi đã viết trên blog của mình để biết chi tiết đầy đủ), nhưng đây là tổng quan nhanh về một số tùy chọn phổ biến nhất:

Lệnh tuần lộc

Ưu điểm:

• Giao hàng với Sublime, vì vậy không cần cài đặt plugin

Nhược điểm:

• Không xóa thêm dòng trống
• Không thể xử lý HTML đã rút gọn, các dòng có nhiều thẻ mở
• Không định dạng đúng <script>khối

Nhãn

Ưu điểm:

• Hỗ trợ ST2 / ST3
• Loại bỏ các dòng trống thêm
• Không phụ thuộc nhị phân

Nhược điểm:

• Trò chuyện về các thẻ PHP
• Không xử lý <script>các khối chính xác

HTMLTidy

Ưu điểm:

• Xử lý các thẻ PHP
• Một số cài đặt để điều chỉnh định dạng

Nhược điểm:

• Yêu cầu PHP (quay lại dịch vụ web)
• Chỉ ST2
• Bị bỏ rơi?

HTMLBeautify

Ưu điểm:

• Hỗ trợ ST2 / ST3
• Đơn giản và không phụ thuộc binaray
• Hỗ trợ cho OS X, Win và Linux

Nhược điểm:

• Nghẹn ngào một chút với ý kiến ​​nội tuyến
• Có mở rộng mã được thu nhỏ / nén

HTML-CSS-JS Prettify

Ưu điểm:

• Hỗ trợ ST2 / ST3
• Xử lý HTML, CSS, JS
• Tích hợp tuyệt vời với các menu của Sublime
• Khả năng tùy biến cao
• Cài đặt theo dự án
• Định dạng trên tùy chọn lưu

Nhược điểm:

• Yêu cầu Node.js
• Không tuyệt vời cho PHP nhúng

Tốt nhất?

HTML-CSS-JS Prettify là người chiến thắng trong cuốn sách của tôi. Rất nhiều tính năng tuyệt vời, không có nhiều để phàn nàn.

Gói duy nhất tôi có thể tìm thấy là Tag .

Bạn có thể cài đặt nó bằng cách sử dụng điều khiển gói. https://sublime.wbond.net

Sau khi cài đặt gói điều khiển. Chuyển đến kiểm soát gói ( Tùy chọn -> Kiểm soát gói ) sau đó nhập install, nhấn enter. Sau đó gõ tagvà đánh enter.

Sau khi cài đặt Tag, tô sáng văn bản và nhấn phím tắt Ctrl+ Alt+ F.

Tôi khuyên dùng plugin này: HTML / CSS / JS Prettify , Nó thực sự hoạt động.

Sau khi cài đặt, chỉ cần chọn mã và nhấn Ctrl+Shift+H.

Làm xong!

Chỉ là một mẹo chung. Những gì tôi đã làm để tự động dọn dẹp HTML của mình, đã cài đặt gói HTML_Tidy và sau đó thêm liên kết phím sau vào cài đặt mặc định (mà tôi sử dụng):

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

Điều này chạy HTML Tidy với mỗi lần nhập. Có thể có những hạn chế về điều này, bản thân tôi khá mới mẻ với Sublime, nhưng dường như nó làm những gì tôi muốn :)

Hoàn toàn là câu hỏi dành cho HTML, tôi cũng muốn cung cấp thông tin về cách tự động định dạng mã Javascript của bạn cho Sublime Text 2 ;

Bạn có thể chọn tất cả mã của mình ( ctrl+ A) và sử dụng chức năng trong ứng dụng, reindent ( Edit-> Line-> Reindent) hoặc bạn có thể sử dụng plugin định dạng JsFormat Sublime Text 2nếu bạn muốn có thêm cài đặt tùy chỉnh về cách định dạng mã của mình để thêm vào Cài đặt tab / thụt lề mặc định của Sublime Text.

https://github.com/jdc0589/JsFormat

Bạn có thể dễ dàng cài đặt JsFormat bằng cách sử dụng Điều khiển gói ( Preferences-> Package Control) Mở điều khiển gói sau đó nhập cài đặt, nhấnenter . Sau đó gõ js formatvà nhấn enter, bạn đã hoàn thành. (Bộ điều khiển gói sẽ hiển thị trạng thái cài đặt thành công và lỗi ở thanh dưới cùng bên trái của Sublime)

Thêm dòng sau vào các ràng buộc chính của bạn ( Preferences-> Key Bindings User)

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

Tôi đang sử dụng ctrl+ alt+ 2, bạn có thể thay đổi phím tắt này bất cứ điều gì bạn muốn. Cho đến nay, JsFormatlà một plugin tốt, đáng để thử nó!

Hy vọng điều này sẽ giúp được ai đó.

Có một plugin có tên SublimeHtmlTidy hoạt động khá tốt

https://github.com/welovewordpress/SublimeHtmlTidy

Đối với tôi, HTML Prettifygiải pháp cực kỳ đơn giản. Tôi đã đi đến trang HTML Prettify .

1. Cần Sublime Package Manager
2. Thực hiện theo Hướng dẫn cài đặt trình quản lý gói tại đây
3. đánh máy cmd + shift + pđể đưa lên thực đơn
4. Đánh máy prettify
5. Lựa HTML prettifychọn trong menu

Bùng nổ. Làm xong. Trông thật tuyệt

Đơn giản chỉ cần đi đến

Chỉnh sửa -> Thẻ -> Thẻ định dạng tự động trên tài liệu

Tôi đã tạo một Gói có tên HTMLBeautify , thực hiện tốt công việc định dạng lại HTML. Tôi đã dựa trên kịch bản Perl mà tôi đã tìm thấy vào năm 1997. Tôi đã cập nhật nó để hoạt động với tất cả các thẻ hiện đại mới. :)

Kiểm tra nó và cho tôi biết những gì bạn nghĩ!

https://github.com/rareyman/HTMLBeautify

Tôi nghĩ rằng đây là những gì bạn đang tìm kiếm:

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

Tôi vẫn chưa có đặc quyền để bình luận vì vậy đây chỉ là thông tin bổ sung liên quan đến câu trả lời của @ peter ở trên.

Tôi thấy HTML không phù hợp như mong đợi nếu các bình luận có điều kiện của IE trong tiêu đề không hoàn toàn thẳng hàng, ví dụ như lật sang trái:

<!--[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]--> 

Có một plugin CodeFormatter mã nguồn mở đẹp , mà (cùng với việc giới thiệu lại) có thể làm đẹp mã bẩn ngay cả khi tất cả đều nằm trong một dòng.

Tôi đang sử dụng gọn gàng cùng với hệ thống xây dựng tùy chỉnh để cải thiện HTML.

Tôi có HTMLTidy.sublime-build trong thư mục Gói / Người dùng / của tôi:

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

và tệp tidy_config.cfg trong cùng thư mục:

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

Và chỉ cần chọn xây dựng hệ thống và nhấn ctrl+ bhoặc cmd+ bđể định dạng lại nội dung tệp. Một vấn đề nhỏ đó là ST2 không tự động tải lại tệp để xem kết quả bạn phải chuyển sang một số tệp khác và quay lại (hoặc sang ứng dụng khác và quay lại).

Trên Mac, tôi đã sử dụng macports để cài đặt gọn gàng, trên Windows, bạn phải tự tải xuống và chỉ định thư mục làm việc trong hệ thống xây dựng, nơi đặt gọn gàng:

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

hoặc thêm nó vào PATH.

bạn có thể đặt phím tắt F12dễ dàng !!!

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

xem chi tiết tại đây .