如何在VSCode中利用Emmet语法快速编写HTML和CSS代码
如何在VSCode中利用Emmet语法快速编写HTML和CSS代码

免费影视、动漫、音乐、游戏、小说资源长期稳定更新! 👉 点此立即查看 👈
Emmet在VSCode里默认就开着,但得确认它没被关掉
从VSCode 1.70版本开始,Emmet功能就已经默认启用了。不过,事情总有例外——如果你用的是高度自定义的工作区设置、远程开发环境,或者不小心禁用了某些相关扩展,那么emmet.enable这个关键开关就有可能被关上了。怎么确认?打开设置(快捷键Ctrl+,或Cmd+,),搜索emmet.enable,确保它处于勾选状态。
接下来,还得检查一下emmet.includeLanguages这个配置项。它决定了Emmet在哪些文件类型里生效。像“html”、“css”、“scss”这些自然是标配,但很容易被忽略的是“vue”。Vue单文件组件中的块默认并不会触发Emmet,这就需要我们手动添加一条映射规则:
{"vue": "html"}
加上这一条,问题就解决了。
写 HTML 时缩写不展开?先看光标位置和文件类型
相信不少人都遇到过这种尴尬:信心满满地敲下ul>li*3,然后按下Tab键,结果……什么都没发生。别急,这通常不是Emmet坏了,而是触发条件没满足。可以从下面几个方面排查:
第一,看文件类型。编辑器右下角显示的是“Plain Text”还是“CSS”?如果是,Emmet当然不会工作。点击语言模式,手动切换到HTML即可。
第二,看光标位置。Emmet缩写默认只在行末,或者紧跟在字母、数字之后才会被识别。如果光标前面有空格或者其他符号,它可能就“假装看不见”了。
第三,看书写环境。如果你是在字符串、注释或者Ja vaScript代码块里写HTML缩写,Emmet是不会响应的。它只作用于对应语言的纯文本编辑区域。
另外,关于那个经典的!缩写:它其实是html:5的别名,能快速生成HTML5文档结构。但前提是,当前文件必须被识别为html类型,并且光标最好在文件开头的空行上。
CSS 中用 Emmet 写属性值,得记住几个关键缩写规则
CSS Emmet的玩法跟HTML不太一样,它不是“所见即所得”的补全,而是有一套基于前缀的缩写规则。掌握几个核心规律,效率就能翻倍:
- 边距与尺寸:
m10会展开为margin: 10px;,而mt-20则对应margin-top: -20px;(注意,负号要和数字连在一起写)。 - 单位控制:默认单位是
px。想要百分比?加个p就行,比如w100p就是width: 100%;。单纯写h50,得到的就是height: 50px;。 - 规则与动画:
@m对应@media,@k对应@keyframes,快速创建媒体查询和动画关键帧。 - 复合属性:多个值用连字符分隔。例如
bd1-s#000,会优雅地展开为border: 1px solid #000;。
需要注意的是,CSS缩写不支持嵌套语法(比如&:hover),也不能解析CSS变量或自定义函数。它的核心是一套内置的映射表,匹配上就展开,匹配不上就保持原样。
自定义 Emmet 缩写容易改坏,优先用 emmet.variables 和 emmet.snippets
想要打造自己顺手的缩写库?直接去修改emmet.json或者覆盖核心配置风险比较高,容易导致功能异常。更稳妥的方式,是使用VSCode提供的两个安全入口:
1. 定义全局变量 (emmet.variables):
这里适合放置一些通用的值。比如,设置{“lang”: “zh-CN”, “charset”: “UTF-8”},之后在HTML模板缩写中就可以用{lang}来引用,确保生成文档的语言属性一致。
2. 添加自定义片段 (emmet.snippets):
这里是创建个性化快捷指令的地方。例如,为HTML文件添加一个快速输出日志的片段:
{"html": {"cc": "console.log('${1:data}');${0}"}}
保存之后,在HTML文件里输入cc再按Tab,就能快速插入一段Ja vaScript的console.log语句,并且光标会智能地定位到第一个参数位置。
重要提示:修改完以上任何配置,都需要重启VSCode或者执行“重载窗口”命令(Ctrl+Shift+P → 输入Developer: Reload Window),更改才会生效。
最后,提一个容易踩的坑:尽量不要去动emmet.extensionsPath这个旧版配置项。它在新版中已被弃用,设置了反而可能导致Emmet功能失效。
说到底,无论是.container>.row>.col-md-6*2这样的布局神速写法,还是bgc#f00这种颜色快捷输入,其背后都依赖两个基础:准确的语言上下文和干净的输入位置。尤其容易被忽略的是,在Vue、JSX甚至Markdown文件中书写HTML片段时,必须确保语言绑定被正确声明,否则Emmet根本无法理解你的意图。
立即学习“前端免费学习笔记(深入)”;
游乐网为非赢利性网站,所展示的游戏/软件/文章内容均来自于互联网或第三方用户上传分享,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系youleyoucom@outlook.com。
同类文章
如何优化Apache2响应速度
Apache2响应速度优化实操指南 想让你的Apache2服务器跑得更快?这事儿其实有章可循。下面这份实操指南,将从基础到进阶,帮你系统地提升响应速度。记住,所有优化都建立在不变动核心业务逻辑和架构的前提下。 一 基础与系统层面优化 优化得从地基开始。系统层面的几个关键设置,往往能以小成本换来大收益
git多人协作的工作流程【汇总】
多人协作必须禁用直接 push 到 main 分支:PR MR 流程是保障代码质量、自动化测试与冲突预判的核心机制;最佳实践包括语义化分支命名、启用分支保护规则,并规范 rebase 与 merge 的使用场景。 多人协作时,为什么禁止直接 push 到 main 分支? 直接向主分支推送代码,表面
CentOS上如何升级PHPStorm到最新版本
在 CentOS 上升级 PhpStorm 的可选方案 说到在 CentOS 上升级 PhpStorm,其实路径很清晰。核心原则是:优先使用内置更新或 JetBrains Toolbox App 这类自动管理工具,其次才是手动下载安装包覆盖升级。下面,就按推荐顺序,把每种方式的操作步骤和关键要点给你
Atom如何设置自动保存?Atom自动保存功能开启教程
Atom如何设置自动保存?Atom自动保存功能开启教程 如果你还在为Atom的自动保存功能头疼,那很可能踩中了几个常见的“坑”。从1 27版本开始,autosa ve功能已经作为核心特性内置,不再依赖插件。但问题也随之而来:为什么设置了却不见效?答案往往藏在版本、配置层级,或者那些本该被清理的旧插件
如何在CentOS上备份PHPStorm的配置文件
在 CentOS 上备份 PhpStorm 配置文件:完整指南与最佳实践 一、备份前的准备工作 在开始备份 PhpStorm 配置之前,充分的准备工作至关重要。这能有效保障备份数据的完整性与安全性,避免因操作不当导致配置丢失或损坏。 彻底关闭 PhpStorm 应用程序:这是首要且必须的步骤。确保
- 日榜
- 周榜
- 月榜
1
2
3
4
5
6
7
8
9
10
相关攻略
2015-03-10 11:25
2015-03-10 11:05
2021-08-04 13:30
2015-03-10 11:22
2015-03-10 12:39
2022-05-16 18:57
2025-05-23 13:43
2025-05-23 14:01
热门教程
- 游戏攻略
- 安卓教程
- 苹果教程
- 电脑教程
热门话题

