Câu hỏi 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ó lệnh nào 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?


1182
2018-01-12 17:49


gốc


Xem thêm stackoverflow.com/questions/9495007/… - Kristopher Johnson
Ngoài ra nếu bạn sử dụng chế độ Vintage, bạn có thể chỉ cần sử dụng gg = G ở chế độ bình thường. - Wiktor Mociun
Bạn có thể lãng phí thời gian của bạn đọc qua toàn bộ trang này, hoặc bạn chỉ có thể nhận được github.com/akalongman/sublimetext-codeformatter và trở lại làm việc. - shaneparsons


Các câu trả lời:


Bạn không cần bất kỳ plugin nào để thực hiện việc này. Chỉ cần chọn tất cả các dòng (Ctrl A) và sau đó từ menu chọn Edit → Line → Reindent. Điều này sẽ hoạt động nếu tệp của bạn được lưu với tiện ích có chứa HTML như .html hoặc là .php.

Nếu bạn làm điều này thường xuyên, bạn có thể thấy bản đồ phím này hữu ích:

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

Nếu tệp của bạn không được lưu (ví dụ: bạn vừa dán một đoạn mã vào một cửa sổ mới), bạn có thể đặt ngôn ngữ cho thụt đầu dòng theo cách thủ công bằng cách chọn trình đơn Xem → Cú pháp → language of choice trước khi chọn tùy chọn tuần tự.


1930
2018-06-04 21:47



Nhân tiện, điều này cũng hoạt động đối với mã nguồn HTML không, ví dụ như Ruby hoặc JS - peter
Điều này làm việc tuyệt vời nếu mã không có nhiều thẻ mở trên một dòng mà cũng không đóng trên một dòng hoặc ngược lại. - Charlie Gorichanaz
Hoàn hảo! Trên mac, bạn cần siêu cho khóa cmd, do đó, chẳng hạn: {"keys": ["super + shift + r"], "command": "reindent", "args": {"single_line": false}} - Geert Weening
dòng reindent hoàn toàn không làm việc để định dạng HTML tùy ý. chẳng hạn như khi có nhiều thẻ html không có ngắt dòng. Câu trả lời HtmlTidy từ @anneke là cấp trên. Xa như tôi có thể nói, bất kể dòng sản phẩm, nó hoàn toàn và đúng cách định dạng lại nguồn html thành nguồn thụt lề độc đáo. - jpwynn
Đối với người mới, nhấp vào "Tuỳ ​​chọn", sau đó chọn "Ràng buộc khóa - Người dùng" và dán mã của peter vào giữa dấu ngoặc vuông và lưu tệp. - sigmapi13


Có một 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 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 liên kết

Ư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 được rút gọn, các dòng có nhiều thẻ mở
  • Định dạng không đúng <script> khối

Nhãn

Ưu điểm:

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

Nhược điểm:

  • Truyện cười trên thẻ PHP
  • Không xử lý <script> chặn chính xác

HTMLTidy

Ưu điểm:

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

Nhược điểm:

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

HTMLĐịnh dạng lại

Ưu điểm:

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

Nhược điểm:

  • Truyện cười một chút với ý kiến ​​nội tuyến
  • Mở rộng mã nén / nén

Tạo HTML-CSS-JS

Ư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
  • Tùy biến cao
  • Cài đặt theo từng dự án
  • Định dạng tùy chọn lưu

Nhược điểm:

  • Yêu cầu Node.js
  • Không tuyệt vời cho PHP được 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 nhiều để khiếu nại.


351
2018-01-18 16:29



Xếp thứ hai vào Prettify. Các thụt lề lại không hoạt động trên html tôi đã có, không thể tìm thấy Tag và HtmlTidy đã không làm bất cứ điều gì khi tôi gọi nó. - jcollum
chỉ cần thử nó ra và HTML-CSS-JS Prettify làm việc trong trường hợp sử dụng của tôi một cách lý tưởng (xử lý dọn dẹp html tốt hơn nhiều so với các gói dựng sẵn hoặc các gói định dạng lại khác) - Mark Essel
Đã thử tất cả những người khác, nhưng người duy nhất làm việc (cho một đoạn mã HTML) là HTML-CSS-JS Prettify. Cảm ơn bạn! - zumek
Cũng muốn đề cập đến rằng bạn có thể loại bỏ tất cả các thụt đầu dòng (một khi đánh dấu đã được chỉnh sửa, ví dụ) chỉ đơn giản bằng cách sử dụng chức năng dựng sẵn của ST - chọn khối và nhấn ctrl + j. - zumek
Điều này làm việc với phần mở rộng không html? tôi đã thử trên php và các mẫu khác, nó không hoạt động. - Bsienn


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

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 (Sở thích -> Kiểm soát gói) sau đó nhập install, đánh đi vào. Sau đó nhập tag va đanh đi vào.

Sau khi cài đặt thẻ, đánh dấu văn bản và nhấn phím tắt Ctrl+Alt+F.


172
2018-01-13 23:12



một plugin tốt hơn là HTML Tidy - MatthewFord
cảm ơn ... chỉ biết bây giờ về các gói: D. thấy một số thứ tuyệt vời cho văn bản tuyệt vời ở đây. arlando.net/blog/… - mars-o
Điều này một cách trung thực là thứ duy nhất hoạt động hoàn hảo với một số mã HTML có hàng trăm ngắt dòng ngẫu nhiên, các thẻ được lồng vào không chính xác. Về cơ bản nó đã dọn sạch một trong những trang HTML lộn xộn nhất mà tôi từng thấy! - justinhartman
Tôi không đồng ý với @ mars-o; plugin này rất tuyệt. Tidy làm một vài điều thực sự tốt, và rất thành lập, nhưng plugin này thực hiện khá nhiều điều thú vị khác. Cảm ơn vì bài đăng. - zedd45
điều này không làm việc cho xml - Jonny Leeds


