Emmet模板,Emmet模板语言,IDEA教程,IDEA基础教程,IDEA高级教程,IDEA核心教程,IDEA破解教程,IDEA注册码免费,IDEA注册码失效,idea注册码,idea激活码,idea注册码在线生成,idea破解。

Emmet 的前身叫做 Zen Coding,是一个能大幅度提高前端开发效率的开发工具。

在 IDEA 中内置为 Emmet 代码模版,将模板扩展为标记,我们只需要输入其缩写然后按下扩展键或快捷键就可以了。

比如我在HTML文件中,键入:table > tr 4 > td 2,然后按下 Tab 键以获取一个4 x 2表的代码:

IDEA 中如何使用 Emmet 模板语言

Emmet 模版设置

Windows 点击菜单栏 File -> Settings -> Editor -> Emmet

Mac 点击菜单栏 IntelliJ IDEA --> Preferences... --> Editor --> Emmet,打开 Emmet 模版设置。

1、For HTML

  • Enable Enable XML/HTML Emmet,此选项表示是否启用对 XML 和 HTML 的 Emmet 支持。
  • Enable abbreviation preview,此选项表示是否让 IDEA 在实际展开之前显示一个带有输入缩写预览的弹出窗口。

IDEA 中如何使用 Emmet 模板语言

  • Enable automatic URL recognition while wrapping text with a tag,此选项表示是否在使用 a 标记包装 URL 地址时,IDEA 自动将 URL 地址<a href=""></a>括起来并将光标定位在href属性中的双引号内。

IDEA 中如何使用 Emmet 模板语言

IDEA 中如何使用 Emmet 模板语言

  • Add edit point at the end of template,此选项表示编辑位置会添加到 HTML 模板 ($END$) 的末尾或者不会添加新的编辑点。

IDEA 中如何使用 Emmet 模板语言

  • BEM :为类名、修饰符和短元素指定 BEM 分隔符。

IDEA 中如何使用 Emmet 模板语言

2、For CSS

  • Enable CSS Emmet,此选项是否为CSS样式表启用 Emmet 支持。
  • Enable fuzzy search among CSS abbreviations,此选项是否根据可用模板名称对每个未知缩写进行评分。得分最高的匹配将用于解析模板。
  • Enable expansion of unknown properties ('unknown' to 'unknown:;')
  • 勾选该选项则任何输入的单词都将扩展为同一个单词,后跟冒号和分号。
  • 不勾选则只有已知属性(例如color)才会以这种方式展开color:;
  • Auto insert CSS vendor prefixes,此选项勾选则表中列出的 CSS 属性将扩展为包含前置供应商前缀的结构,不勾选则禁用整个属性表。

IDEA 中如何使用 Emmet 模板语言

3、For JSX

  • Enable JSX Emmet,勾选改选项可在上下文的 XML 片段中使用 Emmet。

IDEA 中如何使用 Emmet 模板语言

关于IDEA中如何使用 Emmet 模板语言就讲到这里了。

想了解更多idea的“骚操作”,请查看:IDEA教程

标签: idea破解, idea激活码, Intellij IDEA, Emmet 模版, IDEA教程, idea注册码, idea注册码失效, idea注册码在线生成, idea破解教程, IDEA注册码免费, IDEA基础教程, IDEA高级教程, IDEA核心教程, Emmet模板语言

添加新评论