Sublime Text용 공식 Emmet 플러그인.
경고: 이 플러그인은 JavaScript로 작성되었으며 PyV8 및 Google V8 바이너리를 사용하여 실행되므로 일부 OS에서는 전혀 작동하지 않을 수 있습니다. 문제가 발생하거나 편집기가 충돌하는 경우 문제를 작성해 주세요.
패키지 제어:
Emmet
플러그인을 찾아 설치합니다.수동으로:
경고 : 플러그인이 설치되면 필요한 PyV8 바이너리가 자동으로 다운로드되므로 조금 기다려야 합니다(상태 표시줄에 PyV8 바이너리 메시지 로드 참조). 자동 PyV8 로더에 문제가 발생하면 수동으로 설치해 보세요.
숫자 증가/감소 작업:
새로운 작업과 필터를 사용하여 Emmet을 쉽게 확장하거나 기존 작업을 사용자 지정할 수 있습니다. Emmet.sublime-settings
에서 extensions_path
설정을 정의하면 Emmet은 시작 시 지정된 폴더에 있는 모든 .js
및 .json
파일을 로드합니다.
extensions_path
의 기본값은 ~/emmet
이며, 이는 OS 사용자 홈 폴더 내의 emmet 폴더를 가리킵니다.
또한 사용자의 Emmet.sublime-settings
파일 내에 확장 파일(예: snippets
, preferences
및 syntaxProfiles
)이라는 이름의 섹션을 만들고 거기에 사용자 정의를 작성할 수 있습니다. 예제는 원본 설정 파일을 참조하세요.
Sublime Text는 다양한 기능과 작업을 갖춘 훌륭한 텍스트 편집기입니다. 이러한 작업의 대부분은 키보드 단축키에 바인딩되어 있으므로 타사 플러그인에 편리한 플러그인 단축키를 제공하는 것은 거의 불가능합니다.
기본 키맵이 마음에 들지 않으면 Emmet.sublime-settings
파일의 비활성화된 disabled_keymap_actions
기본 설정을 사용하여 개별 키보드 단축키를 비활성화할 수 있습니다.
기본 키보드 단축키를 비활성화해야 하는 작업 이름을 쉼표로 구분한 목록을 사용하세요. 예를 들어 Ctrl+E ("약어 확장") 및 Ctrl+U ("이미지 크기 업데이트") 단축키를 해제하려면 다음 값을 설정해야 합니다.
"disabled_keymap_actions": "expand_abbreviation, update_image_size"
작업 ID를 얻으려면 Default (Your-OS-Name).sublime-keymap
파일을 참조해야 합니다( args/action
key 찾기).
모든 기본 단축키를 비활성화하려면 값을 all
로 설정하세요.
"disabled_keymap_actions": "all"
이와 같은 작업을 비활성화하고 자신만의 키보드 단축키를 만드는 경우 emmet_action_enabled.ACTION_NAME
컨텍스트를 사용 하면 안 됩니다 . 이것이 작업을 비활성화하는 키이기 때문입니다.
Emmet은 HTML, CSS, LESS, SCSS, Stylus 및 PostCSS와 같은 제한된 구문으로만 약어를 확장합니다. Tab 핸들러를 제한된 구문 목록으로 제한하는 이유는 기본 Sublime Text 조각을 깨뜨리기 때문입니다.
다른 구문(예: JSX, HAML 등)에서 Tab으로 약어를 사용하려면 키보드 단축키 설정을 조정해야 합니다. 필수 구문 범위 선택기 에 대한 tab
키에 대한 expand_abbreviation_by_tab
명령을 추가하세요. 현재 구문 범위 선택기를 가져오려면 ⇧⌃P (OSX) 또는 Ctrl+Alt+Shift+P 를 누르세요. 편집기 상태 표시줄에 표시됩니다.
Preferences
> Key Bindings — User
로 이동하여 SCOPE_SELECTOR
토큰 대신 적절하게 구성된 범위 선택기를 사용하여 다음 JSON 조각을 삽입합니다.
{
"keys" : [ "tab" ] ,
"command" : "expand_abbreviation_by_tab" ,
// put comma-separated syntax selectors for which
// you want to expandEmmet abbreviations into "operand" key
// instead of SCOPE_SELECTOR.
// Examples: source.js, text.html - source
"context" : [
{
"operand" : "SCOPE_SELECTOR" ,
"operator" : "equal" ,
"match_all" : true ,
"key" : "selector"
} ,
// run only if there's no selected text
{
"match_all" : true ,
"key" : "selection_empty"
} ,
// don't work if there are active tabstops
{
"operator" : "equal" ,
"operand" : false ,
"match_all" : true ,
"key" : "has_next_field"
} ,
// don't work if completion popup is visible and you
// want to insert completion with Tab. If you want to
// expand Emmet with Tab even if popup is visible --
// remove this section
{
"operand" : false ,
"operator" : "equal" ,
"match_all" : true ,
"key" : "auto_complete_visible"
} ,
{
"match_all" : true ,
"key" : "is_abbreviation"
}
]
}
Emmet 플러그인을 사용하면 일반 스니펫처럼 Tab 키를 사용하여 약어를 확장할 수 있습니다. 반면, 동적 특성과 광범위한 구문으로 인해 때로는 예상치 못한 결과가 발생할 수 있습니다. 이 섹션에서는 탭 핸들러의 작동 방식과 이를 미세 조정하는 방법에 대해 설명합니다.
기본적으로 탭 핸들러는 HTML, XML, HAML, CSS, SASS/SCSS, LESS, PostCSS 및 프로그래밍 언어(예: JavaScript, Python, Ruby 등)의 문자열과 같은 제한된 구문 범위 에서 작동합니다. 그것은 다음을 의미합니다:
line
이라는 특수 출력 프로필을 사용하여 출력이 생성됩니다. Tab 키 핸들러를 미세 조정하려면 사용자의 Emmet.sublime-settings
파일에서 다음 설정을 사용할 수 있습니다.
disable_tab_abbreviations_for_scopes
— Tab 키 처리기를 비활성화해야 하는 구문 범위의 쉼표로 구분된 목록입니다. 예를 들어 프로그래밍 언어 문자열과 HAML 구문 내에서 핸들러를 비활성화하려는 경우 설정은 다음과 같습니다. "disable_tab_abbreviations_for_scopes" : " text.haml, string "
disabled_single_snippet_for_scopes
— 단일 약어를 확장할 때 탭 처리기를 비활성화해야 하는 쉼표로 구분된 구문 범위 목록입니다. 현재 ST는 네이티브 스니펫 목록을 가져오기 위한 API를 제공하지 않습니다. 예를 들어, php
약어를 확장하려고 하면 네이티브 ST 스니펫에 정의된 PHP 블록 대신
출력하는 Emmet으로 전달됩니다. 해결 방법으로, disabled_single_snippet_for_scopes
설정에 정의된 범위 내에서 단일 약어를 확장하려고 하면 Emmet은 먼저 자체 스니펫 카탈로그 내에서 해당 이름을 찾고, 두 번째로 known_html_tags
설정 내에서 해당 이름을 찾고, 찾지 못한 경우 ST가 이를 처리하도록 허용하고 일치하는 경우 기본 약어를 확장합니다.known_html_tags
— 위에서 설명한 대로 조회에 사용되는 모든 알려진 HTML 태그의 공백으로 구분된 목록입니다. Emmet 탭 핸들러 동작이 마음에 들지 않으면 비활성화할 수 있습니다. 사용자의 Preferences.sublime-settings
파일에 "disable_tab_abbreviations": true
추가하면 됩니다.
워크플로에 CSS 공급업체 접두사 지정을 위한 자동화된 작업(예: Autoprefixer)이 이미 포함되어 있는 경우 사용자의 Emmet.sublime-settings
파일에 이 옵션을 추가하여 Emmet의 자동 공급업체 접두사 삽입을 비활성화할 수 있습니다.
{
"preferences" : {
"css.autoInsertVendorPrefixes" : false
}
}