vscode 확장 Auto Close Tag

Auto Close Tag 확장에 대해 간단하게 알아보겠습니다.

Visual Studio Marketplace에서 확인할 수 있습니다.

이 글은 v0.5.14 버전을 기준으로 작성되었습니다.

세 줄 요약

• XML 스타일의 여는 태그를 작성하면 닫는 태그를 자동으로 만들어줍니다.
• HTML이나 XML, JSX같은 코드를 작성할 일이 있다면 추천합니다.
• 개인적으로 "auto-close-tag.SublimeText3Mode": true 설정 추천

기능

• 여는 태그를 입력하면 닫는 태그를 자동으로 추가해줍니다.
• 그렇게 자동으로 닫는 태그가 생기면, 커서는 태그 사이에 놓입니다.
• Sublime Text 3 스타일로 닫을 수 있다는데, 이건 좀 있다 알아봐요~
• 입력할 때만 아니라 원할 때 호출할 수 있도록 커맨드와 단축키가 제공됩니다.
• 몇 가지 더 있긴 한데 저는 안 쓸 것 같아서 넘어갈게요~

일단 주요 기능부터 살펴보겠습니다. 그냥 코드를 작성할 때 HTML 태그를 자동으로 닫아줍니다.

<!-- 코드 -->
<TagName>
         ^
        커서

여기까지 입력했을 때 닫는 태그까지 만들어줍니다.

<!-- 코드 -->
<TagName></TagName>
         ^
        커서

이런 기능이에요. 엄청 간단하죠?

커맨드, 단축키

키보드 입력으로 자동으로 닫는 방법 말고도, 커맨드를 실행하는 방법도 있기는 한데,

F1 커맨드 팔레트에서 Close Tag를 선택하거나 그 단축키를 누르면 되기는 하는데,

이걸 쓸 일이 있을지는 잘 모르겠아요. 일단 저는 안 써요. 왜 안 쓰는지는 설정에서'

TMI

사실 vscode에서 기본적으로 지원되는 기능이 있기는 해요.

그런데 그 기본 기능은 HTML을 포함해 몇몇 언어에서만 쓸 수 있고, 아무래도 기본 기능보다는 이 확장이 기능이 더 많죠!

문제점

그런데 몇 가지 문제가 있어요…

태그가 아닌데 닫혀요

Typescript같은 경우에는 HTML태그랑 비슷하게 생긴 코드를 자주 작성하게 될 거에요.

// 코드
async function myFunction(): Promise<void> {
    // do something
}

간단한 예시 코드에요. 이런 코드를 작성하는 도중에 <void>라는, 태그는 아니지만 태그처럼 생긴 코드를 작성하게 되면…

// 코드
async function myFunction(): Promise<void></void>
//                                        ^
//                                       커서

의도치 않게 </void>라는 황당한 코드가 자동으로 생성됩니다. 태그가 아닌데 닫혀버렸어요…

이 문제를 수정할 수 있는 몇 가지 방법이 있어요. 설정에서 확인 해 보세요 :)

커서를 빠르게 움직이기 어려워요

자동으로 닫는 태그가 만들어질 때 커서가 태그 사이에 놓인다고 했었죠

<!-- 코드 -->
<TagName>
         ^
        커서

여기까지 입력해서 닫는 태그가 만들어질 때 커서의 위치가 닫는 태그 다음이 아니라 그 전에 놓인다는 뜻이에요.

<!-- 코드 -->
<TagName></TagName>
         ^         ^
        사이        끝

태그가 자동으로 닫히고 나서 그 이후의 작업을 하고 싶다면 키보드나 마우스를 통해 커서를 </TagName> 다음으로 옮겨야겠죠?

이게 느려요. 키보드 방향키만 사용한다면 무려 오른쪽 버튼을 10번이나 눌러야 되고요. 물론 다른 단축키를 잘 쓰겠지만…

그냥 취향 차이이긴 한데, 다른 좋은 방법이 또 있어요. 설정에서 알아볼게요 :)

설정

쓸 것 같은 주요한 몇 가지만 알아볼게요~

언어 설정

일단 태그 자동 닫기가 실행될 언어를 지정할 수 있어요.

auto-close-tag.activationOnLanguage 설정인데요, ["html","xml","php"]로 설정하면 html, xml, php에서만 자동 닫기가 활성화돼요. ["*"]로 하면 전부 다 되고요.

반대로 auto-close-tag.disableOnLanguage 설정으로는 특정 언어에서만 비활성화 할 수도 있어요.

이렇게 태그를 안 쓸 언어를 빼 버린다면 태그가 아닌데 닫는 태그가 생기는 문제를 피할 수 있어요.

Sublime Text 3 Mode

auto-close-tag.SublimeText3Mode이라는 설정이에요.

원래는 여는 태그를 입력하면 자동으로 닫는 태그가 생겼는데요, 이걸 true로 설정하면 닫는 태그의 앞부분 </를 입력해야 드디어 닫는 태그가 나타나요!

취향 차이지만 저는 이 방법이 더 좋아요. 태그가 아닌데 닫히는 문제와 커서를 움직이기 귀찮은 문제를 모두 해결할 수도 있죠 :D

그 이유 말고도 커맨드, 단축키 기능보다도 이게 더 편한 점도 있어서 저는 true로 설정해서 쓰고 있어요.

Self closing tags

설정 이름은 auto-close-tag.excludedTags인데, 이게 그 뜻이에요. HTML의 기본 self closing tags는 기본값에 포함 돼 있어요. 커스텀 self closing 태그가 있다면 여기에 추가 해 주세요!

하지만 XML에서도 의미 없고, 이걸 어딘가에서 쓰기는 할지는 잘 모르겠네요…

그 외에도 여러가지 설정이 있는데, 그만 알아보도록 하죠