Sublime Text editor的Emmet 2

这是Emmet插件的下一个版本，具有极大的开发体验改进和新功能。以下是更多详细信息的阅读。插件目前处于beta阶段，可能存在错误。

• 功能
• 安装
• 扩展缩写
  • JSX支持
  • CSS支持
  • 禁用缩写捕获
• 标签预览
• 添加自定义Emmet代码片段
• 更多操作
• 关于从版本1迁移的常见问题解答
• 开发

Emmet是一款用于提升HTML和CSS代码编写的Web开发人员工具包。

使用Emmet，您可以输入表达式（缩写），类似于CSS选择器，并通过单次按键将其转换为代码片段。例如，以下缩写

ul#nav>li.item$*4>a{Item $}

…可以被扩展为

<ul id="nav">
    <li class="item1"><a href="">Item 1</a></li>
    <li class="item2"><a href="">Item 2</a></li>
    <li class="item3"><a href="">Item 3</a></li>
    <li class="item4"><a href="">Item 4</a></li>
</ul>

功能

• 熟悉的语法：作为Web开发人员，您已经知道如何使用Emmet。缩写语法类似于CSS选择器，具有id、class、自定义属性、元素嵌套等的快捷方式。
• 动态代码片段：与默认编辑器代码片段不同，Emmet缩写是动态的，并且按您输入的方式解析。无需为每个项目预定义它们，只需键入MyComponent>custom-element即可将任何单词转换为标签。
• CSS属性快捷方式：Emmet提供CSS属性的特定语法和内嵌值。例如，bd1-s#f.5将转换为border: 1px solid rgba(255, 255, 255, 0.5)。
• 适用于多数流行的语法：使用单个缩写以生成针对HAML、Pug、JSX、SCSS、SASS等最流行的语法代码。

了解更多关于Emmet功能的详细信息

安装

1. 从命令面板运行Package Control: Install Package命令。
2. 在打开的软件包列表中，找到Emmet软件包并安装它

如果在最后一步找不到 Emmet 软件包或已安装的包无法按预期工作，请重新启动 Sublime Text 并重试。

扩展缩写

如果您使用了 以前的 Emmet 插件版本，您应该已经知道如何扩展缩写：键入类似 ul>li.items*4 的内容，然后按下 Tab 键或 Ctrl-E。虽然这种方法通常有效，但它有许多缺点。

• Tab 键被占用：Emmet 将 Tab 键绑定到缩写扩展，因此用户无法插入 Sublime Text 的原生片段或在不使用缩写的情况下插入制表符，因为几乎每个词都可能被用作 Emmet 的缩写。
• 无法预览扩展后的缩写：编写复杂的缩写将成为试错的过程，涉及展开/撤消/展开操作。
• 不可预测的结果：按下 Tab 键时，无法确定将发生什么，它可能是扩展缩写、插入原生片段或仅输出制表符。

在这个插件中，缩写扩展器充当 自动完成提供者，并在您键入时自动捕获缩写。

当您在 Emmet 支持的上下文中开始键入（HTML、CSS、Slim 等）时，Emmet 会检测您是否键入了类似于缩写的文本，并添加下划线以指示 捕获的缩写。当捕获的缩写变为 复杂（例如，包含属性或多个元素）时，每次光标位于其内部时都会显示展开后的缩写预览。在 捕获的缩写内部 按下 Tab 键来展开它，按下 Esc 来从缩写中移除标记，以便您可以使用 Tab 来扩展原生的 ST 片段或插入制表符。

如果您在文档中已经有了缩写，并想展开它，请将光标移动到缩写的末尾，然后调用自动完成（《Ctrl+Space》为默认快捷键）以捕获缩写。

JSX支持

确保您的文档语法设置为 JSX，而不是 JavaScript。

在 JSX 中编写 Emmet 缩写有些棘手：在这种情况下，您通常会期望使用 Tab 键扩展原生 Sublime Text 片段，并且只对特定上下文使用 Emmet。因此，对每个变量或片段进行默认缩写捕获将烦扰您。

为了解决这个问题，Emmet 在 JSX 中使用 带前缀的缩写：它只有在缩写以特定符号（默认为 <）为前缀时才会捕获和展开缩写。

