📅  最后修改于: 2023-12-03 15:05:51.627000             🧑  作者: Mango
Emmet是一个快速、高效、易用的HTML/CSS/JS代码生成工具,其创造者是Sergey Chikuyonok。它支持快捷键、Tab补全等功能,可以大大提高开发效率。本文将介绍如何在VS Code上添加Emmet扩展。
打开VS Code,点击左侧菜单栏的“扩展”。
在搜索框中输入“Emmet”,并安装扩展。
安装Emmet扩展

在VS Code的设置中设置Emmet。
a. 打开“设置”(快捷键为“Ctrl + ,”)。
b. 搜索框中输入“Emmet”,在下拉框中选择“Edit in settings.json”。
c. 添加以下代码。
"emmet.includeLanguages": {
"vue-html": "html",
"vue": "html",
"wxml": "html",
"blade": "html",
"ejs": "html",
"erb": "html",
"handlebars": "html",
"hbs": "html",
"html": "html",
"jade": "html",
"markdown": "html",
"php": "html",
"razor": "html"
},
"emmet.syntaxProfiles": {
"javascript": "jsx"
},
"emmet.triggerExpansionOnTab": true,
d. 保存并关闭。
设置Emmet

在HTML/CSS/JS文件中使用Emmet。
a. 输入HTML标签(如“div”),然后按下“Tab”键,即可快速生成对应的HTML代码。
b. 输入CSS属性(如“m10”表示margin:10px),然后按下“Tab”键,即可快速生成对应的CSS代码。
使用Emmet

本文介绍了如何在VS Code上添加Emmet扩展,并且介绍了如何在HTML/CSS/JS文件中使用Emmet。Emmet是一个非常实用的工具,可以大大提高开发效率,推荐给初学者和常用开发工具的开发者使用。