Я хотел был бы иметь возможность использовать autocomplete для html-тегов в моем коде реакции/jsx. Точно так же он работает для html-файлов. Могу ли я настроить возвышенный текст 3, чтобы включить автозаполнение тегов для файлов jsx?Autocomplete html tags в jsx (возвышенный текст)
Стоит отметить, что вы можете включить встроенный в тег Sublime ближе в JSX пути копирования и слегка модифицируя keybinding для /, который поставляется с 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.
Это отлично работает, и на самом деле лучше всего подходит к вопросу OP. Он не спрашивал: как я могу использовать emmet в JSX.Он спросил, как я могу сделать возвышенный дескриптор jsx так, как он обрабатывает html. Одно предостережение: вы, вероятно, захотите поместить его в папку «Default.sublime-keymap» в своей папке пользователя, а не менять базовую. – btwebste
@btwebste Вы понимаете, что SublimeText сильно полагается на плагины для расширения? Хотя этот ответ работает для ограниченного круга вопросов, emmet - отличный инструмент для использования в вашем поясе инструмента. Не поймите меня неправильно, я не стану подвергать сомнению величие этого ответа (имеет мое преимущество), но другие ответы одинаково хороши (тем более, что каждый получает то, о чем попросил ОП, а затем и некоторые). – Mrchief
Я собирался прокомментировать, что кто-то должен сделать плагин для этого. Итак, я сделал: https://github.com/FMCorz/AutoCloseTags. Спасибо за ответ! – FMCorz
Он не будет закрываться автоматически скобки для вас, как вы типа, но вы можете просто использовать встроенный тег Sublime ближе с командавариант. для mac, или alt. для окон.
Это не работает для меня в моем тестировании. Может ли кто-то подтвердить, что это действительно работает для них в Sublime? Возможно, он полагается на плагин. – XML
Не работает для меня. –
@XMLilley работает для меня. Единственный плагин, специфичный для React, - https://github.com/babel/babel-sublime. Возможно, это имеет значение, поскольку именно это обеспечивает подсветку синтаксиса для файлов JSX. – maxedison
Я настоятельно рекомендую комбинацию babel-sublime и emmet. Если вы укажете в качестве синтаксиса «JavaScript (Babel)», оба пакета будут работать вместе, при этом emmet правильно генерирует «className» и «htmlFor», если это необходимо.
Единственным недостатком является то, что расширение не будет работать с TAB, но с CTRL + E. Это связано с тем, что TAB имеет кучу другого использования в JavaScript.
У меня есть оба этих пакета, но у меня нет «JavaScript (Babel)», доступный мне как опция в меню _Syntax_. Опция _JavaScript _ имеет popover-меню, но здесь перечислены только _JavaScript_ и _JSON_. Любое понимание этого? – IsenrichO
Работает отлично .. спасибо –
@IsenrichO На моей машине это указано в разделе (Babel) -> JavaScript (Babel). – SherylHohman
Установка: столпотворение & Эммета
Затем добавьте это в ваши привязки ключей - 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 }
]
}
Редактирование «Ключевых привязок - Пользователь» относится к «Предпочтениям> Ключевым привязкам», а затем правильному. –
Если у вас есть babel, установленный для возвышенного, попробуйте открыть ваши .js и .jsx-файлы и перейдите в режим просмотра> синтаксис> откройте все с помощью текущего ..> babel> javascript (babel), чтобы увидеть правильную подсветку синтаксиса и использовать CTRL + E для автоматического заполнения тега html внутри ur .jsx
Это ваша проблема? –
Основываясь на ответе Даниэля, я сделал плагин именно для этого.
Источник: https://github.com/FMCorz/AutoCloseTags
Для установки:
Package Control: Add repositoryPackage Control: Install packageAutoCloseTagsВ других предлагается: установить Babel и Emmet!
Emmet Abbreviation's list (см demo here) (и cheat sheet here)
Вам даже не нужно вводить в угловых скобках - Эммет будет делать это, закрывающий тег, и многое другое!
Использование CtrlE расширить аббревиатуру.
Эммет документы: большие в объяснении сокращения .. но не состояние как «Раскрыть аббревиатуру» - по крайней мере, я не смог найти его.
От возвышенного, я
- открыл: Preferences -> Package Settings -> Emmet -> Key Bindings - Default
- искали expand_abbreviation
- найдено ctrl+e
Счастье - Работает как шарм :-)
Я также рекомендуем установить AutoCloseTags, как предусмотрено b y FMcorz и Daniel Shannon.
Эта комбинация дает
- автоматическое закрытие (истолковано тега из-за вложенности правил), просто набрав </, большой на лету, в то время, Эммет будет
- расширить «сокращение» до полного открытия и закрытия теги (и более), нажав Crtl-E. Это отлично подходит для создания скелета.
Пробовали ли вы какие-либо плагины JSX или Babel, чтобы узнать, соответствуют ли они вашим потребностям? – WiredPrairie
Да, я использую babel-возвышенное, он делает хорошую работу, но неудачно html автозаполнение не работает. –
Я не верю, что это особенность. – WiredPrairie