Emmet 检测 JSX 中的驼峰式模块表示法：Foo.Bar 将展开为 <Foo.Bar></Foo.Bar>，而不是 <Foo className="Bar"></Foo>。表达式属性也受支持：``。

CSS支持

在 CSS 中，Sublime Text 默认具有略有不同的自动完成行为：默认显示完成项，并且不会在您继续键入时重新填充完成列表，这阻止了 Emmet 确正地构建动态完成。为了克服这个问题，Emmet 在光标之后显示缩写预览作为 幻影。

如果您不喜欢 CSS 中的内联预览，可以仅对 CSS 禁用它。

• 转到 首选项 > 包设置 > Emmet > 设置 菜单项。
• 将 abbreviation_preview 选项设置为 "markup"，例如 "abbreviation_preview": "markup"。这将只为标记语法（HTML、XML、JSX 等）启用预览。
• 您还可以通过将 abbreviation_preview 的值设置为 false 来完全禁用预览。

在 Emmet 2 中，CSS 缩写通过动态颜色片段得到增强：例如，您可以键入 #f.5 来快速获取 rgba(255, 255, 255, 0.5)。

禁用缩写捕获

为了微调自动缩写捕获，请转到 首选项 > 包设置 > Emmet > 设置 菜单项并更新 auto_mark 选项

• 将值设置为 false 以完全禁用缩写捕获。
• 将值设置为 "markup" 或 "stylesheet" 以仅对标记（HTML、XML、JSX 等）或样式表（CSS、SCSS、LESS 等）语法启用捕获。

例如，如果您想对 HTML 启用缩写捕获并禁用 CSS，则将 "auto_mark": "markup" 设置。您还可以将相同的值应用于 abbreviation_preview 选项来完全启用/禁用交互式预览或仅针对特定语法启用。

禁用缩写捕获时，您有多种手动展开缩写的方法

• 您可以键入缩写（或将光标放在现有缩写之后）并从命令面板运行 Emmet: Expand Abbreviation 操作。建议为此操作设置 键盘快捷键

// Put this code snippet into your .sublime-keymap file
// and modify `keys` value with desired shortcut
{
    "keys": ["ctrl+e"],
    "command": "emmet_expand_abbreviation"
}

• 另一种选择是运行 Emmet: Enter Abbreviation Mode 命令：标记 ⋮> 表示您处于 显式缩写模式，并且您输入的每个字符都将被视为有效的Emmet缩写。然后可以通过按 Tab 或 Enter 键来展开它，按 Esc 键来取消。

建议也为此操作添加键盘快捷键

// Put this code snippet into your .sublime-keymap file
// and modify `keys` value with desired shortcut
{
    "keys": ["ctrl+."],
    "command": "emmet_enter_abbreviation"
}

标签预览

Emmet 2的另一个新功能是对开标签的行内预览。当您将光标移动到 闭合标签的名称 内部，且其匹配的开标签 未显示在屏幕上 时，您将看到一个行内标签预览

单击此预览将跳转至开标签。

此选项默认为禁用状态。要启用它，请转到 首选项 > 插件设置 > Emmet > 设置 并将 tag_preview 选项设置为 true。

添加自定义Emmet代码片段

要添加新的Emmet片段或修改现有的片段，调整核心Emmet首选项等，请转到 首选项 > 插件设置 > Emmet > 设置 并修改 config 键。

您可以为全局或特定语法配置片段/首选项。Emmet支持两种类型的缩写：markup（用于HTML、Pug、JSX等标记语法）和stylesheet（用于CSS、Sass、Less等）。为了全局添加或修改片段，您应该在config部分使用以下键之一。如果只想为特定语法设置片段（例如，只为JSX或HTML），则应使用语法名称作为键。以下是一个示例配置

