vscode怎么使用emmet_emmet功能使用教程-VSCode-PHP中文网

vscode怎么使用emmet_emmet功能使用教程

裘德小鎮的故事

发布： 2025-06-25 17:40:02

原创

877人浏览过

emmet是vs code内置的编码效率工具，通过简写语法快速生成html和css代码。使用时无需安装，直接在支持的文件类型中输入缩写即可，例如!生成html5结构，div.container>ul>li*5>a{item $}生成带五个链接的列表。若emmet不生效，可检查文件类型、emmet.includelanguages设置、emmet.syntaxprofiles配置、emmet版本及插件冲突。常用缩写包括元素名直接输入、.表示类名、#表示id、>表示子元素、+表示兄弟元素、*表示重复元素、[]表示属性、{}表示文本、$表示编号、()表示分组。此外，可通过snippets.json文件自定义代码片段，如定义"mysnippet"前缀生成特定结构，提升重复代码编写效率。

vscode怎么使用emmet_emmet功能使用教程

Emmet是VS Code里一个提高编码效率的神器，它能让你用简短的缩写快速生成HTML和CSS代码。掌握Emmet，写代码速度直接起飞。

首先，VS Code自带Emmet，不需要额外安装。直接开始用就行。

Emmet语法其实很简单，就是用一些特定的符号来表达HTML结构。比如，!可以直接生成HTML5的基本结构。div.container>ul>li*5>a{Item $}可以快速生成一个带5个链接的列表。

Emmet不生效？排查这几个常见原因

有时候Emmet会抽风，明明语法没问题，却死活不生效。别慌，试试这些方法：

确认文件类型： Emmet只在HTML、CSS等特定类型的文件中生效。确保你的文件后缀名正确，并且VS Code识别出了文件类型。如果VS Code识别错误，可以在右下角手动选择文件类型。
检查emmet.includeLanguages设置： 有时候你想在其他类型的文件中使用Emmet，比如JS文件里写HTML片段。这时需要在settings.json里配置emmet.includeLanguages。例如，"emmet.includeLanguages": {"javascript": "html"} 允许你在JavaScript文件中使用HTML的Emmet语法。
确认emmet.syntaxProfiles设置： 这个设置定义了Emmet在不同文件类型下的语法规则。默认情况下，它已经包含了常用的HTML和CSS规则。但如果你自定义了某些规则，或者使用了某些特殊的模板引擎，可能需要修改这个设置。
检查Emmet版本： 虽然VS Code自带Emmet，但Emmet本身也在不断更新。有时候旧版本的Emmet可能存在一些bug。尝试更新VS Code到最新版本，或者手动安装最新版本的Emmet插件。
排除插件冲突： 有些插件可能会干扰Emmet的正常工作。尝试禁用其他插件，看看是否能解决问题。如果问题解决了，再逐个启用插件，找出冲突的插件。

Emmet常用的缩写技巧，让你事半功倍

Emmet的核心在于它的缩写语法。掌握这些技巧，能让你快速生成复杂的HTML结构：

元素： 直接输入元素名，比如div、p、span。
类名和ID： 使用.表示类名，#表示ID。比如div.container生成
，div#header生成
。
子元素： 使用>表示子元素。比如div>ul>li生成
。
兄弟元素： 使用+表示兄弟元素。比如div+p+span生成

。
重复元素： 使用*表示重复元素。比如li*5生成5个
。
属性： 使用[]表示属性。比如a[href="#"]生成。
文本： 使用{}表示文本内容。比如p{Hello world}生成
Hello world
。
编号： 使用$表示编号。比如li.item$*5生成5个带有编号的
，类名分别为item1、item2、item3、item4、item5。
分组： 使用()表示分组。比如(div>p)+span生成
。

组合使用这些技巧，可以快速生成复杂的HTML结构。多练习，熟能生巧。

如何自定义Emmet代码片段，提高效率？

Emmet不仅可以根据缩写生成代码，还可以自定义代码片段。如果你经常需要输入一些重复的代码块，可以把它们定义成Emmet代码片段，提高效率。

打开snippets.json文件： 在VS Code中，按下Ctrl+Shift+P（或者Cmd+Shift+P），输入Preferences: Configure User Snippets，选择html.json（或者你想要自定义的文件类型）。
定义代码片段： 在snippets.json文件中，使用JSON格式定义代码片段。每个代码片段包含一个名称、一个前缀和一个代码块。例如：
```
{
    "My Custom Snippet": {
        "prefix": "mysnippet",
        "body": [
            "<div class=\"my-custom-snippet\">",
            "\t<p>${1:Your content here}</p>",
            "</div>"
        ],
        "description": "My custom snippet description"
    }
}
```
登录后复制
- "My Custom Snippet"是代码片段的名称，可以随便起。
- "prefix": "mysnippet"是代码片段的前缀，也就是你在编辑器中输入的触发词。
- "body"是代码片段的代码块，使用数组表示，每行代码是一个字符串。${1:Your content here}表示一个占位符，输入代码片段后，光标会定位到这里，方便你输入内容。
- "description"是代码片段的描述，用于在代码提示中显示。
使用代码片段： 在编辑器中输入代码片段的前缀（比如mysnippet），按下Tab键，就可以生成代码片段了。