Visual Studio Code의 Emmet

Visual Studio Code에는 Emmet 스니펫 및 확장에 대한 지원이 내장되어 있어 확장이 필요하지 않습니다. Emmet 2.0은 Emmet 작업의 대다수를 지원하며, 여기에는 Emmet 약어 및 스니펫 확장도 포함됩니다.

Emmet 약어 및 스니펫 확장 방법

Emmet 약어 및 스니펫 확장은 기본적으로 html, haml, pug, slim, jsx, xml, xsl, css, scss, sass, less 및 stylus 파일과 handlebars 및 php와 같이 위에 나열된 언어에서 상속하는 모든 언어에서 활성화됩니다.

Emmet in suggestion/auto-completion list

Emmet 약어를 입력하기 시작하면 제안 목록에 약어가 표시됩니다. 제안 문서 플라이아웃이 열려 있으면 입력하는 동안 확장의 미리보기를 볼 수 있습니다. 스타일시트 파일에 있는 경우 확장된 약어는 다른 CSS 제안들 사이에 정렬되어 제안 목록에 표시됩니다.

Emmet 확장을 위한 Tab 키 사용

Emmet 약어 확장에 Tab 키를 사용하려면 다음 설정을 추가하십시오.

"emmet.triggerExpansionOnTab": true

이 설정은 텍스트가 Emmet 약어가 아닌 경우 들여쓰기를 위해 Tab 키를 사용할 수 있도록 합니다.

빠른 제안이 비활성화된 상태에서의 Emmet

빠른 제안 editor.quickSuggestions 설정을 비활성화한 경우 입력 시 제안이 표시되지 않습니다. ⌃Space (Windows, Linux Ctrl+Space)를 눌러 수동으로 제안을 트리거하고 미리보기를 볼 수 있습니다.

제안에서 Emmet 비활성화

제안에서 Emmet 약어를 전혀 보고 싶지 않다면 다음 설정을 사용하십시오.

"emmet.showExpandedAbbreviation": "never"

Emmet: 약어 확장 명령을 사용하여 약어를 계속 확장할 수 있습니다. 또한 명령 ID editor.emmet.action.expandAbbreviation에 바로 가기 키를 바인딩할 수도 있습니다.

Emmet 제안 순서

Emmet 제안이 제안 목록에서 항상 최상위에 오도록 하려면 다음 설정을 추가하십시오.

"emmet.showSuggestionsAsSnippets": true,
"editor.snippetSuggestions": "top"

다른 파일 형식의 Emmet

기본적으로 사용할 수 없는 파일 형식에서 Emmet 약어 확장을 활성화하려면 emmet.includeLanguages 설정을 사용하십시오. 매핑의 양쪽에 언어 식별자를 사용하고, 오른쪽은 Emmet 지원 언어의 언어 식별자(위 목록 참조)여야 합니다.

예를 들어,

"emmet.includeLanguages": {
  "javascript": "javascriptreact",
  "razor": "html",
  "plaintext": "pug"
}

Emmet는 이러한 새 언어에 대한 지식이 없으므로 HTML/CSS 컨텍스트가 아닌 곳에서 Emmet 제안이 표시될 수 있습니다. 이를 피하려면 다음 설정을 사용할 수 있습니다.

"emmet.showExpandedAbbreviation": "inMarkupAndStylesheetFilesOnly"

참고: 이전에 emmet.syntaxProfiles를 사용하여 새 파일 형식을 매핑한 경우, VS Code 1.15부터는 대신 emmet.includeLanguages 설정을 사용해야 합니다. emmet.syntaxProfiles는 최종 출력 사용자 지정에만 사용됩니다.

다중 커서와 함께 Emmet 사용

대부분의 Emmet 작업을 다중 커서와 함께 사용할 수도 있습니다.

Emmet with multi cursors

필터 사용

필터는 편집기에 출력되기 전에 확장된 약어를 수정하는 특수 후처리 프로세서입니다. 필터를 사용하는 방법은 두 가지입니다. emmet.syntaxProfiles 설정을 통한 전역 또는 현재 약어 내 직접 사용.

다음은 emmet.syntaxProfiles 설정을 사용하여 HTML 파일의 모든 약어에 bem 필터를 적용하는 첫 번째 접근 방식의 예입니다.

"emmet.syntaxProfiles": {
  "html": {
    "filters": "bem"
  }
}

현재 약어에만 필터를 제공하려면 약어에 필터를 추가하십시오. 예를 들어 div#page|c는 div#page 약어에 comment 필터를 적용합니다.

BEM 필터 (bem)

HTML을 작성할 때 Block Element Modifier(BEM) 방식을 사용한다면 bem 필터가 매우 유용합니다. bem 필터를 사용하는 방법에 대한 자세한 내용은 Emmet의 BEM 필터를 읽어보십시오.

bem.elementSeparator 및 bem.modifierSeparator 설정을 사용하여 이 필터를 사용자 지정할 수 있으며, 이는 Emmet 설정에 문서화되어 있습니다.

주석 필터 (c)

이 필터는 중요한 태그 주위에 주석을 추가합니다. 기본적으로 "중요한 태그"는 id 및/또는 class 속성을 가진 태그입니다.

예를 들어 div>div#page>p.title+p|c는 다음과 같이 확장됩니다.

<div>
    <div id="page">
        <p class="title"></p>
        <!-- /.title -->
        <p></p>
    </div>
    <!-- /#page -->
</div>

filter.commentTrigger, filter.commentAfter 및 filter.commentBefore 설정을 사용하여 이 필터를 사용자 지정할 수 있으며, 이는 Emmet 설정에 문서화되어 있습니다.

filter.commentAfter 설정의 형식은 VS Code Emmet 2.0에서 다릅니다.

예를 들어, 다음과 같이

"emmet.preferences": {
  "filter.commentAfter": "\n<!-- /<%= attr('id', '#') %><%= attr('class', '.') %> -->"
}

VS Code에서는 더 간단한

"emmet.preferences": {
  "filter.commentAfter": "\n<!-- /[#ID][.CLASS] -->"
}

트림 필터 (t)

이 필터는 Emmet: 약어로 감싸기 명령에 대한 약어를 제공할 때만 적용됩니다. 감싸인 줄에서 줄 표시자를 제거합니다.

사용자 지정 Emmet 스니펫 사용

사용자 지정 Emmet 스니펫은 snippets.json이라는 JSON 파일에 정의해야 합니다. emmet.extensionsPath 설정은 이 파일이 포함된 디렉터리의 경로를 지정해야 합니다.

다음은 이 snippets.json 파일의 내용에 대한 예입니다.

{
  "html": {
    "snippets": {
      "ull": "ul>li[id=${1} class=${2}]*2{ Will work with html, pug, haml and slim }",
      "oll": "<ol><li id=${1} class=${2}> Will only work in html </ol>",
      "ran": "{ Wrap plain text in curly braces }"
    }
  },
  "css": {
    "snippets": {
      "cb": "color: black",
      "bsd": "border: 1px solid ${1:red}",
      "ls": "list-style: ${1}"
    }
  }
}

snippets.json 파일을 통한 Emmet 2.0의 사용자 지정 스니펫 작성은 이전 방식과 몇 가지 면에서 다릅니다.

주제	이전 Emmet	Emmet 2.0
스니펫 대 약어	`snippets` 및 `abbreviations`라는 두 개의 별도 속성으로 모두 지원합니다.	두 가지가 snippets라는 단일 속성으로 결합되었습니다. 기본 HTML 스니펫 및 CSS 스니펫을 참조하십시오.
CSS 스니펫 이름	`:`를 포함할 수 있습니다.	스니펫 이름을 정의할 때 `:`를 사용하지 마십시오. Emmet가 주어진 약어를 스니펫 중 하나와 퍼지 일치시키려고 할 때 속성 이름과 값을 구분하는 데 사용됩니다.
CSS 스니펫 값	`;`로 끝날 수 있습니다.	스니펫 값 끝에 `;`를 추가하지 마십시오. Emmet는 파일 형식(css/less/scss 대 sass/stylus) 또는 `css.propertyEnd`, `sass.propertyEnd`, `stylus.propertyEnd`에 대해 설정된 Emmet 설정에 따라 후행 `;`를 추가합니다.
커서 위치	`${cursor}` 또는 `\|`를 사용할 수 있습니다.	탭 정지 및 커서 위치에는 `${1}`과 같은 Textmate 구문만 사용하십시오.

HTML Emmet 스니펫

HTML 사용자 지정 스니펫은 haml 또는 pug와 같은 다른 모든 마크업에도 적용됩니다. 스니펫 값이 실제 HTML이 아닌 약어인 경우, 언어 유형에 따라 올바른 출력을 얻기 위해 적절한 변환이 적용될 수 있습니다.

예를 들어, 목록이 없는 목록과 목록 항목이 있는 경우 스니펫 값이 ul>li라면 html, haml, pug 또는 slim에서 동일한 스니펫을 사용할 수 있습니다. 그러나 스니펫 값이 <ul><li></li></ul>라면 html 파일에서만 작동합니다.

일반 텍스트 스니펫을 원하면 텍스트를 {}로 묶으십시오.

CSS Emmet 스니펫

CSS Emmet 스니펫의 값은 완전한 속성 이름 및 값 쌍이어야 합니다.