{
    "config": {
        // Use "markup" key to specify global snippets/options for all markup
        // syntaxes like HTML, XML, JSX, Pug
        "markup": {
            // Snippets are just aliases for Emmet abbreviations
            // Check out default snippets:
            // https://github.com/emmetio/py-emmet/blob/master/emmet/snippets/html.py
            "snippets": {
                "foo": "ul.foo>li.foo-item*4"
            },

            // Add options to fine-tune Emmet,see all available options here:
            // https://github.com/emmetio/emmet/blob/master/src/config.ts#L79
            "options": {
                "output.tagCase": "upper"
            }
        },

        // Configure snippets/options for HTML syntax only.
        // For a list of supported syntaxes, check out keys of `syntax_scopes`
        // dictionary of `Emmet.sublime-settings`
        "html": {
            "snippets": {
                "myhtml": "main.my-html>section"
            }
        },

        // Use "stylesheet" key to configure all stylesheet syntaxes like CSS, SCSS,
        // Sass etc.
        "stylesheet": {
            // Stylesheet snippets are either aliases to CSS properties with
            // optional values or any arbitrary text.
            // Check out default snippets:
            // https://github.com/emmetio/py-emmet/blob/master/emmet/snippets/css.py
            "snippets": {
                "foo": "foo-bar"
            },

            // You can also set options here:
            // https://github.com/emmetio/emmet/blob/master/src/config.ts#L79
            "options": {
                "stylesheet.shortHex": false
            }
        },

        // Configure snippets/options for CSS syntax only.
        // For a list of supported syntaxes, check out keys of `syntax_scopes`
        // dictionary of `Emmet.sublime-settings`
        "css": {
            "snippets": {
                "prop": "some-prop:${value}"
            }
        }
    }
}

更多操作

所有其他操作，如 用缩写包裹、配平、选择项目 等，也得到支持，但没有默认键位绑定。您可以通过命令面板调用这些操作，或创建自己的键盘快捷键（见Default.sublime-commands文件，了解更多可用的操作）。

为Emmet命令添加键位绑定的一种方便的方法是转到 首选项 > 插件设置 > Emmet > 快捷键 菜单，并将左边的必需示例绑定复制到右边，去除注释。

在未来，Sublime Text的Emmet插件将为精细调整Emmet选项和键位绑定提供便捷的UI。

关于从版本1迁移的常见问题解答

以下是用户在更新到Emmet v2后提出的一些常见问题和问题

我的所有键盘快捷键都消失了/什么都不起作用！

Emmet包含大量操作，如用缩写包裹、配平、选择项目 等。在v1中，所有这些操作都有默认键位绑定。其中一些操作会覆盖默认ST操作，例如转到行尾（Ctrl+E）或来自默认包的操作。不幸的是，ST不提供任何方法来取消绑定来自包的键位绑定，因此用户在恢复编辑器行为方面遇到了真正的问题。

在Emmet 2中，所有键位绑定默认为禁用状态，因此您需要手动添加它们。但请放心，您只需取消注释即可。

• 转到 首选项 > 插件设置 > Emmet > 快捷键 菜单项。
• 在左侧，您将看到一个示例，带有注释的Emmet操作列表。您只需将所需的操作复制到右侧并取消注释即可。

Tab 键不再工作

很可能会，您已经更新了您的键绑定文件中针对 Emmet v1 的 expand_abbreviation_by_tab 操作的 Tab 键处理器：简单移除它，它已不再有效。

我不喜欢新的缩写捕获行为，我想要像以前一样使用 Tab 展开

您可以获取与 v1 几乎相同的缩写展开行为

• 转到菜单项 偏好设置 > 插件设置 > Emmet > 设置 并将 auto_mark 选项设置为 false。
• 将以下内容添加到用户键绑定文件中（偏好设置 > 键绑定 菜单项）

{
    "keys": ["tab"],
    "command": "emmet_expand_abbreviation",
    "args": { "tab": true },
    "context": [
        { "key": "emmet_capture_abbreviation" },
        { "key": "selection_empty" },
        { "key": "has_next_field", "operand": false },
        { "key": "auto_complete_visible", "operand": false },
        { "key": "selector", "operand": "source.css, source.sass, source.less, source.scss, source.stylus, source.postcss, source.jade, text.jade, source.pug, text.pug, text.slim, text.xml, text.html - source, text.haml, text.scala.html, source string" }
    ]
}

注意，旧行为有很多缺点：您将无法使用原生 ST 片段展开，并且无法使用 Tab 键在单词后插入缩进。

开发

要使用插件源代码，请确保忘记安装 py-emmet。检出源代码后，转到仓库目录并运行

pip install -r requirements.txt -t .