Atom配置Emmet插件实现快速编写代码的步骤

冬萱君_9636

冬萱君_9636

2026-09-18

466人浏览

原创

必须重启atom才能初始化emmet插件:装完emmetio插件后需重启,再切html语法、光标置行尾按tab才生效;否则手动调emmet: expand abbreviation报错即未初始化。

atom配置emmet插件实现快速编写代码的步骤

装完插件必须重启 Atom 才能初始化

Emmet 插件(作者 emmetio)安装后不会立即生效,~/.atom/packages/emmet 目录存在且非空只是基础条件,不重启就等于没装。重启后打开新文件,右下角手动切到 HTML 语法,输入 div.test 并确保光标停在末尾,再按 Tab:成功会变成 <div class="test"></div>;若原样不动,说明插件未初始化——此时打开命令面板(Ctrl+Shift+P),搜 Emmet: Expand Abbreviation 手动触发,报 Cannot read property 'expand' of undefined 就是重启没做对。

Tab 键不展开的真正原因不是插件问题

90% 的“按 Tab 没反应”都卡在触发条件上,跟插件本身无关:

  • 文件语法不是 HTMLCSS(新建文件默认是 Plain text,右下角点一下切换,或按 Ctrl+Shift+L 输入 html 回车)
  • 光标不在行尾:后面有空格、换行或字符时,Tab 会缩进而非展开
  • 缩写写在非作用域位置:比如 <script></script> 块里、JS 字符串中、已有标签的属性值内,Emmet 会静默忽略
  • 其他插件劫持了 Tab:尤其是 autocomplete-plus 弹出补全菜单时,临时禁用它再试

.jsx 和 .vue 文件要配两处才能用 Emmet

默认情况下,Emmet 只响应 .html.css 文件。在 .jsx.vue 中使用,必须同时满足:

凡科AI抠图
凡科AI抠图

一款简单易用的在线AI智能抠图工具,可自动识别图片主体并快速移除背景,适合处理日常图片素材。

下载
  • Atom → Preferences → Packages → emmet → Settings,在 Extensions 输入框填:jsx: jsx, vue: html(注意逗号后有空格)
  • keymap.cson:追加两行(别覆盖原内容):
    '.source.js, .source.jsx':\n  'tab': 'emmet:expand-abbreviation'\n'.source.vue':\n  'tab': 'emmet:expand-abbreviation'
  • 改完保存,已打开的文件需重新切换一次语法模式(比如从 Vue Component 切到 Plain text 再切回)才生效

CSS 缩写如 m10、dib 只在声明值位置起作用

m10dib 这类 CSS 缩写不是“写哪儿都管用”,它严格限定在 CSS 语法上下文中:

  • 只在 .css 文件,或 <style></style> 块内部生效
  • 光标必须落在冒号右侧,例如 margin: m10|| 是光标),写成 margin: m10 后再把光标移到末尾按 Tab 才行
  • .html 文件里直接写 m10 不会触发——哪怕塞进 <style></style> 标签,也得确保 Atom 把那一块识别为 source.css,而不是 text.html.basic
  • bd1-s 展开默认用黑(#000),想改颜色得在 ~/.emmet/emmet-user-config.json 里加:"variables": {"color": "#333"}

最常被忽略的是作用域匹配和光标位置——哪怕配置全对,右下角显示 Plain text 或光标卡在属性值中间,Emmet 就彻底沉默。别急着重装,先查 Editor: Log Cursor Scope 看当前 scope 是什么,再对照配置逐项核对。

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
c语言编程软件有哪些
c语言编程软件有哪些

c语言编程软件有GCC、Clang、Microsoft Visual Studio、Eclipse、NetBeans、Dev-C++、Code::Blocks、KDevelop、Sublime Text和Atom。更多关于c语言编程软件的问题详情请看本专题的文章。php中文网欢迎大家前来学习。

2023.11.02

6679

18

Vibeknow在线使用入口合集
Vibeknow在线使用入口合集

本专题汇总了Vibeknow在线创作视频的官方入口及网页版使用教程,涵盖PPT、PDF、Word等文档一键转讲解视频的核心操作,并整理了免费版水印规则与手机端浏览器访问指南,助你快速将知识内容视频化。

2026.09.21

0

20

NumPy随机数文件读写与dtype数据类型
NumPy随机数文件读写与dtype数据类型

本专题整理 NumPy 随机数、文件读写与 dtype 数据类型相关教程,覆盖 Generator/random、随机数种子、正态分布采样、npy/npz/CSV/TXT 保存读取、loadtxt/savetxt、memmap、大文件处理、astype 类型转换、结构化 dtype、整数溢出和精度丢失等场景。

2026.09.21

0

24

NumPy矩阵运算与线性代数计算
NumPy矩阵运算与线性代数计算

本专题整理 NumPy 矩阵运算与线性代数计算相关教程,覆盖矩阵乘法、dot 与 @ 运算符、逆矩阵、行列式、特征值与特征向量、SVD、线性方程组、欧氏距离、矩阵分解和大规模矩阵性能优化等内容,帮助读者掌握 np.linalg 与矩阵计算实战。

2026.09.21

0

20

NumPy广播机制数学运算与统计分析
NumPy广播机制数学运算与统计分析

本专题整理 NumPy 广播机制、数组数学运算与统计分析相关教程,覆盖广播规则、维度对齐、矩阵与数组加减除法、向量化计算、均值方差、分位数、中位数、直方图和 unique 频次统计等场景,帮助读者掌握 ndarray 高效计算与统计处理方法。

2026.09.21

0

17

NumPy数组创建索引切片与数据选择
NumPy数组创建索引切片与数据选择

本专题整理 NumPy 数组创建、索引、切片与数据选择相关教程,覆盖 np.array、zeros/ones、多维数组形状、基础切片、花式索引、布尔索引、条件筛选、视图与副本等常用场景,帮助读者系统掌握 ndarray 数据构造与高效提取方法。

2026.09.21

0

12

Aionclaw智能助手介绍
Aionclaw智能助手介绍

本专题汇总了AionClaw(AI龙虾助手)的功能介绍与在线使用入口。AionClaw是杭州趣猿人工智能有限公司推出的桌面级AI智能体,能直接在电脑上读写文件、运行脚本、操作浏览器,自动交付Word、PPT、Excel等成品。

2026.09.20

20

13

AionClaw AI智能体与电脑自动化任务执行功能使用教程
AionClaw AI智能体与电脑自动化任务执行功能使用教程

AionClaw专题整理AI智能体与电脑自动化相关功能使用教程,涵盖安装部署、AI任务执行、Skills技能、文件处理、浏览器控制、电脑操作、持久记忆、聊天工具连接以及办公、编程和内容创作等功能,帮助用户快速掌握AionClaw的实际使用方法。

2026.09.20

0

15

AI视频生成软件推荐
AI视频生成软件推荐

本专题汇总了当前主流的AI视频生成软件推荐与排行榜单,涵盖seko、AniShort、剧云、Lovart、LiblibAI及立刻mv等热门工具。同时整理了各软件在文生视频、图生视频、时长限制、画质表现及免费额度等方面的差异对比,助您快速选对适合创作需求的AI视频生成工具。

2026.09.16

200

9

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
热门推荐
/
最新课程
phpStudy极速入门视频教程
phpStudy极速入门视频教程

共6课时 | 54.6万人学习

独孤九贱(4)_PHP视频教程
独孤九贱(4)_PHP视频教程

共89课时 | 133.1万人学习