CSS 사용자 지정 스니펫은 scss, less 또는 sass와 같은 다른 모든 스타일시트에도 적용됩니다. 따라서 스니펫 값 끝에 후행 ;를 포함하지 마십시오. Emmet는 언어에 필요한지 여부에 따라 필요에 따라 추가합니다.

스니펫 이름에 :를 사용하지 마십시오. :는 Emmet가 약어를 스니펫 중 하나와 퍼지 일치시키려고 할 때 속성 이름과 값을 구분하는 데 사용됩니다.

사용자 지정 스니펫의 탭 정지 및 커서

사용자 지정 Emmet 스니펫의 탭 정지 구문은 Textmate 스니펫 구문을 따릅니다.

탭 정지에는 ${1}, ${2}를 사용하고, 자리 표시자가 있는 탭 정지에는 ${1:placeholder}를 사용하십시오.
이전에는 | 또는 ${cursor}가 사용자 지정 Emmet 스니펫에서 커서 위치를 나타내는 데 사용되었습니다. 이는 더 이상 지원되지 않습니다. 대신 ${1}을 사용하십시오.

Emmet 구성

다음은 VS Code에서 Emmet 환경을 사용자 지정하는 데 사용할 수 있는 Emmet 설정입니다.

emmet.includeLanguages

이 설정을 사용하여 원하는 언어와 Emmet 지원 언어 중 하나 간의 매핑을 추가하여 후자의 구문을 사용하여 전자의 Emmet를 활성화합니다. 매핑의 양쪽에 언어 ID를 사용해야 합니다.

예를 들어,
```
"emmet.includeLanguages": {
  "javascript": "javascriptreact",
  "plaintext": "pug"
}
```
emmet.excludeLanguages

Emmet 확장을 보고 싶지 않은 언어가 있다면, 이 설정에 언어 ID 문자열 배열을 포함하십시오.
emmet.syntaxProfiles

Emmet 사용자 지정 출력 프로필을 참조하여 HTML 약어의 출력을 사용자 지정하는 방법을 알아보십시오.

예를 들어,
```
"emmet.syntaxProfiles": {
  "html": {
    "attr_quotes": "single"
  },
  "jsx": {
    "self_closing_tag": true
  }
}
```
emmet.variables

Emmet 스니펫에서 사용되는 변수를 사용자 지정합니다.

예를 들어,
```
"emmet.variables": {
  "lang": "de",
  "charset": "UTF-16"
}
```

emmet.showExpandedAbbreviation

제안/완성 목록에 표시되는 Emmet 제안을 제어합니다.

설정 값	설명
`never`	모든 언어에 대해 제안 목록에 Emmet 약어를 표시하지 않습니다.
`inMarkupAndStylesheetFilesOnly`	순수 마크업 및 스타일시트 기반 언어('html', 'pug', 'slim', 'haml', 'xml', 'xsl', 'css', 'scss', 'sass', 'less', 'stylus')에 대해서만 Emmet 제안을 표시합니다.
`always`	Emmet 지원 모드뿐만 아니라 emmet.includeLanguages 설정에 매핑이 있는 언어에서도 Emmet 제안을 표시합니다.

참고: always 모드에서는 새 Emmet 구현이 컨텍스트를 인식하지 못합니다. 예를 들어 JavaScript React 파일을 편집하는 경우 마크업을 작성할 때뿐만 아니라 JavaScript를 작성할 때도 Emmet 제안을 받게 됩니다.

emmet.showAbbreviationSuggestions

가능한 Emmet 약어를 제안으로 표시합니다. 기본값은 true입니다.

예를 들어 li를 입력하면 link, link:css, link:favicon 등 li로 시작하는 모든 Emmet 스니펫에 대한 제안을 받게 됩니다. 이는 Emmet 치트시트를 암기하지 않는 한 알지 못했던 Emmet 스니펫을 학습하는 데 도움이 됩니다.

스타일시트 또는 emmet.showExpandedAbbreviation이 never로 설정된 경우에는 적용되지 않습니다.
emmet.extensionsPath

사용자 지정 스니펫을 포함하는 snippets.json 파일을 저장하는 디렉터리의 위치를 지정합니다.
emmet.triggerExpansionOnTab

확장할 약어가 없을 때 들여쓰기를 제공하기 위한 적절한 대체 기능을 제공하기 위해 이 설정을 사용합니다. 이 설정을 true로 설정하여 Tab 키로 Emmet 약어 확장을 활성화합니다.
emmet.showSuggestionsAsSnippets

true로 설정하면 Emmet 제안이 다른 스니펫과 함께 그룹화되어 editor.snippetSuggestions 설정에 따라 순서를 지정할 수 있습니다. 이 설정을 true로, editor.snippetSuggestions를 top으로 설정하여 Emmet 제안이 항상 다른 제안들 중에서 최상위에 표시되도록 합니다.
emmet.preferences

