SAPUI5 XML formatter 익스텐션 추천(VS Code, XML Tools)

SAPUI5 XML formatter 익스텐션 추천(VS Code, XML Tools)

VSCode에서 SAPUI5 개발시 화면을 만들기 위해서는 일반적으로 XML 포맷 형태의 파일을 작성합니다. 화면이 복잡해 질수록 XML 코드의 정리가 쉽지 않는데요, 이럴 때 VSCode로 개발시 유용한 SAPUI5 XML formatter 익스텐션인 xml tools 기능을 정리해 보았습니다.

XML 관련해서 다양한 익스텐션을 설치해 보았지만, 설치 후 별다른 설정 없이 바로 만족스러운 XML 포맷팅을 처리해 주는 개인적으로 가장 마음에 드는 익스텐션이었습니다.

VSCode SAPUI5 XML 포맷터 XML TOOLS 설치

VS Code 확장 프로그램 검색을 통해 xml tools를 찾아 설치합니다. 혹은 xml tools 마켓 주소를 통해 설치할 수 있습니다.

sapui5 xml tools

설치가 완료된 후 XML View 파일로 이동하여 포맷터 단축키인 Ctrl + K, Ctrl + F 를 실행해 줍니다.

그러면 기본 포맷터 구성과 관련된 메시지가 보이게 되고, [구성] 버튼을 눌러 줍니다.

XML 파일 기본 포맷터 설정

그러면 파레트 설정이 나오게 되며 여기서 xml tools를 선택해주면 됩니다.

파레트 설정에서 xml tools를 기본 포맷터로 설정

VS Code 익스텐션 XML TOOLS 간단 사용법

이제 정리하고자 하는 xml View 파일로 이동하여, 다음과 같이 포맷터 단축키 Ctrl + K, Ctrl + F  혹은 마우스 오른쪽 버튼 에서 [선택 영역 서식]을 선택해 주면 보기좋게 xml 파일의 코드가 정리가 됩니다.

xml tools로 xml 파일 자동 포맷팅

그 외에도 xml tools 익스텐션은 다양한 기능을 제공합니다.

그 밖에 XML TOOLS 의 다양한 기능들

VSCode의 Command Palette 에서 XML Tools를 입력하면 제공하는 기능을 확인해 볼 수 잇습니다.

Minify XML은 배포시 유용한 기능인데요, 엔터값 등을 제거하고 최소한의 공백으로 모든 코드를 한줄로 만들어 주는 기능으로, XML 파일의 용량을 줄여주게 되고, 이는 웹어플리케이션의 성능에 도움을 주는 기능입니다.

<mvc:View controllerName="frontmlocr.controller.View5" xmlns:mvc="sap.ui....

Convert text to XML, Convert XML to text 기능을 통해 XML 상의 특수 문자를 자동 변환해 주는 기능도 제공하고 있습니다.

xml to text 기능을 사용하면 특수 문자를 아래와 같이 자동 변환해 줍니다.

&amp;lt;mvc:View controllerName=&quot;frontmlocr.controller.View5&quot;
xmlns:mvc=&quot;sap.ui.core.mvc&quot;
xmlns=&quot;sap.m&quot;
xmlns:grid=&quot;sap.ui.layout.cssgrid&quot;
displayBlock=&quot;true&quot;
...

이상으로 SAPUI5 View 개발시 유용한 익스텐션 xml tools를 알아보았습니다. XML 포맷팅 기능으로 개발에 도움 얻고자 할 때 설치하면 도움이 되실 것으로 생각됩니다.

함께 보면 좋은 글

SAP BTP Trial Free 계정 신청하는 방법
SAPUI5 SDK 설치 – VS Code 설정 핵심 요약(2023)
SAPUI5 VSCode 익스텐션 (필수) 4가지 추천