Sublime Text 3에서 JSX 파일에 대해 Emmet을 어떻게 활성화합니까?

Sublime Text 3에서 JSX 파일에 대해 Emmet을 어떻게 활성화합니까?

---

구문 강조를 처리하는 방법에 문제가 발생할 때까지 이전에 Allan Hortle의 JSX 패키지를 사용 했습니다. 그런 다음 공식 패키지 sublime-react 가 있음을 알았습니다 .

Allan Hortle의 패키지에서 그는 Preferences > Key Bindings – User다음과 같은 Emmet 기능을 활성화 하기 위한 스 니펫을에 포함 시켰습니다 .

{
    "keys": ["tab"],
    "command": "expand_abbreviation_by_tab", 
    "context": [
        {
            "operand": "source.js.jsx", 
            "operator": "equal", 
            "match_all": true, 
            "key": "selector"
        }
    ]
}

이 스 니펫은 공식 sublime-react 패키지에서 작동하지 않는 것 같습니다. 키 바인딩으로 수정할 수있는 것처럼 보이지만 Sublime 문서의 초기 열람은 주제에 대한 빛을 얻지 못했습니다. 도움?

---

shift+super+p파일 을 입력 하면 왼쪽 하단에서 현재 선택 항목의 컨텍스트를 볼 수 있습니다.

첫 번째 단어는 항상 기본 파일 유형입니다. ( source.js, text.html) JSX 의 경우 나는 이것을 source.js.jsx. 이것은 컴파일되기 전에 JSX가 실제로 자바 스크립트가 아니지만 다소 비슷해 보이기 때문입니다. JSX에서 발생하고 싶은 많은 완성과 숭고한 설탕이 있지만 JS는 아닙니다. 반면에 sublime-react 는 plain old를 사용합니다 source.js.

이 그래서 당신이 바로 당신이 방금 교체해야한다 니펫을 source.js.jsx함께source.js

---

2015 년 4 월 Emmet은 jsx 지원을 추가 했지만 기본적으로 작동하지 않습니다. 놀랍게도 실제로 control + E단축키로 작업 했지만 TAB키를 사용하여 확장하고 싶었습니다 . 공식 지침에 따라 나를 위해 트릭을했습니다.

기본적으로 사용자 키 바인딩 파일 ( Preferences> Key Bindings — User)에 다음을 붙여 넣어야했습니다 .

{ "keys": ["tab"], "command": "expand_abbreviation_by_tab", "context":
    [
        { "operand": "source.js", "operator": "equal", "match_all": true, "key": "selector" },
        { "match_all": true, "key": "selection_empty" },
        { "operator": "equal", "operand": false, "match_all": true, "key": "has_next_field" },
        { "operand": false, "operator": "equal", "match_all": true, "key": "auto_complete_visible" },
        { "match_all": true, "key": "is_abbreviation" }
    ]
}

이것은 모든 주석이없고 올바른 SCOPE_SELECTOR위치에 있는 코드 입니다.

---

로부터 JSX-SublimeText 패키지 추가 정보 :

Emmet의 기본값은 JS 파일을 지원하지 않는 것입니다. 따라서 JSX 파일에서 탭 완성에 키보드 단축키를 추가해야합니다.

Preferences > Key Bindings - user이 항목을 열고 추가하십시오.

{
    "keys": ["tab"],
    "command": "expand_abbreviation_by_tab", 
    "context": [
        {
            "operand": "source.js.jsx", 
            "operator": "equal", 
            "match_all": true, 
            "key": "selector"
        },
        {   
            "key": "selection_empty", 
            "operator": "equal", 
            "operand": true,
            "match_all": true 
        }
    ]
}

---

Just expanding upon this answer.
You may not want all letters you write to be expandable into html. You can set another extra object in your context to restrict when the tab completion is applied. This code was found in this gist however I modified the Regex to be a bit better.

{
    "keys": ["tab"],
    "command": "expand_abbreviation_by_tab", 
    "context": [{
        "operand": "source.js", 
        "operator": "equal", 
        "match_all": true, 
        "key": "selector"
    },{
        "key": "preceding_text", 
        "operator": "regex_contains", 
        "operand": "(\\b(a\\b|div|span|p\\b|button)(\\.\\w*|>\\w*)?)", 
        "match_all": true
    },{
        "key": "selection_empty", 
        "operator": "equal", 
        "operand": true, 
        "match_all": true
    }]
}

You'll also need to install the packages RegReplace and Chain of Command as recommended in the gist to even get span.class to turn into <span className="class"></span>
If you'd like to add more elements to listen for just add them to the list i.e. (a\\b|div|span|p\\b|button|strong)
The \\b refers a word boundary and stops the following from expanding abc into <abc></abc>

---

simply use ctrl+e (cmd+e on mac ) instead of tab to get emmet to work inside your jsx. for example if I expand (using ctrl+e)

render(){
        return(
            .modal>.btn.btn-success{Click Me}   
        )
    }

then I get

render(){
        return(
            <div className="modal">
                    <div className="btn btn-success">Click Me</div>
                </div>  
        )
    }

참고URL : https://stackoverflow.com/questions/26089802/in-sublime-text-3-how-do-you-enable-emmet-for-jsx-files