etc./StackOverFlow

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

청렴결백한 만능 재주꾼 2023. 4. 9. 15:42
반응형

질문자 :Ravi Ram


서식을 다시 지정하고 싶은 잘못된 형식의 HTML 코드가 있습니다. Sublime Text 2에서 HTML 코드의 서식을 자동으로 다시 지정하여 더 보기 좋고 읽기 쉽도록 하는 명령이 있습니까?



이를 위해 플러그인이 필요하지 않습니다. 모든 줄( CTRL + A )을 선택한 다음 메뉴에서 편집 → 줄 → 다시 들여쓰기를 선택하기만 하면 됩니다. .html 또는 .php 와 같은 HTML을 포함하는 확장자로 저장된 경우 작동합니다.

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

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

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


peter

Sublime에서 HTML 형식을 지정하는 방법은 6가지 정도 있습니다. 가장 인기 있는 플러그인을 각각 테스트 했지만(자세한 내용은 내 블로그에 작성한 글 참조) 가장 인기 있는 옵션에 대한 간략한 개요는 다음과 같습니다.

다시 들여쓰기 명령

장점:

  • Sublime과 함께 제공되므로 플러그인 설치가 필요하지 않습니다.

단점:

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

꼬리표

장점:

  • ST2/ST3 지원
  • 여분의 빈 줄 제거
  • 바이너리 종속성 없음

단점:

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

HTMLTidy

장점:

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

단점:

  • PHP 필요(웹 서비스로 대체)
  • ST2 전용
  • 버려진?

HTML미화

장점:

  • ST2/ST3 지원
  • 단순하고 바이너리 종속성이 없음
  • OS X, Win 및 Linux 지원

단점:

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

HTML-CSS-JS 예쁘게

장점:

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

단점:

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

어느 것이 가장 좋습니까?

HTML-CSS-JS Prettify는 내 책의 승자입니다. 많은 훌륭한 기능이 있으며 불평할 것이 없습니다.


Josh Earl

내가 찾을 수 있었던 유일한 패키지는 Tag 입니다.

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

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

태그를 설치한 후 텍스트를 강조 표시하고 단축키 Ctrl + Alt + F 를 누릅니다.


dardub

이 플러그인을 추천합니다: HTML/CSS/JS Prettify , 정말 작동합니다.

설치 후 코드를 선택하고 CTRL + SHIFT + H 를 누르십시오.

완료!


Peter Zhu

그냥 일반적인 팁입니다. HTML을 자동으로 정리하기 위해 한 일은 HTML_Tidy 패키지를 설치한 다음 기본 설정(내가 사용하는)에 다음 키 바인딩을 추가하는 것입니다.

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

이것은 입력할 때마다 HTML Tidy를 실행합니다. 이것에 단점이 있을 수 있습니다. 저는 Sublime에 대해 아주 처음이지만 제가 원하는 대로 하는 것 같습니다. :)


Anneke

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

모든 코드( CTRL + A )를 선택하고 인앱 기능인 다시 들여쓰기( Edit -> Line -> Reindent 들여쓰기)를 사용하거나 더 많은 사용자 정의 설정을 원할 경우 Sublime Text 2 용 JsFormat 형식 지정 플러그인을 사용할 수 있습니다. Sublime Text의 기본 탭/들여쓰기 설정에 추가하기 위해 코드를 포맷하는 방법.

https://github.com/jdc0589/JsFormat

Package Control( Preferences -> Package Control )을 사용하여 JsFormat 을 쉽게 설치할 수 있습니다. 패키지 제어를 연 다음 install을 입력하고 ENTER 키를 누릅니다 . 그런 다음 js format 을 입력하고 ENTER 키 를 누르면 완료됩니다. Sublime 왼쪽 하단 막대에 성공 및 오류와 함께 설치 상태를 표시합니다)

키 바인딩에 다음 줄을 추가합니다( Preferences -> Key Bindings User ).

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

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

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


Gokhan Tank

꽤 잘 작동하는 SublimeHtmlTidy라는 플러그인이 있습니다.

https://github.com/welovewordpress/SublimeHtmlTidy


Christian Hagelid

저에게 HTML Prettify 솔루션은 매우 간단했습니다. HTML Prettify 페이지로 이동했습니다 .

  1. Sublime Package Manager 필요했습니다
  2. 여기 에서 패키지 관리자 설치 지침을 따랐습니다.
  3. CMD + SHIFT + P 를 입력하여 메뉴를 불러옵니다.
  4. prettify 된 예쁜
  5. 메뉴에서 HTML prettify 선택을 선택하십시오.

팔. 완료. 멋져 보인다


insaineyesay

간단하게 이동

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


Ricardo Martins

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

그것을 확인하고 당신의 생각을 알려주세요!

https://github.com/rareyman/HTML미화


Ross

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

https://github.com/victorporof/Sublime-HTML예쁜


Allen Bargi

나는 아직 논평할 수 있는 권한이 없으므로 이것은 답변 위의 @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]-->

newtriks

멋진 오픈 소스 CodeFormatter 플러그인 이 있습니다. 이 플러그인은 (다시 들여쓰기와 함께) 모든 것이 한 줄에 있더라도 더티 코드를 아름답게 할 수 있습니다.


side2k

나는 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에서는 직접 다운로드하여 빌드 시스템에서 작업 디렉토리를 지정해야 합니다.

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

또는 PATH에 추가하십시오.


rchl

단축키 F12를 쉽게 설정할 수 있습니다!!!

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

여기에서 세부 사항을 참조하십시오.


Sumeta Pongpanna

HTML-CSS-JS Prettify - 최고를 손에 넣습니다.

  1. 패키지 컨트롤 설치
  2. ⌘ + 왼쪽 shift + p (또는 ctrl + alt + 왼쪽 shift + p) -> 패키지 제어: 패키지 설치
  3. HTML-CSS-JS Prettify 입력
  4. 노드 설치
  5. Sublime Text 다시 시작

즐기다.


Luis

출처 : http:www.stackoverflow.com/questions/8839753/how-do-i-reformat-html-code-using-sublime-text-2

반응형

'etc. > StackOverFlow' 카테고리의 다른 글

두 날짜 범위가 겹치는지 여부 확인  (0) 2023.04.09
파이썬에서 스레딩을 어떻게 사용할 수 있습니까?  (0) 2023.04.09
Java에서 숫자를 소수점 이하 n자리로 반올림하는 방법  (0) 2023.04.09
"이" 키워드는 어떻게 작동합니까?  (0) 2023.04.09
Android에서 중력과 layout_gravity의 차이점은 무엇입니까?  (0) 2022.07.09

'etc./StackOverFlow'의 다른글

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

관련글

댓글

티스토리툴바