在VSCode中设置Emmet自定义代码片段-VSCode-PHP中文网

在VSCode中设置Emmet自定义代码片段

紅蓮之龍

发布： 2025-11-18 16:09:23

原创

878人浏览过

首先在VSCode中通过命令面板打开用户代码片段配置，选择对应语言如html.json或css.json，然后以JSON格式定义自定义Emmet片段，例如为HTML添加"html:myboiler"生成页面骨架，或为CSS添加"flex:center"快速插入居中样式，其中$1、$2标记光标位置，保存后输入缩写按Tab即可触发，注意避免与默认缩写冲突并确保语法正确。

在vscode中设置emmet自定义代码片段

在VSCode中设置Emmet自定义代码片段，可以大幅提升前端开发效率。你只需简单配置，就能让常用HTML或CSS结构通过缩写快速生成。

打开Emmet配置文件

VSCode支持为不同语言（如HTML、CSS、JSX）自定义Emmet片段。这些片段通过JSON格式定义：

按下 Ctrl + Shift + P 打开命令面板
输入并选择 Preferences: Configure User Snippets
选择要创建片段的语言，例如 html.json 或 css.json

编写自定义Emmet片段

在打开的JSON文件中，添加你的缩写和对应生成内容。例如，为HTML添加一个页面骨架缩写：

{ "html:myboiler": { "prefix": "html:myboiler", "body": [ "", "", "", " ", " ", " $1", "", "", " $2", "", "" ], "description": "自定义HTML模板" } }

保存后，在HTML文件中输入 html:myboiler 并按Tab，即可生成该结构。是光标初始位置，是下一个跳转点。

小绿鲸英文文献阅读器

英文文献阅读器，专注提高SCI阅读效率

352

查看详情

CSS中定义常用样式缩写

同样可在 css.json 中添加快捷样式。例如设置一个居中布局缩写：

{ "flex:center": { "prefix": "flex:center", "body": [ "display: flex;", "justify-content: center;", "align-items: center;" ], "description": "Flex居中布局" } }

在CSS文件中输入 flex:center 后按Tab，三行样式自动插入。

基本上就这些。只要理解JSON结构，自定义Emmet片段非常直观。注意缩写不要与默认Emmet冲突，可加前缀避免覆盖。重启编辑器或重新加载窗口后新片段立即可用。不复杂但容易忽略细节，比如逗号和引号必须正确匹配。

以上就是在VSCode中设置Emmet自定义代码片段的详细内容，更多请关注php中文网其它相关文章！