VSCode로 JSON 예쁘게 보는 방법

JSON 문자열입니다. 그래서 네트워크를 통해 데이터를 전송할 때 유용합니다.

개발할 때 JSON을 이용하는 경우가 많이 있습니다.

그래서 개발할 때에 데이터를 많이 봐야 하는데 JSON이 보기 어렵게 아래처럼 한 줄로 쭉 적혀있으면 알아보기가 어렵습니다.

{"widget": {    "debug": "on",    "window": {        "title": "Sample Konfabulator Widget",        "name": "main_window",        "width": 500,        "height": 500    },    "image": {         "src": "Images/Sun.png",        "name": "sun1",        "hOffset": 250,        "vOffset": 250,        "alignment": "center"    },    "text": {        "data": "Click Here",        "size": 36,        "style": "bold",        "name": "text1",        "hOffset": 250,        "vOffset": 100,        "alignment": "center",        "onMouseUp": "sun1.opacity = (sun1.opacity / 100) * 90;"    }}}

 

이러한 경우 여러 가지 방법으로 JSON을 예쁘게 정렬해서 볼 수 있지만 그중 VSCode를 이용해서 JSON을 예쁘게 볼 수 있는 방법을 소개합니다.

1. VSCode를 실행합니다.

2. Ctrl + N을 눌러서 새 파일을 만듭니다.

3. JSON을 복사 붙여 넣기 합니다.

4. VSCode 하단의 언어 모드를 눌러서 JSON으로 설정해 줍니다.

5. shift + Alt + F 또는 마우스 오른쪽 클릭 후 Format Document를 선택합니다.

6. JSON이 보기 쉽게 포맷이 바뀌었습니다!

 

VSCode를 이용해서 JSON을 예쁘게 정렬해서 볼 때 장점은 아래 2가지 정도로 생각이 났습니다.

1. 웹사이트에서 JSON을 예쁜 포맷으로 치환받을 경우 회사에 따라서 정보보안 문제가 될 수 있다. 하지만 VSCode로 볼 때 외부에 따로 Request를 하지 않기 때문에 안전하다.

2. 각자 Tools를 준비하는 건 번거롭다. 하지만 VSCode는 간단하다.