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

Question

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

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

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

899 5

reactjs react-jsx sublimetext3 emmet

5 ответов:

Comments

Ничего не найдено.

Allan Hortle · Accepted Answer · 2014-10-29 00:21:37

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

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

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

rafaelbiten · Accepted Answer · 2015-08-02 04:49:04

В Апреле 2015 Года Эммет добавил поддержку 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 на месте.

Giant Elk · Accepted Answer · 2015-02-13 17:50:31

С JSX-SublimeText Package readme:

по умолчанию Emmet не поддерживает файлы JS. Таким образом, вам нужно будет добавить сочетание клавиш для tab complete в файлах 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 
        }
    ]
}

Richard Herries · Accepted Answer · 2015-06-16 18:22:00

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

Anish K. · Accepted Answer · 2017-07-17 12:06:59

просто использовать ctrl+e (cmd+e на mac) вместо вкладки, чтобы заставить Эммет работать внутри вашего 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>  
        )
    }