VSCode не заполняет HTML автоматически

87

У меня проблемы с моим новым установленным кодом Visual Studio в Windows 7. На Mac редактор автоматически закрывает html-теги, а на моем Win7 - нет. Я предполагаю, что должна быть какая-то возможность включить его, но я не могу ее найти.

Я говорю о том, когда например. писать <htmlна IntelliSense всплывает и нажать кнопку ввода, как правило , это автоматически ставит в </html>шахте не работает. (The IntelliSense всплывает , но при выборе одного из вариантов его не закрывать автоматически тег: <h1> -> </h1>)

html intellisense visual-studio-code Харви3589661
источник
1. вы можете использовать тег автоматического закрытия , он может удовлетворить ваши требования.
jialin wang 08
2
2. введите имя тега, например div , затем дважды введите клавишу табуляции , он автоматически заполнит whoe-тег -----> <div> </div>
jialin wang 08

Ответы:

42

Из примечаний к выпуску 0.3.0

Автоматическое закрытие тегов HTML теперь удалено и заменено более умной функцией IntelliSense </.

Джон Папа
источник
5
О, я не на это надеялся. Есть ли способ вернуть его? Изменить какие-то файлы или что-то скачать? Я бы хотел использовать VSCode, но с автоматическим завершением. Благодарю.
Harvey3589661 08
56
Я тоже искал это, но заметил, что использование вкладок у меня работает в 0.10.6. Например, введите div(без <>), затем сразу нажмите вкладку, и она войдет <div></div>. Не совсем то же самое, но может пригодиться. Doco для этих ярлыков (emmet) здесь
peterc
3
да, это из-за Эммета. Эммет позволяет нам вводить имена элементов без фигурных скобок, и он добавит то, что нужно. Это действительно мощно.
Джон Папа
1
Это не работает для меня в VS Code 1.5.3. Если я наберу <div>, то </ он не закроет / не завершит тег. Что мне здесь не хватает?
Майкл Джованни Пумо 05
2
Просто печатать divбез <>и затем нажимать вкладку больше не работает после последних обновлений. Есть ли способ снова включить это?
Кокодоко 07
173

Введите имя тега (без запуска < ), затем нажмите Tab

например, введите, divзатем нажмите вкладку, и VS преобразует его в<div></div>

Или введите открывающий тег и дважды нажмите Tab.

например :

  1. тип <div
  2. нажмите Tab
  3. нажмите Tab

он добавит закрывающий тег

Rabolf
источник
2
А как насчет самозакрывающихся тегов (например, <input />)?
Randall Flagg
1
просто введите input и дважды нажмите Tab, VS Code автоматически завершит его до <input type = "text">
Амит Миттал
1
Просто хочу добавить, что это часть функциональности Emmet, которая позволяет легко создавать более сложную структуру HTML, а не только пары тегов. Для примера вы можете прочитать это или просто погуглить для Эммета.
Alex Che
@Rabolf, можешь ли ты упомянуть еще какие-нибудь интересные сочетания клавиш HMTL для VS Code?
eMad
@eMAD, к сожалению, я не продолжил использовать VS Code
Rabolf
56

У меня была та же проблема, затем я увидел что-то в правом нижнем углу vs code ... вместо использования HTML я использовал Django-HTML, поэтому я изменил язык на html, Boom, все снова работает нормально. см изображение

Сифамандла Герой Нгвенья
источник
Была аналогичная проблема, но в моем случае я понял, что пишу HTML в файл PHP. Предположим, я не смогу использовать теги автоматического закрытия так долго, как это сделаю.
Прометей
1
не нужно менять язык, только добавьте в settings.json "emmet.includeLanguages": {"django-html": "html"}
raultedesco
Я исправил мои шаблоны Twig, не использующие intellisensing HTML, благодаря комментарию @raultedesco выше. Ctrl+Shift+p-> открыть Perferences: Open Settings (UI)-> найти includedLanguages-> найти языки, включенные в Emmet -> ввод Item: twig; Value: html-> нажать Add item-> наслаждаться.
Валентин Ши
22

Вот крутой трюк (на самом деле аббревиатура Эммета) :

  • напишите имя тега | напримерh1
  • после этого добавьте звездочку | напримерh1*
  • Нажмите | (приведет к )Tab<h1></h1>

­

PS: Это также работает для самозакрывающихся тегов, таких как - inputи imgт. Д.

