Автозаполнение html-тегов в jsx (возвышенный текст)

Ответ 1

Стоит отметить, что вы можете включить Sublime встроенный тег ближе в JSX, скопировав и слегка изменив привязку клавиш для /, которая поставляется с Default.sublime-package. Добавьте в свою собственную раскладку следующее:

{ "keys": ["/"], "command": "close_tag", "args": { "insert_slash": true }, "context":
  [
    { "key": "selector", "operator": "equal", "operand": "(text.html, text.xml, meta.jsx.js) - string - comment", "match_all": true },
    { "key": "preceding_text", "operator": "regex_match", "operand": ".*<$", "match_all": true },
    { "key": "setting.auto_close_tags" }
  ]
}

Предполагая, что вы используете пакет Babel, селектор meta.jsx.js будет соответствовать синтаксису JSX и активировать поведение закрытия тега. Имя области может отличаться для других пакетов, и в этом случае вы можете использовать ScopeHunter для проверки областей, применяемых вашим предпочтительным синтаксисом JSX.

Ответ 2

Он не будет автоклинировать скобки для вас по мере ввода, но вы можете просто использовать Sublime встроенный тег ближе с command + option + .

Ответ 3

Установка: Babel и Emmet

Затем добавьте это в свои привязки клавиш - Пользователь

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

Ответ 4

Я предлагаю сочетание babel-sublime и emmet. Если вы укажете в качестве синтаксиса "JavaScript (Babel)", оба пакета будут работать вместе, при этом emmet правильно генерирует "className" и "htmlFor" при необходимости.

Единственным недостатком является то, что расширение не будет работать с TAB, но с CTRL + E. Это связано с тем, что TAB имеет кучу другого использования в JavaScript.

Ответ 5

Если у вас установлен babel для возвышенного, попробуйте открыть файлы .js и .jsx и перейдите в режим просмотрa > синтаксиs > открыть все с текущим.. > babel > javascript (babel), чтобы просмотреть правильную подсветку синтаксиса и использовать CTRL + E для автоматического заполнения тега html внутри ur.jsx

Ответ 6

Основываясь на ответе Даниэля, я сделал плагин только для этого.

Источник: https://github.com/FMCorz/AutoCloseTags

Для установки:

• Добавьте вышеуказанный репозиторий с помощью Package Control: Add repository
• Выполните команду Package Control: Install package
• Выберите AutoCloseTags