Emmet 扩展缩写在具有属性的 Visual Studio Code 中不起作用
[英]Emmet expand abbreviation doesn't work in Visual Studio Code with the attributes
问题描述
I am starting to use Visual Studio Code for my web projects and I cannot live without Emmet, but I have a problem when I try to expand the abbreviations in HTML tags with attributes.
我开始将 Visual Studio Code 用于我的 Web 项目，没有 Emmet 我就活不下去了，但是当我尝试使用属性扩展 HTML 标签中的缩写时遇到了问题。 Just an example.只是一个例子。 If I write html:5 and press TAB key it expands all the HTML5 template如果我写html:5并按 TAB 键，它会展开所有 HTML5 模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>
And writing tags with id and class, like p#id.class , it generates properly next piece of code并用 id 和 class 编写标签，如p#id.class ，它会正确生成下一段代码
<p id="id" class="class"></p>
But when I want to expand same tag with other attributes inside of square brackets, it doesn't work.但是当我想用方括号内的其他属性扩展相同的标签时，它不起作用。 Just add a tab space in the code.只需在代码中添加一个制表符空间。
p[align="center"]
And same thing if I try to add text in the tag using curly brackets如果我尝试使用大括号在标签中添加文本，也是一样
p{Test}
Can you help me to know how to configure it, or if it is a problem with my software / extensions?你能帮我知道如何配置它，或者它是否是我的软件/扩展的问题？
Regards,问候，
8 个解决方案
解决方案1
17 已采纳 2018-11-28 00:55:56
After few days, investigating in the Emmet in Visual Studio Code webpage I found the solution.几天后，在 Visual Studio Code 网页中的Emmet 中进行调查，我找到了解决方案。
You need to add next line to the User Settings file for expanding the Emmet abbreviations with Tab key:您需要在用户设置文件中添加下一行，以便使用 Tab 键扩展 Emmet 缩写：
"emmet.triggerExpansionOnTab": true
This is because by default is disabled on Visual Studio Code.这是因为默认情况下在 Visual Studio Code 上是禁用的。
解决方案2
11 2020-01-29 18:45:40
In Visual Studio Code: File > Preferences > Settings > Extensions > Emmet > Edit in settings.json file在 Visual Studio Code 中：文件 > 首选项 > 设置 > 扩展 > Emmet > 在 settings.json 文件中编辑
Add the below code which worked for me.添加以下对我有用的代码。
"emmet.triggerExpansionOnTab": true,
"files.associations": {"*html":"html"},
I hope it helps someone.我希望它可以帮助某人。
解决方案3
1 2018-10-31 15:04:27
I don't think square brackets work anymore in emmet... However, you should use p>{text} for the curly brackets.我不认为方括号在 emmet 中不再有效......但是，你应该使用 p>{text} 作为大括号。 From what I understand, it is used to add text within an element.据我了解，它用于在元素中添加文本。
So p>{text here} will produce <p>text here</p>所以 p>{text here} 会产生<p>text here</p>
If you still need more help, please take a look at the emmet abbreviations syntax docs: The Emmet Docs - Abbreviations Syntax如果您仍然需要更多帮助，请查看 emmet abbreviations 语法文档： The Emmet Docs - Abbreviations Syntax
解决方案4
0 2021-12-16 12:48:21
Had the same problem but with typescript.有同样的问题，但打字稿。 Adding "typescript": "typescriptreact" to settings.json helped.将"typescript": "typescriptreact"到 settings.json 有帮助。
"emmet.includeLanguages": {
"javascript": "javascriptreact",
"typescript": "typescriptreact",
"razor": "html",
"plaintext": "pug"
}
Apparently typescript is not default for emmet.显然打字稿不是 emmet 的默认值。
解决方案5
0 2021-12-21 20:35:20
Further to the above/below answers that describe how to configure your settings.json file to enable / configure Emmet:除了上面/下面描述如何配置settings.json文件以启用/配置 Emmet 的答案之外：
If you are trying to use Emmet in a new, unsaved document... you must choose a (supported) language for Emmet to be activated.如果您尝试在一个新的、未保存的文档中使用 Emmet……您必须选择一种（支持的）语言才能激活 Emmet。 (You can also just save the document and VSCode will know from the extension what language you are using.) （你也可以只保存文档，VSCode 会从扩展中知道你使用的是什么语言。）
When you launch a new editor tab (Ctrl+N or etc) -- at the very top left of the empty page you may see: "Select a language to get started".当您启动新的编辑器选项卡（Ctrl+N 等）时——在空白页面的左上角，您可能会看到：“选择一种语言以开始使用”。 CLICK on the bolded "Select a language" and choose one of the languages that is configured for Emmet in the Settings.json file as described in several of the other answers above/below.单击加粗的“选择语言”，然后在 Settings.json 文件中选择为 Emmet 配置的一种语言，如上面/下面的其他几个答案中所述。
Now, try again: type .test and press Tab and you should see Emmet expand your abbreviation.现在，再试一次：输入.test并按 Tab，您应该会看到 Emmet 展开您的缩写。
解决方案6
-1 2022-03-17 05:32:56
In Visual Studio Code: File > Preferences > Settings > Extensions > Emmet > Edit in settings.json file remove following line and save.在 Visual Studio Code 中：文件 > 首选项 > 设置 > 扩展 > Emmet > 在 settings.json 文件中编辑删除以下行并保存。
"emmet.triggerExpansionOnTab": true,
解决方案7
-1 2022-12-13 20:31:57
For what it's worth, I had the same issue but fixed it by force quitting the application after adding the code snippets above to Settings.json对于它的价值，我遇到了同样的问题，但在将上面的代码片段添加到 Settings.json 后通过强制退出应用程序来修复它
解决方案8
-2 2020-04-23 15:30:19
Edit the file settings.json the path in Visual Studio Code File > Preferences > Settings > Extensions > Emmet > Edit in settings.json编辑文件 settings.json Visual Studio Code File > Preferences > Settings > Extensions > Emmet > Edit in settings.json 中的路径
find file settings.json Edit file settings.json找到文件 settings.json编辑文件 settings.json
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.