Emmet 설정에 문서화된 대로 Emmet를 사용자 지정하는 데 이 설정을 사용할 수 있습니다. 현재 지원되는 사용자 지정은 다음과 같습니다.
- css.propertyEnd
- css.valueSeparator
- sass.propertyEnd
- sass.valueSeparator
- stylus.propertyEnd
- stylus.valueSeparator
- css.unitAliases
- css.intUnit
- css.floatUnit
- bem.elementSeparator
- bem.modifierSeparator
- filter.commentBefore
- filter.commentTrigger
- filter.commentAfter
- format.noIndentTags
- format.forceIndentationForTags
- profile.allowCompactBoolean
- css.fuzzySearchMinScore
filter.commentAfter 설정의 형식은 Emmet 2.0에서 더 간단하고 다릅니다.

예를 들어, 이전 형식 대신
```
"emmet.preferences": {
  "filter.commentAfter": "\n"
}
```
다음과 같이 사용하게 됩니다.
```
"emmet.preferences": {
  "filter.commentAfter": "\n"
}
```
Emmet 설정에 문서화된 다른 환경 설정에 대한 지원을 원하시면 기능 요청을 등록해 주십시오.

다음 단계

Emmet는 VS Code의 훌륭한 웹 개발 기능 중 하나일 뿐입니다. 계속 읽고 다음 내용을 알아보십시오.

HTML - VS Code는 IntelliSense, 닫는 태그 및 서식을 지원합니다.
CSS - CSS, SCSS 및 Less를 풍부하게 지원합니다.

문제 해결

사용자 지정 태그는 제안 목록에서 확장되지 않습니다.

사용자 지정 태그는 MyTag>YourTag 또는 MyTag.someclass와 같은 표현식에서 사용될 때 제안 목록에 표시됩니다. 그러나 MyTag와 같이 단독으로 사용될 때는 제안 목록에 나타나지 않습니다. 이는 모든 단어가 잠재적인 사용자 지정 태그이므로 제안 목록의 노이즈를 피하기 위해 설계된 것입니다.

모든 경우에 사용자 지정 태그를 확장하는 Tab을 사용하여 Emmet 약어를 확장하려면 다음 설정을 추가하십시오.

"emmet.triggerExpansionOnTab": true

`+`로 끝나는 내 HTML 스니펫이 작동하지 않습니다.

Emmet 치트시트의 select+ 및 ul+와 같이 +로 끝나는 HTML 스니펫은 지원되지 않습니다. 이는 Emmet 2.0의 알려진 문제입니다 이슈: emmetio/html-matcher#1. 해결 방법은 이러한 시나리오에 대한 사용자 지정 Emmet 스니펫을 만드는 것입니다.

약어 확장이 실패합니다.

먼저 사용자 지정 스니펫을 사용하고 있는지 확인하십시오 (snippets.json 파일이 emmet.extensionsPath 설정에 의해 선택되고 있습니까?). 사용자 지정 스니펫의 형식은 VS Code 1.53 릴리스에서 변경되었습니다. 커서 위치를 나타내기 위해 |를 사용하는 대신 ${1}, ${2} 등과 같은 토큰을 사용하십시오. emmetio/emmet 저장소의 기본 CSS 스니펫 파일은 새 커서 위치 형식의 예제를 보여줍니다.

약어 확장이 여전히 실패하는 경우

내장 확장에서 Emmet가 비활성화되었는지 확인하십시오.
명령 팔레트에서 개발자: 확장 호스트 다시 시작 (workbench.action.restartExtensionHost) 명령을 실행하여 확장 호스트를 다시 시작하십시오.

Emmet 설정에 문서화된 모든 환경 설정을 어디에 설정할 수 있습니까?

emmet.preferences 설정을 사용하여 환경 설정을 설정할 수 있습니다. Emmet 설정에 문서화된 환경 설정 중 일부만 사용자 지정할 수 있습니다. Emmet 구성의 환경 설정 섹션을 읽어보십시오.

팁과 요령이 있나요?

물론이죠!

CSS 약어에서 :를 사용할 때 왼쪽 부분은 CSS 속성 이름과 퍼지 일치하는 데 사용되고 오른쪽 부분은 CSS 속성 값과 일치하는 데 사용됩니다. pos:f, trf:rx, fw:b 등과 같은 약어를 사용하여 이를 최대한 활용하십시오.
Emmet 작업에 문서화된 다른 모든 Emmet 기능을 탐색하십시오.
자신만의 사용자 지정 Emmet 스니펫을 만드는 것을 주저하지 마십시오.

12/10/2025