VSCode, Figma, Obsidian 등 다양한 프로그램에는 수많은 플러그인이 존재합니다.
이러한 플러그인들은 기능을 확장하고, 작업 효율을 높여주며, 사용자의 필요에 맞게 커스터마이징할 수 있는 도구를 제공합니다.
저도 여러 가지 플러그인을 설치하다 보면, 각각의 작은 기능들이 작업을 편리하게 만들어 주는 것을 느낍니다.
그러나 시간이 지나면서 더 이상 사용하지 않는 플러그인들이 쌓여가고, 주기적으로 정리하고 삭제하는 과정을 반복하게 됩니다.
그래서 저는 가능하면 꼭 필요한 플러그인만 사용하고, 불필요한 플러그인은 최소화하려는 편입니다.
특히 VSCode에는 Auto Rename Tag와 Auto Close Tag 같은 매우 유명한 플러그인들이 있습니다.
이 두 플러그인은 ‘VSCode 필수 플러그인!’ 혹은 ‘반드시 설치해야 할 플러그인 10종’과 같은 글에서 빠지지 않고 등장하곤 합니다.

Auto Rename Tag는 HTML이나 JSX 같은 파일에서, 열림 태그를 수정하면 자동으로 닫힘 태그도 함께 수정해주는 기능을 합니다.
이를 통해 일일이 닫힘 태그를 수정할 필요 없이 편리하게 태그 구조를 관리할 수 있습니다.

Auto Close Tag는 열림 태그를 작성하면 자동으로 대응되는 닫힘 태그를 생성해주는 기능입니다.
이는 HTML, JavaScript, TypeScript와 같은 언어에서 유용하게 사용됩니다.
그러나 사실 이 두 기능은 이미 VSCode에 기본적으로 내장되어 있어, 별도로 플러그인을 설치하지 않아도 됩니다
VSCode의 설정 파일인 settings.json에 간단한 코드를 추가하면 동일한 기능을 활용할 수 있습니다.
설정 방법
- VSCode의 설정으로 들어간 후,
settings.json
을 검색합니다. settings.json
파일에 아래 코드를 추가합니다.
{
...,
"editor.linkedEditing": true,
"html.autoClosingTags": true,
"javascript.autoClosingTags": true,
"typescript.autoClosingTags": true,
...,
}
이렇게 설정하면 별도의 플러그인을 설치하지 않아도 VSCode에서 Auto Rename Tag와 Auto Close Tag의 기능을 사용할 수 있습니다.
이를 통해 VSCode를 더 가볍게 유지하면서도 효율적인 작업 환경을 만들 수 있습니다.
불필요한 플러그인을 줄이고, 프로그램에 내장된 기본 기능을 최대한 활용하는 것이 효율적인 개발 환경을 만드는 데 큰 도움이 됩니다.
필요할 때만 플러그인을 추가하고, 사용하지 않는 플러그인은 정리하는 습관을 들이면 보다 깔끔한 워크플로우를 유지할 수 있습니다.
관련 문서
- August 2017 (version 1.16) – HTML tag auto close
- March 2020 (version 1.44) – Synced Regions