Question

当我在ST3中编辑JS文件时，可以选择一个字符串，按反引号，ST3会将选中的字符串用反引号引起来，与引号和反引号相同。但是，当源文件类型为Vue Component时，此方法将不起作用，而是由单个反引号代替所选字符串。

是否有任何方法可以将Vue Component的配置更改为与Javascript相同？

Answer 1

匹配字符自动配对以及将选定的文本按适当的对进行包装是按键绑定的功能，按键绑定被配置为仅通过使用按键绑定context才适用于特定情况。

例如，这是键绑定，它提供了以下功能：通过选择文本并按"将选定的文本用双引号引起来，您可以使用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 }
        ]
    },

这里的键绑定是说"字符应插入一个片段，其内容是用双引号引起来的选择内容； context说，只有在auto_match_enabled设置打开并且有选择的情况下，按键绑定才可用。

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

对于您要使用的键绑定，这些键绑定由随附的JavaScript软件包提供；您可以通过在命令面板中使用View Package File然后选择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（免责声明：我是视频作者）讨论了该主题。对于这里，足以知道，一般来说，您使用的显示范围越多，匹配就越具体，因此您通常需要顶级范围，对于您使用的Vue Syntax Highlight包，它是{{ 1}}。

如果使用上面的命令查看代码范围，您将看到Vue Component文件中text.html.vue标记内部的键绑定按预期工作，而无需执行任何操作；这是因为Vue语法嵌入了JavaScript语法以突出显示其中的代码。

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

<script>

在这里，您会发现，如果在光标位于字符串之一内部时查看范围，则该范围包含<li v-for="page in pages" :data-test="`page-link-${page}`" :key="page" :class="paginationClass(page)" @click.prevent="changePage(page);" >和默认的绑定触发器。但是，如果您选择字符串的全部内容（即，光标位于结束source.js字符上，则作用域不再包含"，并且不会触发绑定。从右向左选择文本而是将光标留在字符串内，这样绑定就可以了。

这有点拖累工作流程；最简单的处理方法是使用范围source.js，无论如何，该范围都将匹配Vue组件文件中的所有位置；因此更改的上下文行将是：

text.html.vue

您还可以使用范围{ "key": "selector", "operator": "equal", "operand": "text.html.vue" },，该范围仅与字符串的结尾text.html.vue punctuation.definition.string.end匹配，在这种情况下，将在选择字符串的全部内容时触发绑定。不利之处在于，即使选择了不应该使用JavaScript的属性文本，它也会触发。

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

走哪条路取决于您的工作流程以及最适合您的方式。

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

1 个答案: