Sublime Text 3에서 JSX 파일에 대해 Emet을 활성화하려면 어떻게 해야 합니까?

Sublime Text 3에서 JSX 파일에 대해 Emet을 활성화하려면 어떻게 해야 합니까?

이전에 Alan Hortle의 JSX 패키지를 사용하다가 구문 강조 표시 처리 방법에 문제가 발생했습니다.그리고 공식 패키지인 숭고한 반응이 있다는 것을 알게 되었다.

앨런 호틀의 패키지로, 그는 작은 조각 하나를 포함시켰습니다Preferences > Key Bindings – User다음과 같은 Emet 기능을 활성화합니다.

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

이 조각은 공식 서브 라임 리액트 패키지에서는 작동하지 않는 것 같습니다.그것은 키 바인딩으로 수정해야 할 것으로 보이지만 Sublime 문서를 처음 읽어봤을 때 그 주제에 대한 실마리를 찾지 못했다.도와 드릴까요?

2015년 4월에 Emet은 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제자리입니다.

입력한 경우shift+super+p파일에서 왼쪽 아래에 현재 선택 영역의 컨텍스트를 볼 수 있습니다.

첫 번째 단어는 항상 기본 파일 형식입니다.(source.js,text.html) JSX의 경우, 이것을 다음과 같이 변경하기로 선택하였습니다.source.js.jsx컴파일 전 JSX는 javascript가 아니라 비슷해 보이지만 javascript가 아니기 때문입니다.JSX에는 많은 완성도와 숭고한 설탕이 있지만 JS에서는 발생하지 않는다. 반면 숭고한 반응은 플레인 올드(Plain old)를 사용한다.source.js.

그래서 당신이 가지고 있는 이 조각이 맞다면, 당신은 단지 교체만 하면 됩니다.source.js.jsx와 함께source.js

JSX-Sublime에서텍스트 패키지 readme:

Emet의 기본값은 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 
        }
    ]
}

2021년에는 Emet이 기본적으로 JSX 파일을 지원하므로 아무것도 구성할 필요가 없습니다.

Emet 설치 후 패키지 제어에서 JSX 언어 정의를 설치해야 합니다.

지금이다TABHTML 태그에 prefix가 붙어 있는 경우에만 동작합니다.<.예를들면<div이 동작을 변경하려면 Emet 설정을 열고 이 설정을 다음과 같이 변경합니다.false:

"jsx_prefix": false

Emet 설정을 열려면 아래 이미지와 같이 파일 메뉴를 사용하거나 명령 팔레트(macOS의 경우 CMD+Shift+P)를 열고 "Emet 설정"을 씁니다.

이 답변에 대해 자세히 말씀드리겠습니다.
쓰는 모든 문자를 html로 확장할 수 있는 것은 아닙니다.탭 완료를 적용할 때 제한하도록 컨텍스트에서 다른 추가 개체를 설정할 수 있습니다.이 코드는 이 Gest에서 발견되었지만 Regex를 조금 더 낫게 수정했습니다.

{
    "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
    }]
}

하는 대로 및해야 RegReplace를 사용할 수 span.class<span className="class"></span>
들을 요소를 더 추가하려면 목록에 추가하십시오. (a\\b|div|span|p\\b|button|strong)
\\b합니다.abc<abc></abc>

말하다ctrl+e )cmd+eemet emet emet emet emet emet emet emet emet emet emet emet emet emet emet emet emet emet emet emet empt emet emet emet empt emet empt empt ( ( ( on★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ctrl+e)

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

그러면 알 수 있다

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