Sublime Text 2를 사용하여 HTML 코드를 어떻게 다시 포맷합니까?

다시 포맷하려는 형식이 잘못된 HTML 코드가 있습니다. Sublime Text 2에서 HTML 코드를 자동으로 다시 포맷하여 더보기 쉽고 읽기 쉬운 명령이 있습니까?

이를 위해 플러그인이 필요하지 않습니다. 모든 줄 ( Ctrl A)을 선택한 다음 메뉴에서 편집 → 줄 → 다시 들여 쓰기를 선택하십시오. 파일이 .html또는 과 같은 HTML을 포함하는 확장명으로 저장된 경우 작동합니다 .php.

이 작업을 자주 수행하면이 키 매핑이 유용 할 수 있습니다.

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

파일이 저장되지 않은 경우 (예 : 스 니펫에 방금 새 창에 붙여 넣은 경우) 다시 들여 쓰기 language of choice옵션을 선택하기 전에 보기 → 구문 → 메뉴를 선택하여 들여 쓰기 언어를 수동으로 설정할 수 있습니다 .

Sublime에서 HTML을 포맷하는 데에는 십여 가지 방법이 있습니다. 가장 인기있는 플러그인을 모두 테스트했습니다 (자세한 내용은 블로그 에서 작성한 글 참조). 다음은 가장 인기있는 옵션에 대한 간략한 개요입니다.

다시 들여 쓰기 명령

장점 :

• Sublime과 함께 제공되므로 플러그인을 설치할 필요가 없습니다.

단점 :

• 여분의 빈 줄을 삭제하지 않습니다
• 축소 된 HTML, 여러 개의 열린 태그가있는 행을 처리 할 수 ​​없음
• <script>블록을 올바르게 포맷하지 않습니다

꼬리표

장점 :

• ST2 / ST3 지원
• 여분의 빈 줄을 제거합니다
• 바이너리 의존성 없음

단점 :

• PHP 태그에 질식
• <script>블록을 올바르게 처리하지 않습니다

HTMLTidy

장점 :

• PHP 태그 처리
• 서식을 조정하기위한 일부 설정

단점 :

• PHP 필요 (웹 서비스로 폴백)
• ST2 만
• 버려진?

HTML 미용

장점 :

• ST2 / ST3 지원
• 단순하고 binaray 의존성이 없음
• OS X, Win 및 Linux 지원

단점 :

• 인라인 주석으로 약간 질식
• 최소화 / 압축 코드를 확장합니다

HTML-CSS-JS Prettify

장점 :

• ST2 / ST3 지원
• HTML, CSS, JS 처리
• Sublime의 메뉴와의 뛰어난 통합
• 고도로 사용자 정의 가능
• 프로젝트 별 설정
• 저장시 형식 옵션

단점 :

• Node.js 필요
• 임베디드 PHP에는 좋지 않습니다

어느 것이 가장 좋은가요?

HTML-CSS-JS Prettify가 제 책의 승자입니다. 불평하지 않는 많은 훌륭한 기능.

내가 찾은 유일한 패키지는 Tag 입니다.

패키지 컨트롤을 사용하여 설치할 수 있습니다. https://sublime.wbond.net

패키지 제어를 설치 한 후 제어 패키지로 이동 ( 기본 설정 -> 패키지 제어 )를 입력 한 다음 install, 히트를 enter. 그런 다음을 입력 tag하고 누르십시오 enter.

태그를 설치 한 후 텍스트를 강조 표시하고 바로 가기 Ctrl+ Alt+를 누릅니다 F.

이 플러그인을 추천합니다 : HTML / CSS / JS Prettify , 그것은 실제로 작동합니다.

설치 후 코드를 선택하고을 누릅니다 Ctrl+Shift+H.

끝난!

일반적인 팁. HTML을 자동 정리하고 HTML_Tidy 패키지를 설치 한 다음 기본 설정 (사용하는)에 다음 키 바인딩을 추가했습니다.

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

이것은 모든 입력마다 HTML Tidy를 실행합니다. 이것에 단점이있을 수 있습니다. 나는 Sublime에 익숙하지 않지만 내가 원하는 것을하는 것 같습니다 :)

질문은 HTML에 관한 것이지만 Sublime Text 2에 대한 Javascript 코드 를 자동 형식화 하는 방법에 대한 정보를 추가로 제공하고 싶습니다 .

모든 코드 ( ctrl+ A)를 선택하고 인앱 기능 reindent ( Edit-> Line-> Reindent)를 사용하거나 JsFormat 형식 플러그인을 사용 Sublime Text 2하여 코드를 형식화하는 방법에 대한 사용자 정의 가능한 설정을 원하는 경우 숭고한 텍스트의 기본 탭 / 들여 쓰기 설정.

https://github.com/jdc0589/JsFormat

패키지 제어 ( -> ) 를 사용하여 JsFormat 을 쉽게 설치할 수 있습니다. 패키지 제어를 연 다음 install, hit 를 입력하십시오 . 그런 다음을 입력 하고 누르십시오 . (패키지 컨트롤러는의 왼쪽 하단에 성공 및 오류와 함께 설치 상태를 표시합니다. )PreferencesPackage Controlenterjs formatenterSublime

키 바인딩에 다음 행을 추가하십시오 ( Preferences-> Key Bindings User).

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

ctrl+ alt+를 사용 2하고 있습니다. 원하는 바로 가기 키를 변경할 수 있습니다. 지금까지 JsFormat사용해 볼 가치가있는 좋은 플러그인입니다!

이것이 누군가를 도울 수 있기를 바랍니다.

SublimeHtmlTidy라는 플러그인이 있습니다.

https://github.com/welovewordpress/SublimeHtmlTidy

나에게 HTML Prettify해결책은 매우 간단했다. HTML Prettify 페이지로 갔다 .

1. 필요한 Sublime Package Manager
2. 여기 에서 패키지 관리자 설치 지침을 따랐습니다.
3. cmd + shift + p메뉴를 불러 오기 위해 입력
4. 타이핑 prettify
5. HTML prettify메뉴에서 선택을 선택하십시오

팔. 끝난. 좋아 보인다

간단하게

문서의 편집-> 태그-> 자동 서식 태그

HTML을 다시 포맷하는 작업을 수행하는 HTMLBeautify 라는 패키지를 만들었습니다 . 나는 1997 년에 찾은 Perl 스크립트를 기반으로 새로운 모든 최신 현대 태그와 작동하도록 업데이트했습니다. :)

그것을 확인하고 당신이 어떻게 생각하는지 알려주세요!

https://github.com/rareyman/HTMLBeautify

나는 이것이 당신이 찾고있는 것이라고 생각합니다.

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

나는 아직 언급 할 특권이 없으므로 위 의 답변에 대한 @peter의 답변 과 관련된 추가 정보 일뿐 입니다.

헤더의 IE 조건부 주석 이 완전히 인라인되지 않은 경우 HTML이 예상대로 정렬되지 않은 것으로 나타났습니다.

<!--[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을 사용자 지정 빌드 시스템과 함께 사용 하고 있습니다.

내 Packages / User / 디렉토리에 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에서는 직접 다운로드하고 tidy가있는 빌드 시스템에서 작업 디렉토리를 지정해야합니다.

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

또는 PATH에 추가하십시오.

바로 가기 키를 F12쉽게 설정할 수 있습니다 !!!

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

자세한 내용은 여기를 참조 하십시오 .