Sublime Text (일명 prettify / beautify / format) 용 HTML 자동 들여 쓰기 기능 또는 플러그인이 있습니까?


23

예를 들어, 변경할 사항 :

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

에:

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

... 전체 페이지와 스 니펫에서 작동합니다.

  • 내장 Edit > Line > Reindent설정은 이것을하지 않습니다
  • 플러그인 HTMLTidy가 추가 head하고 body태그를 지정하므로 부분적으로 작동하지 않으며 다양한 다른 문제가 있습니다.
  • 플러그인 태그에는 근본적으로 작동하지 않을만큼 다양한 문제 가 있습니다.
  • HTMLPrettify 플러그인에는 다양한 문제 가 있으며 node.js가 필요하며 몇 달 안에 업데이트되지 않았습니다.
  • gist.github.com/mcdonc/3898894는 주장하지만 Emacs가 필요합니다

(메모장 ++에는 자동 들여 쓰기, 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>

질문이 무엇입니까? 게시물에서 질문이 무엇인지 명확하지 않습니다.
Brad Patton

질문이되도록 제목을 수정했습니다. Sublime Text에서 HTML을 자동 들여 쓰기하는 방법을 찾으려고합니다.
user110241


고맙게도, 그 스레드에서 각 솔루션을 시도했지만 그중 아무것도 작동하지 않습니다. 나는이 스레드에서 많은 사람들이 작동하지 않는 이유를 나열했습니다.
user110241

나는 이것이 가장 효과적인 해결책이라고 생각합니다 : jsbeautifier.org 여러 인라인 태그 형식과 동일한 요구 사항이 있습니다. 이것은 정말 잘 작동합니다. 숭고한 텍스트에 대한 적절한 마크 업을 만들어 청크를 닫을 수 있습니다. CLI에서 npmjs.com/package/js-beautify
Sai krishna Deep

답변:


18

이 코드 reindent는 항상 작동하지 않습니다. Tag플러그인을 사용할 수 있습니다 (패키지 제어에서 설치). 그런 다음 ctrl+ shift+ 를 누르고을 p입력하십시오 tag. 옵션이 표시 Auto-Format tags on document됩니다. 를 선택하고를 누릅니다 Enter. 그렇게 할 것입니다.


1
원래 게시물에서 언급했듯이 태그 플러그인은 특히 매우 나쁜 버그 중에서도 특히 인라인 태그를 처리 할 때 손상되었습니다. 저자는 "모든 것을 다시 작성해야한다"고 말했다. reindent는 HTML에서 전혀 작동하지 않으며 들여 쓰기가 정확하지 않습니다. 태그를 특정 들여 쓰기 수준에 맞 춥니 다.
user110241

글쎄, 태그가 나를 위해 일했다. HTML 스 니펫을 사용했습니다. 완벽하게 작동했습니다. reindent는 HTML에서 작동하지만 특정 조건에서는 작동합니다.
Bibhas

이 스 니펫에서 Tag의 자동 형식을 사용해보십시오 <p>foo<a>bar<span>baz<span>qux</span></span></a></p>. 또한 HTML5 보일러 플레이트의 일부인 IE 조건부 주석 (일반적인 주석)으로 래핑 된 시작 HTML 태그의 형식을 엉망으로 만듭니다. Line > Reindent이 코드 조각에 내장 된 jsfiddle.net/y8xXj 를 사용해보십시오 .
user110241

참고-방금 Sublime Text 3에서 HTML 스 니펫으로 시도했지만 실제로 작동합니다!
Steven

2
같은 문제입니다. 과거에는 Coda, Sublime, Espresso, Chocolat, TextMate 등 수많은 편집기를 사용해 왔지만 Dreamweaver의 소스 적용 형식과 같이 텍스트를 완벽하게 형식화 할 수 없었습니다. Tidy 또는 Dreamweaver처럼 작동하지 않는 다른 플러그인을 제안하는 사람들. 누군가 "Zooted"가이 문제를보고있어서 기쁘다. 불행히도 아직 해결책이 없습니다. Sublime Text 3에서 Zooted Noted로 태그가 있어도 위의 예와 같이 제대로 작동하지 않습니다. 그리고 기본 Reindent 기능은 무가치합니다.
cchiera

6

모두-> 편집 메뉴-> 라인 -> Reindend 를 선택하십시오 . 동일한 용도 로 바로 가기 조합설정할 수 있습니다.

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


1
질문에서 언급했듯이 이것은 작동하지 않습니다 . 내가 제공 한 첫 번째 스 니펫에서 사용해보십시오. <section> <article> <h1> </ h1> <p> </ p> </ article> </ section>
user110241

나를 위해 작동합니다. 구문이 HTML로 설정 되었습니까?
Manuel Arwed Schmidt 2016

2
나를 위해 작동하지 않습니다.
Derek 朕 會 功夫

예, 그것은 꽤 잘 작동하지만 결국에는 <div>태그를 열 때 떨어지기 시작했습니다 .
ruffin

0

다시 들여 쓰기 기능이 작동하려면 "공백을 사용하여 들여 쓰기"옵션을 선택 취소해야합니다.

보기 >> 들여 쓰기 >> 공백을 사용하여 들여 쓰기

이 옵션을 선택 해제하면 텍스트를 선택하고 재확인 할 수 있습니다.

편집 >> 줄 >> Reindent

이것은 XML뿐만 아니라 HTML 구문에서도 작동합니다. 다른 곳에서는 테스트하지 않았습니다.


나는 실제로 이미 체크되지 않은 상태로 작업하고있었습니다. 언급 한 명령은 ST3의이 스 니펫에 전혀 영향을 미치지 않습니다.<html><head></head><body><div><p>foobar<span>baz</span></p></div></body></html>
user110241
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.