VSCode 개발환경 - html 태그 자동 닫기 및 이름 변경(Auto Close Tag, Auto Rename Tag)

VSCode에서 html, JSX 등 태그 코드를 작성할 때 매번 Close 태그를 직접 작성해주거나, 매칭 되는 태그명을 변경할 때 Open,Close태그명을 각각 수정해주면 많이 번거롭다. VSCode Extension으로 Auto Close Tag, Auto Rename Tag를 설치해주면 프론트 개발하기가 훨씬 수월해진다. 2개 모두 VSCode Marketplace를 통해 쉽게 설치 가능하다.

 

1. Auto Close Tag

자동으로 Close 태그를 생성해준다. 

VSCode에서 좌측 메뉴의 Marketplace를 선택하고, "Auto Close Tag"로 검색하면 아래와 같이 검색 결과가 나오고 설치 버튼만 클릭하면 된다. 필자는 이미 설치가 되어 있어서 설치버튼 대신 설정이 보이는것 뿐이다.

설치를 하게 되면 예를 들어 <div>라고 입력을 하면 </div>태그는 자동으로 생성을 해준다. 

 

 

2. Auto Rename Tag

자동으로 대응/매칭되는 태그명을 변경해준다. 설치 방법은 위의 Auto Close Tag와 동일하다.

VSCode에서 좌측 메뉴의 Marketplace를 선택하고, "Auto Rename Tag"로 검색하면 아래와 같이 검색 결과가 나오고 설치 버튼을 클릭한다.

Auto Rename Tag는 예를 들어, <div>...</div>라는 코드가 있을 때 앞의 태그 <div>를 <p>로 변경할 경우 대응되는 뒤의 Close태그가 자동으로 </p>로 변경이 된다. 

 

 

연관 글:

VSCode Reactjs code snippets(코드 자동 생성)

VSCode Auto Import - import문 자동 생성