В Sublime Text 3, Как включить Emmet для файлов JSX?

Я ранее использовал пакет JSX Аллана Хортла пока я не столкнулся с проблемой с тем, как он обрабатывал подсветку синтаксиса. Я тогда заметил, что есть официальный пакет,sublime-реагировать.

С пакетом Аллана Хортла он включил фрагмент в 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. Вроде бы что-то чтобы изменить с ключевыми привязками, но начальное прочтение возвышенной документации не дало никакого света на эту тему. Помочь?

57
emmet react-jsx reactjs sublimetext3

5 ответов

если ты типа shift+super+p в файле, это позволит вам увидеть контекст текущего выбора в левом нижнем углу.

первое слово всегда является базовым типом файла. (source.js, text.html) по делу JSX я решил изменить это source.js.jsx. Это потому, что перед компиляцией JSX действительно не javascript, хотя он выглядит довольно похожим. Есть много завершений и возвышенного сахара, которые вы хотели бы иметь в JSX, но не JS. возвышенное-реагировать С другой стороны использует старый добрый source.js.

таким образом, этот фрагмент у вас есть право, вам просто нужно заменить source.js.jsx С source.js

15

В Апреле 2015 Года 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 на месте.

104

С JSX-пакет SublimeText readme:

по умолчанию 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 
        }
    ]
}
15

просто расширяя этот ответ.
Возможно, вы не хотите, чтобы все письма, которые вы пишете, были расширяемы в html. Вы можете установить другой дополнительный объект в вашем контексте, чтобы ограничить, когда применяется завершение вкладки. Этот код был найден в в этом суть однако я изменил регулярное выражение, чтобы быть немного лучше.

{
    "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 и цепочку команд, как рекомендовано в gist, чтобы даже получить span.class превращаются в <span className="class"></span>
Если вы хотите добавить больше элементов для прослушивания, просто добавьте их в список, т. е. (a\b|div|span|p\b|button|strong)
The \b ссылается на границу слова и останавливает следующее от расширения abc на <abc></abc>

2

просто использовать ctrl+e (cmd+e на mac) вместо tab, чтобы заставить emmet работать внутри вашего jsx. например, если я разверну (используя ctrl+e)

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

затем я получаю 

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