Tôi khuyên bạn nên sử dụng plugin này: HTML / CSS / JS, Nó thật sự có hiệu quả.

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

Làm xong!


45
2018-01-07 03:22



Bạn cần Node.js để sử dụng plugin đó. Không phải rất thoải mái cho người dùng bình thường. - nikoskip
So sánh với tính hữu ích của plugin này, chúng ta có thể bỏ qua sự cố khi cài đặt Node.js;) - Peter Zhu
Hướng dẫn cài đặt packagecontrol.io/packages/HTML-CSS-JS%20Prettify làm việc tuyệt vời. cảm ơn. - Sacky San


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 khóa sau đây vào các thiết lập 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ược điểm đối với điều này, tôi khá mới với Sublime bản thân mình, nhưng có vẻ như làm những gì tôi muốn :)


38
2017-11-01 15:17



Tôi tưởng tượng plugin này có thể trở thành một chút chuyên sâu trên các tập tin lớn, mà có thể trở nên chậm chạp nếu nó chạy mỗi khi bạn nhấn Enter? - Rikki
Tôi đã sử dụng phím ENTER trong khoảng một ngày rồi xóa nó. nó quá chậm và giữ con trỏ tới đầu màn hình trong phiên bản 2. - Ravi Ram


Câu hỏi đặt ra là dành cho HTML, tôi cũng muốn bổ sung thông tin về cách tự động định dạng mã Javascript của bạn cho Văn bản siêu việt 2;

Bạn có thể chọn tất cả mã của bạn (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 cho Sublime Text 2 nếu bạn muốn có nhiều cài đặt có thể tùy chỉnh hơn về cách định dạng mã của bạn để bổ sung vào cài đặt tab / thụt lề mặc định của Văn bản tuyệt đối.

https://github.com/jdc0589/JsFormat

Bạn có thể dễ dàng cài đặt JsFormat bằng cách sử dụng Kiểm soát gói (Preferences -> Package Control) Mở kiểm soát gói rồi loại cài đặt, nhấn đi vào. Sau đó nhập js format va đanh đi vào, bạn đã hoàn tất. (Bộ điều khiển gói sẽ hiển thị trạng thái của quá trình cài đặt với thành công và lỗi trên 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 khóa 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, JsFormat là một plugin tốt, đáng để thử nó!

Hy vọng điều này sẽ giúp một ai đó.


20
2018-06-24 11:34





Có một plugin được gọi là SublimeHtmlTidy hoạt động khá tốt

https://github.com/welovewordpress/SublimeHtmlTidy


11
2017-09-08 11:00





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

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


9
2017-10-09 00:23



Tôi không thấy tùy chọn trình đơn đó trong Sublime Text 2 Version 2.0.1, Build 2217 trên máy Mac. Bạn có chắc đó là một tính năng tiêu chuẩn? - ostergaard
Bạn phải cài đặt Thẻ từ Trình quản lý gói. Nhưng tôi có một vấn đề với nó. Khi nào <b>somthing</b> tiếp theo là dấu phẩy, dấu phẩy được đặt trên một dòng mới, dẫn đến khoảng trắng giữa thứ gì đó và dấu phẩy trong chế độ xem trình duyệt. - reitermarkus


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

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

Boom. Làm xong. Trông rất tuyệt


9
2017-07-27 16:01



Giải pháp này làm việc chính xác như thế nào tôi muốn nó và mất tất cả, nhưng 2 giây nếu bạn đã cài đặt PM đã. Có thể muốn thêm rằng bạn cần phải cài đặt gói prettify. - doogle
Lưu ý: Đối với bất kỳ ai quan tâm, plugin trong câu trả lời này yêu cầu cài đặt node.js. - Fake Name


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

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

https://github.com/rareyman/HTMLBeautify


7
2018-01-21 18:46



Tôi đã cài đặt nó nhưng khi tôi chạy HTMLBeautify trên tệp demo thì không có gì. Một thông báo Hiển thị rằng tệp được làm đẹp, nhưng không có gì xảy ra với nội dung tệp. - Sam
Tôi đoán là bạn đang sử dụng Windows ...? Trên Windows, bạn cần phải khởi động lại SublimeText 2 để có sẵn tập lệnh. Hãy thử điều đó và cho tôi biết điều gì sẽ xảy ra. :) - Ross
Tôi đã làm, kịch bản đã có sẵn, nó chỉ không thay đổi bất cứ điều gì trong tập tin. - Sam
Lạ thật. Tôi giả sử tất cả các plugin / gói khác hoạt động như bình thường? Tôi dường như không thể sao chép vấn đề này trong môi trường thử nghiệm của mình — vì vậy tôi không chắc chắn nên nói gì với bạn. :( - Ross
Ngoài việc định dạng mọi thứ hoạt động như tôi mong đợi - có lẽ vì tôi đang chạy một phiên bản tiếng Đức của cửa sổ? - Sam


Có một nguồn mở tuyệt vời Plugin CodeFormatter, mà (cùng với reindenting) có thể làm đẹp mã bẩn thậm chí tất cả nó là trong một dòng.


6
2018-04-23 07:34



Lưu ý: Điều này đòi hỏi phải cài đặt PHP cục bộ. - Fake Name
Tôi đã tìm thấy đây là chỉ có tốt plugin .. và tôi đã cố gắng gần như tất cả chúng. - shaneparsons
Có vẻ như trang này có cài đặt để định dạng các thuộc tính HTML. Tôi không thấy bất kỳ plugin nào khác làm điều đó? Hay tôi đang thiếu một cái? - Basil