ɢʀᴜɴᴛ
источник
1
@Kokodoko Да, это так :P
ɢʀᴜɴᴛ
Это так странно ... Я не уверен, какие настройки нужно изменить, чтобы снова включить его ...
Кокодоко,
1
@Kokodoko, у вас должно быть установлено расширение emmet.
Sudhanshu
1
Это работает, но нет необходимости включать *. 1.21.0
Соус
1
@BlueClouds да, и любой из них, который поддерживает сокращение html, должен работать. По общему правилу я использую тот, у которого максимальное количество установок.
Судханшу
15

Вы можете попробовать это расширение для VS Code. В нем реализована функция автоматического закрытия тегов и будет соответствовать вашим требованиям:

  • Автоматически добавлять закрывающий тег при вводе закрывающей скобки открывающего тега
  • После вставки закрывающего тега курсор находится между открывающим и закрывающим тегами.
Джун Хан
источник
Это то, что мне было нужно. Теперь работает как Brackets, и это здорово. Благодаря!
Harvey3589661
Да, но ... он был включен в более ранних версиях VS Code. Разве это не просто настройка где-то в лабиринте settings.json?
Kokodoko 07
7

Я столкнулся с такой же проблемой на Mac Sierra (10.12.6) с VSCode (1.30.2) при редактировании файла HTML. Согласно документации vscode https://code.visualstudio.com/docs/languages/html , intellisense должен работать из коробки.

Оказалось, что «Определение языка» (в правом углу строки состояния редактора в нижней части экрана) установлено на автоматическое определение и распознал файл как django-html. При ручном переключении обратно на простой Html все работает.

XX
источник
5
  1. Нажмите Ctrl + Shift + P чтобы открыть палитру команд.
  2. Тип "Изменить режим языка" в поисковике .
  3. Выбрать "Изменить языковой режим". .
  4. Тип "HTML" в поисковике.
  5. И выберите «HTML» (вероятно, он был установлен на «django-html»).
Хапи
источник
3

Нажмите 𝐜𝐭𝐫𝐥+𝐬𝐡𝐢𝐟𝐭+𝐏-> введите 𝐂𝐡𝐚𝐧𝐠𝐞 𝐋𝐚𝐧𝐠𝐮𝐚𝐠𝐞 𝐌𝐨𝐝𝐞 -> затем выберите 𝐀𝐮𝐭𝐨 𝐃𝐞𝐭𝐞𝐜𝐭

Меня устраивает.

Сувалакшми
источник
1
Я не вижу в этом ответе ничего нового
Double Expresso
2

Файл> Настройки> Раскладки, найдите «Автоматическое закрытие» и нажмите «Установить». Если не работает, перезагрузите плагин.

Дхимант Бхандаркар
источник
1

У меня была та же проблема, затем я удалил ненужные расширения из VS Code вместе с расширением JavaScript (SE), и это сработало для меня.

5hifaT
источник
0

Нажмите, Ctrl + Shift + Pчтобы открыть команду. Затем введите Change Language Modeвыбранный HTMLили любой другой желаемый язык.

Али
источник
0

Просто проверьте нижнюю часть своего vscode и измените языковой режим на HTML. Возможно, он показывал django-html, или нажмите ctrl + shift + p, чтобы изменить языковой режим. Скриншот

Теперь нажмите [!] + TAB, вуаля, готово !!!

Отобонг
источник
0

Если вы напечатаете

div.class

а затем нажмите TAB , VS-код автоматически закроет тег DIV с заданным CLASS

Но я думаю, вы хотите проделать эту операцию, нажав клавишу ENTER .

В этом случае перейдите в настройки пользователя VS Code и вставьте следующий код:

"emmet.includeLanguages": {
    "javascript": "javascriptreact",
    "vue-html": "html",
    "razor": "html",
    "plaintext": "jade"
}

Теперь, если вы наберете

div.class

и затем нажмите ENTER , вы увидите волшебство.

Тем не менее, приведенный выше код сделает ваш VS Code автозаполнением с помощью клавиши ENTER не только для обычного HTML, но и для фрагментов JSX of React , Vue.js. также охватят это.

Но если вы хотите сделать это только для файла HTML, достаточно следующей строки:

"emmet.includeLanguages": { "javascript": "html" }

Ура ..

ИФТЕХАР И АСИФ
источник