Visual Studio Code의 Emmet 2.0

2017년 8월 7일 Ramya Rao, @ramyanexus

Visual Studio Code (버전 1.15)의 2017년 7월 릴리스에서는 지난 2개의 릴리스 동안 미리 보기로 제공되었던 향상된 Emmet 환경을 제공합니다.

주요 기능은 다음과 같습니다.

Emmet in suggestion/auto-completion list

이번 업데이트의 일환으로, @emmetio의 새로운 npm 모듈을 사용하여 모든 Emmet 작업을 재작성했습니다.

중요한 변경 사항은 Tab 키가 더 이상 Emmet 약어를 확장하는 기본 방법이 아니라는 것입니다. 대신, Emmet 약어는 이제 제안 목록에 나타납니다. 다른 스마트 완성 항목과 마찬가지로 선택할 수 있으며, 선택 시 약어가 확장됩니다.

참고: Tab 키를 사용하여 Emmet 약어와 스니펫을 계속 확장하려면 emmet.triggerExpansionOnTab을 true로 설정하십시오.

Visual Studio Code의 Emmet 2.0 변경 사항에 대해 자세히 알아보려면 계속 읽어보십시오.

Emmet의 새로운 모듈식 접근 방식

이전에는 Emmet 라이브러리가 모든 Emmet 작업에 사용되는 단일 모놀리식 코드베이스였습니다. Emmet의 제작자인 Sergey Chikuyonok는 더 작고 재사용 가능한 모듈을 갖춘 Emmet 2.0의 새로운 세상을 구상했습니다.

이제 Emmet 약어를 확장하는 데 필요한 파이프라인의 다양한 부분에 대한 @emmetio의 별도 npm 모듈이 있습니다. 여기에는 다음과 같은 단계가 포함됩니다.

또한 HTML 및 CSS 문서를 구문 분석하는 별도의 모듈이 있어 나머지 Emmet 기능을 구현하는 데 도움이 됩니다. 이러한 모듈은 npm에서 emmetio 아래에서 찾을 수 있습니다.

이 모듈식 접근 방식은 편집기 플러그인이 편집기별 API를 사용하여 편집기 기능과 Emmet 통합을 개선할 수 있도록 하기 위해 채택되었습니다. 예를 들어, 이 접근 방식을 통해 다음을 수행할 수 있었습니다.

Emmet 확장을 위한 키보드 바로 가기로 Tab 키를 사용하는 데에는 두 가지 문제가 있었습니다.

Sergey Chikuyonok는 Emmet를 제안 목록에 포함시키는 것이 더 나은 경험이 될 것이라고 생각했습니다. 이는 위의 두 가지 문제를 해결하는 데 도움이 되었으며 추가적인 이점이었습니다.

이제 제안 목록을 통해 Emmet 약어에 쉽게 액세스할 수 있으므로 Tab 키와 **Emmet: ExpandAbbreviation** 명령 간의 기본 연결을 제거할 수 있었습니다. Tab 키는 이제 의도된 대로 들여쓰기 작업을 수행할 수 있습니다.

editor.quickSuggestions 설정이 꺼져 있는 경우, 제안/자동 완성 목록을 수동으로 트리거하려면 ⌃Space (Windows, Linux Ctrl+Space)를 눌러야 합니다.

제안/자동 완성 목록에 Emmet가 표시되지 않도록 하려면 emmet.showExpandedAbbreviation을 never로 설정하십시오.

editor.emmet.action.expandAbbreviation 명령에 (Tab 키를 제외한) 모든 키보드 바로 가기를 여전히 바인딩하거나 명령 팔레트에서 Emmet: Expand Abbreviation을 사용할 수 있습니다.

약어 확장을 위해 Tab 키를 선호하는 경우, 설정을 수정하여 emmet.triggerExpansionOnTab 설정을 추가하고 true로 설정하십시오. 이 설정을 사용하여 확장할 약어가 없을 때 들여쓰기를 제공하는 적절한 대체 기능을 제공합니다.

새로운 Emmet 페이지에 문서화된 몇 가지 추가 변경 사항이 있습니다.

emmet.syntaxProfiles 설정 대신 emmet.includeLanguages를 사용하여 다른 파일 형식에서 Emmet를 활성화하십시오.
Emmet에서 사용자 지정 스니펫 작성 방법 변경 사항
사용 가능한 Emmet 설정 변경 사항
선택된 개별 줄을 별도의 태그로 래핑하려면 Emmet: Wrap with Abbreviation 대신 Emmet: Wrap Individual Lines with Abbreviation 명령을 사용하십시오.
2017년 8월에 작업 중인 Emmet 2.0의 알려진 문제

Emmet를 모듈화하고 이러한 개선 사항을 VS Code로 가져오는 데 도움을 준 Sergey Chikuyonok에게 감사드립니다.

또한 미리 보기 상태에서 새로운 Emmet를 사용하고 GitHub 이슈를 통해 훌륭한 피드백을 제공한 모든 분들께도 감사합니다. GitHub 이슈의 토론은 현재 사용자 경험을 얻는 데 매우 도움이 되었습니다.

버그 수정 및 기능 추가를 테스트하기 위해 VS Code Insiders 빌드를 사용한 Steve Lombardi, Jens Hausdorf, Vladimir Sizikov, Niichie, Thomas Klepzig 및 기타 많은 분들께 특별히 감사드립니다.

이전 Emmet의 기능 중 빠진 것이 있나요? 새로운 Emmet를 사용하는 데 어려움이 있으신가요? 언제든지 GitHub 이슈를 만들어 주시면 최선을 다해 도와드리겠습니다.

또한 현재 확장 프로그램이므로 VS Code에서 Emmet에 기여하는 것이 그 어느 때보다 쉬워졌습니다. VS Code GitHub 리포지토리의 emmet 폴더에는 시작하는 데 필요한 모든 소스 코드가 포함되어 있습니다.

행복한 코딩 되세요!

Ramya Rao, VS Code 팀원 @ramyanexus