Автозаполнение html-тегов в jsx (sublime text)

Я хотел бы иметь возможность использовать автозаполнение для тегов html в моем коде react/jsx. Так же, как это работает для html-файлов. Могу ли я настроить sublime text 3 для включения автозаполнения тегов для файлов jsx?

40
autocomplete react-jsx reactjs sublimetext sublimetext3

7 ответов

стоит отметить, что вы можете включить встроенный тег 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.

59

установить: babel & Emmet

затем добавьте это в свои привязки ключей-User

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

Он не будет автозакрытия скобок при вводе, а можно просто использовать Sublime встроенный в теге ближе с командаопции. для mac или alt. для windows.

16

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

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

8

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

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

установка:

  1. добавьте вышеуказанный репозиторий с Package Control: Add repository
  2. выполнить команду Package Control: Install package
  3. выберите AutoCloseTags
2

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

0

как другие предложили: установить Бабель и Эммет !

список аббревиатуры Эммета ( см. демо здесь ) ( и шпаргалка здесь )
Вам даже не нужно вводить угловые скобки-Эммет сделает это, закрывающий тег и многое другое!

использовать CtrlE в разверните аббревиатуру.

Emmet docs: отлично объясняет сокращения.. а не как "расширить аббревиатуру" -по крайней мере, я не смог найти.

От Возвышенного, Я
- открыл: Preferences -> Package Settings -> Emmet -> Key Bindings - Default
- искали expand_abbreviation
- нашли ctrl+e

счастье - работает как Шарм :-)

Я и рекомендую установить AutoCloseTags, предусмотренных FMcorz и Дэниэл Шэннон.

эта комбинация дает
- автоматическое закрытие (интерпретируемый тег из-за правил вложенности), просто набрав </, отлично на лету, тогда как, Эммет будет
- разверните "аббревиатуру" до полного открытия и закрытия тегов (и более), нажав Crtl-E. Это отлично подходит для создания каркаса.

0