Cuando edito un archivo JS en ST3, puedo seleccionar una cadena, presione la tecla BackGTICK y ST3 rodeará la cadena seleccionada con los tickets, lo mismo que funciona con comillas y múltiples. Pero cuando el tipo de archivo de origen es Vue Component, entonces esto no funciona y, en cambio, el backgick único reemplaza la cadena seleccionada.

¿Hay alguna forma de cambiar la configuración para comportarse igual para Vue Component como lo hace para Javascript?

0
RSeidelsohn 1 jul. 2019 a las 11:32

1 respuesta

La mejor respuesta

El emparejamiento automático de caracteres correspondientes, así como la envoltura de texto seleccionado en pares apropiados, es una función de los enlaces clave que están configurados para aplicar solo en situaciones específicas mediante el uso de un enlace clave context.

Por ejemplo, esta es la unión clave que proporciona la funcionalidad para envolver el texto seleccionado en comillas dobles seleccionando el texto y presionando ", que puede ver utilizando Preferences > Key Bindings y buscando en los enlaces predeterminados en la izquierda cristal:

    { "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 }
        ]
    },

Aquí, la obligación clave está diciendo que el carácter " debe insertar un fragmento cuyo contenido es la selección envuelta en comillas dobles; El context dice que la encuadernación de teclas está disponible solo mientras la configuración auto_match_enabled se enciende y hay una selección.

Los enlaces predeterminados también incluyen otros enlaces similares para envolver las cosas entre paréntesis, para insertar el carácter emparejado, etc.

En el caso de los enlaces clave que está preguntando, esos enlaces clave son proporcionados por el paquete enviado JavaScript; Puede verlos usando View Package File de la paleta de comandos y luego seleccionando el archivo JavaScript/Default.sublime-keymap.

Hay (a partir del momento de esta escritura) 6 enlaces proporcionados por este paquete; El que quiere usar es el segundo, que se parece a esto:

    { "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 }
        ]
    },

Esto es muy similar al predeterminado anterior, pero tenga en cuenta que el context contiene un elemento adicional que requiere que el alcance selector en la posición actual de la posición del cursor se coincida con para estar activo. Esto es lo que restringe la unión clave para estar activa solo en los archivos JavaScript (y específicamente en todas partes, pero dentro de las cuerdas).

Para que estos enlaces se activen en sus componentes VUE, debe copiar los enlaces de este archivo en los enlaces de su clave de usuario y luego modifique el selector para que coincida con el alcance en el punto donde desea usarlo .

Puede determinar cuál es el alcance en la ubicación actual del cursor, utilizando Tools > Developer > Show Scope Name en el menú (o presione la tecla asociada, visible en el menú). Eso le mostrará el alcance completo del personaje que el cursor está sentado.

Una discusión completa de los ámbitos y cómo funcionan está fuera de alcance aquí (juego de palabras ligeramente destinado) pero este video (descargo de responsabilidad : Soy el autor de video) pasa por encima del tema. Porque aquí es suficiente para saber que, en general, el más del alcance mostrado utiliza más específico, la coincidencia se convierte, por lo que generalmente desea el alcance de nivel superior, que para el VUE Syntax Resaltar paquete que está usando es text.html.vue.

Si usa el comando de arriba para ver el alcance del código, verá que dentro de <script> etiquetas en un archivo componente VUE, la encuadernación clave funciona como se espera sin tener que hacer nada; Esto se debe a que la sintaxis VUE incorpora la sintaxis de JavaScript para resaltar el código allí.

No soy un desarrollador VUE, pero también aparece, ya que los atributos de algunas etiquetas también se consideran JavaScript, como las cuerdas en:

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

Aquí encontrará que si ve el alcance mientras el cursor está dentro de una de las cadenas, el alcance contiene source.js y los activadores de enlace predeterminados; Sin embargo, si selecciona el contenido completo de la cadena (es decir, el cursor está sentado en el carácter de cierre ", el alcance ya no contiene source.js y la unión no se desencadena. Seleccionando texto de derecha a izquierda En su lugar, deja el cursor sentado dentro de la cuerda, por lo que la unión funcionará.

Eso es un poco de arrastre de flujo de trabajo; La forma más fácil de manejar que sería usar el alcance text.html.vue, que coincidirá en todas partes dentro de un archivo de componentes VUE sin importar qué; Así, la línea de contexto alterada sería:

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

También puede usar el alcance text.html.vue punctuation.definition.string.end, que coincidirá con el primer carácter " de una cadena, en cuyo caso la enlace se activará la fijación cuando se seleccione todo el contenido de la cadena. El inconveniente allí es que también se activará incluso cuando se seleccione el texto de un atributo que se supone que se supone que debe ser JavaScript.

Alternativamente, puede eliminar por completo la línea selector y su encuadernación personalizada hará esto en cualquier archivo que debe editar (siempre que la configuración auto_match_enabled esté activada).

De qué manera vaya depende de su flujo de trabajo y cómo las cosas funcionan mejor para usted.

1
OdatNurd 2 jul. 2019 a las 17:15