chacha

HOME > etc > tools

Sublime Text - HTML, CSS, JS 코드 자동 정렬

By JS | 29 Nov 2019

Sublimte Text에서 HTML, CSS, JS 등의 코드를 자동으로 정렬해주는 HTML-CSS-JS Prettify라는 플러그인을 소개합니다.

특히, Json, XML 등의 코드도 정렬해주기 때문에, 간혹 웹에서 파싱한 Json파일을 볼 때 좋습니다.

예를 들어, 아래와 같이 Json 파일이 한줄로 되어있어 보기 어려울 때..

{"title":"<IntelliJ에서 자바(jar) 라이브러리 추가하는 방법>","description":"IntelliJ의 자바 프로젝트에서 로컬 jar 라이브러리를 추가하는 방법을 알아보겠습니다. 개발환경은 우분투18.04입니다. Jar 라이브러리는 IntelliJ의 세팅 메뉴에서 추가할 수 있고, Gradle을 사용하는 경우 Gradle 파일에 라이브러리를 추가해줄 수 있습니다.","link":"https://codechacha.com/ko/how-to-add-jar-in-intellij/"}

이 플러그인을 사용하면 이렇게 보기 쉽게 정렬할 수 있습니다.

{
    "title": "<IntelliJ에서 자바(jar) 라이브러리 추가하는 방법>",
    "description": "IntelliJ의 자바 프로젝트에서 로컬 jar 라이브러리를 추가하는 방법을 알아보겠습니다. 개발환경은 우분투18.04입니다. Jar 라이브러리는 IntelliJ의 세팅 메뉴에서 추가할 수 있고, Gradle을 사용하는 경우 Gradle 파일에 라이브러리를 추가해줄 수 있습니다.",
    "link": "https://codechacha.com/ko/how-to-add-jar-in-intellij/",
}

물론 HTML, CSS, JS 등의 코드도 정렬할 수 있습니다.

설치

다음과 같이 Prettify를 설치를 합니다.

  • Sublime Text에서 [Ctrl + Shift + P]를 누르고
  • "Package Control: Install Package"를 선택합니다.
  • "HTML-CSS-JS Prettify"를 찾아서 설치합니다.

사용 방법

자동 정렬하려는 코드를 블럭으로 선택하고 [Ctrl + Shift + H]를 누르면 정렬이 됩니다.

Sublime Text의 [Tools -> HTML/CSS/JS Prettify]에서 "Prettify Code"를 선택해도 됩니다.

참고

sublimetext