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

Я ранее использовал пакет 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 не дало света на эту тему. Помощь?

Ответ 1

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

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

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

Ответ 2

В апреле 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 на месте.

Ответ 3

Из пакета 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 
        }
    ]
}

Ответ 4

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

Ответ 5

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