Sublime Text 3 中 Vue 源文件的周围反引号？

Question

当我在 ST3 中编辑 JS 文件时，我可以 select 一个字符串，按下反引号，ST3 将用反引号包围 selected 字符串，就像它使用引号和后备箱。但是当源文件类型为 Vue Component 时，这将不起作用，而是单个反引号替换 selected 字符串。

有什么方法可以更改配置，使 Vue Component 的行为与 Javascript 的行为相同？

Answer 1

Auto-pairing 匹配字符以及将 selected 文本包装成适当的对是键绑定的一个功能，这些键绑定被配置为仅在特定情况下通过使用键绑定应用 context.

例如，这是提供通过 selecting 文本并按 " 将 selected 文本用双引号括起来的功能的键绑定，您可以通过使用 Preferences > Key Bindings 并在左侧窗格中的默认绑定中搜索：

    { "keys": ["\""], "command": "insert_snippet", "args": {"contents": "\"${0:$SELECTION}\""}, "context":
        [
            { "key": "setting.auto_match_enabled", "operator": "equal", "operand": true },
            { "key": "selection_empty", "operator": "equal", "operand": false, "match_all": true }
        ]
    },

这里的键绑定是说 " 字符应该插入一个片段，其内容是用双引号引起来的 selection； context 表示键绑定仅在 auto_match_enabled 设置打开且有 selection.

时可用

默认绑定还包括其他类似的绑定，用于将内容括在括号中、插入配对字符等。

对于您询问的键绑定，这些键绑定由 JavaScript 包提供；您可以使用命令面板中的 View Package File 查看它们，然后 selecting JavaScript/Default.sublime-keymap 文件。

这个包提供了（截至撰写本文时）6 个绑定；您要使用的是第二个，如下所示：

    { "keys": ["`"], "command": "insert_snippet", "args": {"contents": "`${0:$SELECTION}`"}, "context":
        [
            { "key": "selector", "operator": "equal", "operand": "source.js - string" },
            { "key": "setting.auto_match_enabled", "operator": "equal", "operand": true },
            { "key": "selection_empty", "operator": "equal", "operand": false, "match_all": true }
        ]
    },

这与上面的默认值非常相似，但请注意 context 包含一个额外的项目，要求当前光标位置的范围 selector 与 source.js - string 相匹配要活跃。这就是将键绑定限制为仅在 JavaScript 文件中有效（特别是在字符串内部以外的任何地方）。

为了使这些绑定在您的 Vue 组件中处于活动状态，您需要将绑定从该文件复制到您的用户键绑定中，然后修改 selector 以便它与所在位置的范围匹配你想使用它。

您可以使用菜单中的 Tools > Developer > Show Scope Name 确定当前光标位置的范围（或按菜单中可见的相关键）。这将向您显示光标所在字符的完整范围。

范围及其工作方式的完整讨论超出了此处的范围（双关语意味温和）但是 this video (disclaimer: I am the video author) goes over the topic. For here it's enough to know that generally speaking the more of the displayed scope you use the more specific the match becomes, so you generally want the top level scope, which for the Vue Syntax Highlight 您正在使用的包是 text.html.vue.

如果您使用上面的命令查看代码范围，您将看到在 Vue 组件文件的 <script> 标记内，键绑定按预期工作，无需您执行任何操作；这是因为 Vue 语法嵌入了 JavaScript 语法来突出显示代码。

我不是 Vue 开发人员，但似乎也考虑了某些标签的属性 JavaScript，例如：

中的字符串

      <li
        v-for="page in pages"
        :data-test="`page-link-${page}`"
        :key="page"
        :class="paginationClass(page)"
        @click.prevent="changePage(page);"
      >

在这里您会发现，如果您在光标位于其中一个字符串内时查看作用域，则该作用域包含 source.js 和默认绑定触发器；但是，如果您 select 字符串的全部内容（即光标位于结束 " 字符上，范围不再包含 source.js 并且绑定不会触发。选择文本从右到左而不是让光标位于字符串内部，因此绑定将起作用。

这有点拖累工作流程；处理这个问题的最简单方法是使用范围 text.html.vue，无论如何它都会匹配 Vue 组件文件中的任何地方；因此，更改后的上下文行将是：

{ "key": "selector", "operator": "equal", "operand": "text.html.vue" },

您也可以使用范围 text.html.vue punctuation.definition.string.end，它将仅匹配字符串的结束 " 字符，在这种情况下，当字符串的全部内容为 select编辑。缺点是即使不应该是 JavaScript 的属性文本被 selected.

也会触发

或者您可以完全删除 selector 行，您的自定义绑定将在您碰巧编辑的任何文件中执行此操作（只要 auto_match_enabled 设置已打开）。

您选择哪种方式取决于您的工作流程以及最适合您的方式。

Sublime Text 3 中 Vue 源文件的周围反引号？

Surrounding backticks for Vue source files in Sublime Text 3?

sublimetext3