Có tính năng tự động thụt lề HTML hoặc plugin cho Sublime Text (hay còn gọi là prettify / beautify / format) không?


23

Ví dụ, một cái gì đó để thay đổi:

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

đến:

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

... hoạt động trên các trang đầy đủ và đoạn trích.

  • Việc xây dựng trong Edit > Line > Reindentbối cảnh không làm điều này
  • Plugin HTMLTidy thêm headbodycác thẻ, vì vậy nó không hoạt động cho các phần, nó cũng có nhiều vấn đề khác
  • Thẻ plugin có nhiều vấn đề khác nhau , đủ để nó không hoạt động
  • Plugin HTMLPrettify có nhiều vấn đề khác nhau , yêu cầu node.js và chưa được cập nhật trong nhiều tháng
  • gist.github.com/mcdonc/3898894 yêu cầu thực hiện nhưng yêu cầu Emacs

(Notepad ++ đã tự động thụt lề, Dreamweaver đã áp dụng Định dạng nguồn, Aptana có Định dạng, v.v.)

Plugin Tag xử lý các thẻ nội tuyến không chính xác , ví dụ: sử dụng nó trên đoạn mã này:

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

kết quả trong:

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

Câu hỏi là gì? Không rõ từ bài viết của bạn câu hỏi là gì.
Brad Patton

Chỉnh sửa tiêu đề để được thẩm vấn. Tôi đang cố gắng tìm cách nào đó để tự động thụt lề HTML trong Sublime Text.
110241


Cảm ơn, tôi đã thử từng giải pháp trong chủ đề đó, không ai trong số họ làm việc. Tôi đã liệt kê các lý do tại sao nhiều người trong số họ không làm việc trong chủ đề này.
110241

Tôi nghĩ rằng đây là giải pháp hoạt động tốt nhất: jsbeautifier.org Tôi có cùng yêu cầu định dạng nhiều thẻ nội tuyến. Điều này hoạt động thực sự tốt. Nó tạo ra đánh dấu thích hợp cho văn bản cao siêu cũng có thể đóng các đoạn. Nó cũng có sẵn trên CLI với tên npmjs.com/package/js-beautify
Sai krishna Deep

Câu trả lời:


18

Các reindentkhông phải lúc nào làm việc cho các đoạn. Bạn có thể sử dụng Tagplugin (cài đặt từ kiểm soát gói). Sau đó chỉ cần nhấn ctrl+ shift+ pvà gõ tag. Bạn sẽ thấy tùy chọn Auto-Format tags on document. Chọn và nhấn Enter. Điều đó sẽ làm điều đó.


1
Như tôi đã đề cập trong bài viết gốc, plugin Tag bị hỏng, đặc biệt là trong việc xử lý các thẻ nội tuyến, trong số các lỗi rất xấu khác. Tác giả đã nói rằng anh ta cần "viết lại toàn bộ". Reindent hoàn toàn không hoạt động với HTML, nó không thụt lề chính xác; nó chỉ căn chỉnh các thẻ đến một mức thụt lề nhất định.
110241

tốt, Tag làm việc cho tôi. Tôi đã sử dụng đoạn mã HTML của bạn. Nó hoạt động hoàn hảo. Và reindent không hoạt động cho HTML nhưng trong một số điều kiện nhất định.
Bibhas 17/03/13

hãy thử sử dụng tính năng tự động định dạng thẻ của Tag trên đoạn trích này: <p>foo<a>bar<span>baz<span>qux</span></span></a></p>để xem ý tôi là gì. Nó cũng làm rối định dạng của thẻ HTML mở được gói trong các nhận xét có điều kiện IE là một phần của HTML5 Boilerplate (và các nhận xét nói chung). Hãy thử sử dụng tính năng tích hợp Line > Reindenttrên đoạn trích này: jsfiddle.net/y8xXj để xem nó thất bại như thế nào.
110241

FYI - Chỉ cần thử trong Sublime Text 3 với một đoạn mã HTML và nó thực sự hoạt động!
Steven

2
Cùng một vấn đề. Tôi đã từng sử dụng vô số trình soạn thảo trong quá khứ, Coda, Sublime, Espresso, Chocolat, TextMate ... nhưng chưa ai có thể định dạng văn bản một cách hoàn hảo như Định dạng nguồn áp dụng của Dreamweaver. Mọi người chỉ cần đề xuất Tidy hoặc một số plugin khác không bao giờ hoạt động như Dreamweaver. Tôi rất vui khi ai đó "Zooted" thấy vấn đề này. Thật đáng tiếc vẫn không có giải pháp. Trong Sublime Text 3 như Zooted Noted ngay cả với Tag, nó không hoạt động chính xác (như trong ví dụ trên của anh ấy). Và tính năng Reindent bản địa là khá vô giá trị.
cchiera

6

Chọn Tất cả -> Chỉnh sửa menu -> Dòng -> Reindend sẽ làm. Bạn có thể đặt kết hợp phím tắt cho cùng sử dụng.

{"Phím": ["ctrl + shift + r"], "lệnh": "reindent", "args": {"single_line": false}}


1
Như tôi đã đề cập trong câu hỏi, điều này không hoạt động. Hãy thử nó trên đoạn trích đầu tiên tôi cung cấp: <phần> <bài viết> <h1> </ h1> <p> </ p> </ article> </ phần>
user110241

Làm việc cho tôi. Cú pháp được đặt thành HTML?
Manuel Arwed Schmidt

2
Không làm việc cho tôi.
Derek 朕 會

Vâng, nó làm một công việc khá tốt, nhưng cuối cùng bắt đầu giảm xuống, trong trường hợp của tôi <div>mở thẻ.
ruffin

0

Để tính năng Reindent hoạt động, bạn phải bỏ chọn tùy chọn "Không gian sử dụng thụt lề":

Xem >> thụt lề >> thụt lề sử dụng không gian

Khi tùy chọn này đã được bỏ chọn, bạn có thể chọn văn bản của mình và Reindent:

Chỉnh sửa >> Dòng >> Reindent

Điều này sẽ làm việc cho cú pháp HTML cũng như XML. Không thử nghiệm nó trên bất kỳ người khác.


Tôi thực sự đã làm việc với điều đó không được kiểm soát. Lệnh bạn đã đề cập hoàn toàn không có gì với đoạn trích này trong ST3:<html><head></head><body><div><p>foobar<span>baz</span></p></div></body></html>
user110241
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.