도란도란 :: [Visual Studio Code]의 Emmet

HTML - CSS - 웹표준2023. 3. 15. 13:36

Emmet 스니펫 및 확장 에 대한 지원은 확장이 필요하지 않은 Visual Studio Code에 바로 내장되어 있습니다 . Emmet 2.0은 확장된 Emmet 약어 및 스니펫을 포함하여 대부분의 Emmet 작업을 지원합니다 .

Emmet 약어 및 스니펫을 확장하는 방법

htmlEmmet 약어 및 스니펫 확장은 , haml, pug, slim, jsx, xml, xsl, css, scss, 및 파일뿐만 아니라 및 와 같이 위의 언어에서 상속되는 모든 언어에서 기본적으로 sass활성화 됩니다 .lessstylushandlebarsphp

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

Emmet 확장에 Tab 사용

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

"emmet.triggerExpansionOnTab": true

이 설정을 사용하면 텍스트가 Emmet 약어가 아닌 경우 들여쓰기에 Tab 키를 사용할 수 있습니다.

quickSuggestions가 비활성화된 경우 Emmet

editor.quickSuggestions 설정을 비활성화한 경우 입력할 때 추천 단어가 표시되지 않습니다. 여전히 Ctrl+Space를 눌러 수동으로 제안을 트리거 하고 미리보기를 볼 수 있습니다 .

제안에서 Emmet 비활성화

제안에 Emmet 약어를 전혀 표시하지 않으려면 다음 설정을 사용하십시오.

"emmet.showExpandedAbbreviation": "never"

여전히 Emmet: Expand Abbreviation 명령을 사용하여 약어를 확장할 수 있습니다. 키보드 단축키를 명령 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.syntaxProfilesVS Code 1.15부터는 이 설정을 emmet.includeLanguages대신 사용해야 합니다. 최종 출력만을 사용자 지정하기emmet.syntaxProfiles 위한 것입니다 .

필터 사용

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

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

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

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

BEM 필터(우물)

HTML 작성에 BEM( Block Element Modifier ) 방식을 사용하는 경우 bem필터를 사용하면 매우 편리합니다. bem필터 사용 방법에 대한 자세한 내용은 Emmet의 BEM 필터를 참조하십시오 .

Emmet 기본 설정 에 설명된 대로 bem.elementSeparator및 기본 설정을 사용하여 이 필터를 사용자 지정할 수 있습니다 .bem.modifierSeparator

댓글 필터(c)

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

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

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

Emmet 기본 설정 에 설명된 대로 및 기본 설정을 사용 filter.commentTrigger하여 이 필터를 사용자 지정할 수 있습니다 .filter.commentAfterfilter.commentBefore

기본 설정 의 형식은 filter.commentAfterVS Code Emmet 2.0에서 다릅니다.

예를 들어 다음과 같이 합니다.

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

VS Code에서는 더 간단한 방법을 사용합니다.

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

트림 필터(t)

이 필터는 Emmet: Wrap with Abbreviation 명령 에 대한 약어를 제공할 때만 적용할 수 있습니다 . 래핑된 줄에서 줄 마커를 제거합니다 .

사용자 지정 Emmet 스니펫 사용

사용자 지정 Emmet 스니펫은 .json 파일에 정의해야 합니다 snippets.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}"
    }
  }
}

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

주제올드 에밋에멧 2.0

스 니펫 대 약어	snippets및 라는 두 개의 개별 속성에서 모두 지원abbreviations	2개는 스니펫이라는 단일 속성으로 결합되었습니다. 기본 HTML 스니펫 및 CSS 스니펫 보기
CSS 스니펫 이름	포함 가능:	스니펫 이름을 정의할 때 사용하지 마십시오 :. Emmet이 스니펫 중 하나에 주어진 약어를 퍼지 일치시키려고 할 때 속성 이름과 값을 분리하는 데 사용됩니다.
CSS 스니펫 값	로 끝날 수 있음;	;스니펫 값 끝에 추가하지 마세요 . Emmet은 파일 형식(css/less/scss vs sass/stylus) 또는 , , 에 ;대한 emmet 기본 설정에 따라 후행을 추가합니다 .css.propertyEndsass.propertyEndstylus.propertyEnd
커서 위치	${cursor}또는 `	` 사용할 수 있습니다

HTML Emmet 스니펫

hamlHTML 사용자 지정 스니펫은 또는 와 같은 다른 모든 마크업 버전에 적용할 수 있습니다 pug. 스니펫 값이 약어이고 실제 HTML이 아닌 경우 적절한 변환을 적용하여 언어 유형에 따라 올바른 출력을 얻을 수 있습니다.

예를 들어 목록 항목이 있는 정렬되지 않은 목록의 경우 스니펫 값이 인 경우 , 또는 에서 ul>li동일한 스니펫을 사용할 수 있지만 스니펫 값이 인 경우 파일 에서만 작동합니다 .htmlhamlpugslim<ul><li></li></ul>html

일반 텍스트에 대한 스니펫을 원하는 경우 텍스트를 {}.

CSS Emmet 스니펫

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

CSS 맞춤 스니펫은 또는 같은 다른 모든 스타일시트에 적용할 수 있습니다 scss. 따라서 스니펫 값 끝에 후행을 포함하지 마십시오. Emmet은 언어에 필요한지 여부에 따라 필요에 따라 추가합니다.lesssass;

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

맞춤 스니펫의 탭 정지 및 커서

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

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

에밋 구성

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

