[자바스크립트] HTML, CSS, JAVASCRIPT 소스 코드 정렬하기

 

 

실무에서 개발하거나 혹은 공부를 할 때, 간혹 다른 사이트의 CSS 나 JS 소스를 갖고와서 분석해야 할 경우들이 있을텐데요.

그 중에는 소스가 예쁘게 정렬되어 있지 않고, 개행없이 한줄로 작성되어 있는 경우들이 많이 있을 것입니다.

 

예를 들면, jquery 코드에서 min.js 파일은 아래처럼 쭉 작성되어 있을텐데요.

 

물론, 이런 자바스크립트 라이브러리 같은 소스는 공식 사이트에서는 깔끔하게 소스가 정렬된 파일도 같이 제공을 합니다. 다만, 저희가 항상 공식사이트에서만 소스를 갖고오는 것은 아니니까요.

 

아래는 다음 우편번호 API 참조 스크립트인데요. 들어가보면 아래처럼 정렬되어 있지 않습니다.

https://t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js

 

 

그래서 이런 소스들을 볼 때면, 예쁘게 정렬을 하고 싶기는 합니다.

 

여기서는 저런 자바스크립트 소스를 예쁘게 정렬해주는 사이트를 소개드릴까 합니다.

 

물론, 일부 개발툴이나 에디터 툴에서 기본적인 정렬 기능을 제공해주는 경우도 있기는 하는데요. 

여기서는 특정 툴이 아닌 웹사이트에서 제공해주는 기능이라서 어느 환경에서든 사용이 가능할거라 생각합니다.

 

아래 사이트로 이동합니다. Online JavaScript Beautifier 이라는 사이트인데요.

 

https://beautifier.io/

 

 

그럼 위와 같은 화면이 보이실텐데요.

좌측 상단에서 HTML, CSS, JAVASCRIPT 중에서 코드 종류를 선택 할 수 있습니다.

 

 

우측 상단에서는 다양한 정렬 옵션을 선택할 수 있습니다.

 

 

 

그럼 이제 소스 정렬을 해보겠습니다. 

 

가운데 빈 입력 공간에 정렬하고 싶은 소스를 복사해서 붙여넣기 합니다.

 

저는 아까전의 정렬이 되지 않았던 제이쿼리를 복사해서 붙여넣기 하였습니다.

 

 

그리고 상단의 Beautify Code 를 클릭합니다.

 

그러면 아래와 같은 정렬된 결과물 확인이 가능합니다.

 

 

앞으로는 HTML이든 CSS든 JavaScript이든 깔끔하게 정렬해서 보고 싶다면 이 사이트를 이용하시면 될 것 같습니다.

 

- 끝 -