VSCode 不会自动完成 HTML

Posted 2023-02-22

技术标签:

【中文标题】VSCode 不会自动完成 HTML【英文标题】：VSCode not auto completing HTML 【发布时间】：2015-08-22 04:40:09 【问题描述】：

我在 Windows 7 上安装新的 Visual Studio Code 时遇到问题。在 Mac 上，编辑器会自动关闭 html 标签，但在我的 Win7 上不会。我认为必须有一些选项可以打开它，但我找不到任何选项。

我说的是什么时候，例如。写<html intelliSense 会弹出并点击回车，通常它会自动输入</html> 我的不工作。（IntelliSense 会弹出，但当您选择其中一个选项时，它不会自动关闭标签：<h1> -> </h1>）

【问题讨论】：

1.你可以使用Auto Close Tag，它可以满足你的要求。 2.输入div等标签名，然后按两次tab键，会自动补全whoe标签-----> 您还可以自动创建具有类或 id 名称的元素。在您的编辑器中输入 .someclassname 并按 Tab。你会得到。或者只是放一个#而不是句号，然后在名称后按tab，它会给你一个带有id的。 【参考方案1】：

输入标签名称（不以<开头）然后按Tab

例如输入div然后按Tab键，VS会将其转换为<div></div>

或者键入开始标签，然后按两次 Tab 键

例如：

<div

它会添加结束标签

【讨论】：

自闭标签（例如）呢？只需输入 input 并按两次 Tab，VS Code 会自动补全到只是想补充一点，这是 Emmet 功能的一部分，它可以让您轻松生成更复杂的 HTML 结构，而不仅仅是标签对。例如，您可以阅读 this，或者直接在谷歌上搜索 Emmet。第一个建议效果很好 - 谢谢！第二个建议不再起作用，因为您在第一个选项卡之后最终得到<<div></div>。所以只需继续输入div 然后 Tab :) 它对我不起作用。我还有什么需要检查的吗？【参考方案2】：

我遇到了同样的问题，然后我在 vs code 的右下角看到了一些东西。我没有使用 HTML，而是使用 Django-HTML，所以我将语言更改为 html，Boom 一切都再次正常工作。 see image

【讨论】：

遇到了类似的问题，但就我而言，我意识到我正在将 HTML 写入 php 文件。假设我将无法使用自动关闭标签。不需要更改语言，只需添加到 settings.json "emmet.includeLanguages": "django-html": "html" 感谢上面的@raultedesco 评论，我修复了我的 Twig 模板不是智能感知 HTML。 Ctrl+Shift+p -> 打开 Perferences: Open Settings (UI) -> 搜索 includedLanguages -> 找到 Emmet 包含的语言 -> 输入 Item: twig; Value: html -> 按 Add item -> 享受。你刚刚救了我，我已经被这些困住了几个月，直到我今天有时间研究它，当我得到你的答案时，我完全要重新安装 vs 并重新开始.太棒了。我的是一个 go html 模板。这为我节省了很多时间。谢谢！【参考方案3】：

来自0.3.0 release notes

标签的 HTML 自动关闭现已被移除，并在 </ 上用更智能的 IntelliSense 替换。

【讨论】：

哦，这不是我所希望的。有没有办法把它带回来？修改一些文件或下载一些东西？我想使用 VSCode 但自动完成。谢谢。我也在寻找这个，但我注意到在 0.10.6 中使用制表符对我有用。例如。输入div（不带<>）然后直接按Tab，它会输入<div></div>。不完全一样，但可能有用。这些快捷方式的 Doco (emmet) here 是的，这要归功于 Emmet。 Emmet 让我们输入不带大括号的元素名称，它会添加所需的内容。真的很强大。这对我在 VS Code 1.5.3 上不起作用。如果我输入然后它不会关闭/完成标签。我在这里遗漏了什么？在最新更新后，只需输入 div 而不输入 <> 然后按 Tab 键将不再起作用。有没有办法重新启用它？【参考方案4】：

这是一个很酷的技巧（实际上是 Emmet 的缩写）：

写下标签名称| 例如h1 在 | 之后添加一个星号，例如h1* 按Tab |（将产生<h1></h1>）