emmet.includeLanguages예를 들어:
"emmet.includeLanguages": { "javascript": "javascriptreact", "plaintext": "pug" }
이 설정을 사용하여 선택한 언어와 Emmet 지원 언어 중 하나 사이에 매핑을 추가하여 후자의 구문을 사용하여 전자에서 Emmet을 활성화할 수 있습니다. 매핑의 양쪽에 언어 ID를 사용해야 합니다.
emmet.excludeLanguages
Emmet 확장을 보고 싶지 않은 언어가 있는 경우 언어 ID 문자열 배열을 사용하는 이 설정에 추가하십시오.
emmet.syntaxProfiles예를 들어:
"emmet.syntaxProfiles": { "html": { "attr_quotes": "single" }, "jsx": { "self_closing_tag": true } }
HTML 약어의 출력을 사용자 지정하는 방법을 알아보려면 출력 프로필의 Emmet 사용자 지정을 참조하십시오 .
emmet.variables예를 들어:
"emmet.variables": { "lang": "de", "charset": "UTF-16" }
Emmet 스니펫에서 사용하는 변수를 사용자 지정합니다.

emmet.showExpandedAbbreviation설정값설명

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

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

제안/완료 목록에 표시되는 Emmet 제안을 제어합니다.
emmet.showAbbreviationSuggestions예를 들어 를 입력하면 like , 등 li으로 시작하는 모든 emmet 스니펫에 대한 제안이 표시됩니다. 이것은 Emmet 치트 시트를 암기하지 않는 한 존재하는지도 몰랐던 Emmet 스니펫을 학습하는 데 도움이 됩니다 .lilinklink:csslink:favicon
스타일시트 또는 emmet.showExpandedAbbreviation가 로 설정된 경우에는 적용되지 않습니다 never.
가능한 emmet 약어를 제안으로 표시합니다. 기본적으로 있습니다 true.
emmet.extensionsPath
snippets.json사용자 정의 스니펫이 있는 파일이 있는 디렉토리의 위치를 제공하십시오 .
emmet.triggerExpansionOnTab
Tab 키를 사용하여 Emmet 약어 확장을 활성화하려면 이를 true로 설정하십시오 . 확장할 약어가 없을 때 들여쓰기를 제공하기 위해 이 설정을 사용하여 적절한 폴백을 제공합니다.
emmet.showSuggestionsAsSnippets
로 설정하면 trueEmmet 제안이 다른 스니펫과 함께 그룹화되어 설정에 따라 주문할 수 있습니다 editor.snippetSuggestions. Emmet 제안이 항상 다른 제안 중에서 맨 위에 표시되도록 하려면 이것을 true및 editor.snippetSuggestions로 설정하십시오.top
emmet.preferences
- 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예를 들어 이전 형식 대신당신은 사용할 것입니다Emmet 기본 설정 에 설명된 다른 기본 설정에 대한 지원이 필요한 경우 기능 요청을 기록하십시오 .
- "emmet.preferences": { "filter.commentAfter": "\n" }
- "emmet.preferences": { "filter.commentAfter": "\n" }
- 기본 설정 형식은 filter.commentAfterEmmet 2.0에서 다르고 더 간단합니다.
이 설정을 사용하여 Emmet 기본 설정 에 설명된 대로 Emmet을 사용자 지정할 수 있습니다 . 현재 아래 사용자 지정이 지원됩니다.

다음 단계

Emmet은 VS Code의 훌륭한 웹 개발자 기능 중 하나일 뿐입니다. 다음에 대해 알아보려면 계속 읽으십시오.

HTML - VS Code는 IntelliSense, 닫기 태그 및 서식을 사용하여 HTML을 지원합니다.
CSS - CSS, SCSS 및 Less에 대한 풍부한 지원을 제공합니다.

문제 해결

맞춤 태그가 제안 목록에서 확장되지 않습니다.

MyTag>YourTagor do와 같은 표현식에 사용되는 사용자 지정 태그는 MyTag.someclass제안 목록에 표시됩니다. 그러나 와 같이 단독으로 사용되는 경우 MyTag제안 목록에 나타나지 않습니다. 이것은 모든 단어가 잠재적인 사용자 지정 태그이므로 제안 목록에서 노이즈를 방지하도록 설계되었습니다.

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

"emmet.triggerExpansionOnTab": true

+로 끝나는 내 HTML 스니펫이 작동하지 않음

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

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

약어가 여전히 확장되지 않는 경우:

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

Emmet 기본 설정에 설명된 대로 모든 기본 설정을 어디에서 설정할 수 있습니까?

설정을 사용하여 기본 설정을 지정할 수 있습니다 emmet.preferences. Emmet 기본 설정 에 문서화된 기본 설정의 하위 집합만 사용자 지정할 수 있습니다. Emmet 구성 아래의 기본 설정 섹션을 읽으십시오 .

팁과 요령이 있나요?

물론!

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

저작자표시

'HTML - CSS - 웹표준' 카테고리의 다른 글

Element.ariaCurrent (0)	2023.04.10
[Visual Studio Code]의 html.json 수정하기 (0)	2023.03.15
[CSS] Grid (0)	2023.03.07
[CSS] :nth-child :nth-of-type 가상 클래스(의사 클래스) (0)	2023.03.02
[CSS] 가상 클래스 셀렉터 :nth-child와 :nth-of-type의 차이점 (0)	2023.03.02

일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

도란도란

[Visual Studio Code]의 Emmet