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.

например :

тип <div
нажмите Tab
нажмите 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

Нажмите Ctrl + Shift + P чтобы открыть палитру команд.
Тип "Изменить режим языка" в поисковике .
Выбрать "Изменить языковой режим". .
Тип "HTML" в поисковике.
И выберите «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" }

Ура ..

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