_{PS：这也适用于自闭合标签，例如 - input ， img 等。}

【讨论】：

@Kokodoko 是的确实 :P 太奇怪了.....我不确定要更改什么设置才能重新启用它... @Kokodoko 你应该安装了 emmet 扩展。这可行，但不需要包含*。 1.21.0 @BlueClouds 是的，其中任何一个提供 html 缩写支持的，都应该可以工作。根据一般规则，我使用安装次数最多的那个。【参考方案5】：

你可以试试这个extension 用于 VS Code。实现了自动关闭标签功能，符合您的要求：

在您输入开始标签的右括号时自动添加结束标签插入结束标记后，光标在开始和结束标记之间

【讨论】：

这是我需要的。现在像括号一样工作，这很棒。谢谢！是的，但是......它在早期版本的 VS Code 中启用。这不只是 settings.json 迷宫中某个地方的设置吗？【参考方案6】：

Ctrl + Shift + P

'更改语言模式'

“更改语言模式”

'HTML'

【讨论】：

【参考方案7】：

从 Django-html 更改为 html .

【讨论】：

【参考方案8】：

我在使用 VSCode (1.30.2) 的 Mac Sierra (10.12.6) 上编辑 HTML 文件时遇到了同样的问题。根据 vscode 文档https://code.visualstudio.com/docs/languages/html，智能感知应该开箱即用。

原来“语言检测”（在屏幕底部编辑器状态栏的右上角）设置为自动检测，并将文件识别为django-html。当手动切换回纯 Html 时，一切正常。

【讨论】：

【参考方案9】：

按????+?????+? kbd> - >键入???????????????????? - >然后选择??????????

它对我有用。

【讨论】：

我在这个答案中没有看到任何新内容 @Vega 我认为这对像我这样的新 VSCode 用户仍然有帮助。您是否检查过其他答案中没有提到这一点？【参考方案10】：

文件 > 首选项 > 键盘映射，搜索“自动关闭”并点击安装。如果它不起作用，请重新加载插件。

【讨论】：

【参考方案11】：

我遇到了同样的问题，然后我从 VS Code 中卸载了不必要的扩展以及 javascript (SE) 扩展，它对我有用。

【讨论】：

【参考方案12】：

只需检查您的 vscode 底部并将语言模式更改为 HTML 它可能一直在显示 django-html 或单击 ctrl + shift + p 更改语言模式 Screenshot

现在点击 [!] + TAB 搞定了！！！

【讨论】：

【参考方案13】：

如果你输入

div.class

然后按TAB，VS代码会自动关闭带有给定CLASS

的DIV标签

但我认为您想通过按 ENTER 键来执行此操作。

在这种情况下，请转到您的 VS Code 用户设置并粘贴以下代码：

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

现在如果你输入

div.class

&然后按ENTER键，你就可以看到神奇了。

然而，上面的代码会让你的 VS Code 自动补全 ENTER 键不仅适用于普通的 HTML 也适用于 React 的 JSX、Vue.js sn-ps也会被这个覆盖。

但是如果你只想对 HTML 文件做，那么下面一行就足够了：

"emmet.includeLanguages":  "javascript": "html"

干杯..

【讨论】：

【参考方案14】：

按Ctrl + Shift + P 打开命令。然后，输入 Change Language Mode 并选择 HTML 或任何其他所需的语言。

【讨论】：

【参考方案15】：

Emmet

Trigger Expansion On Tab

【讨论】：

【参考方案16】：

如果你想保留“Django HTML”作为文件语言并且仍然有自动关闭标签，只需将以下内容添加到settings.json（前提是你安装了auto close tag扩展）：

  "auto-close-tag.activationOnLanguage": [
    "django-html",
    (...other languages if needed)
  ],

【讨论】：

以上是关于VSCode 不会自动完成 HTML的主要内容，如果未能解决你的问题，请参考以下文章

vscode自动导入类型python中的继承可以自动完成吗？

如何设置 vscode 的代码片段，以便在自动完成后自动触发 vscode 的智能感知？

VSCode在自动完成函数时添加括号

vscode自动完成不适用于打字稿中的方法

VSCode 替换 _$ 而不是自动完成