Окружающие галочки для исходных файлов Vue в Sublime Text 3? - PullRequest
Новая
       1

Окружающие галочки для исходных файлов Vue в Sublime Text 3?

0 голосов
/ 01 июля 2019

Когда я редактирую файл JS в ST3, я могу выбрать строку, нажать клавишу обратного удара, и ST3 окружит выбранную строку обратными чертами, так же, как это работает с кавычками и обратными ссылками. Но когда тип исходного файла Vue Component, это не работает, и вместо этого одиночный обратный удар заменяет выбранную строку.

Можно ли изменить конфигурацию так, чтобы она велась для Vue Component так же, как для Javascript?

1 Ответ

1 голос
/ 02 июля 2019

Автосопряжение совпадающих символов, а также упаковка выделенного текста в соответствующие пары - это функция привязок клавиш, которые настроены для применения только в определенных ситуациях с использованием привязки клавиш 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 из меню (или нажмите соответствующую клавишу, видимую в меню).Это покажет вам полный объем символа, на котором сидит курсор.

Полное обсуждение областей и их работы здесь выходит за рамки (мягко говоря, каламбур), но это видео (отказ от ответственности: я автор видео) идет по теме.Ибо здесь достаточно знать, что, вообще говоря, чем больше отображаемой области вы используете, тем более конкретным становится совпадение, поэтому вы обычно хотите область верхнего уровня, которая для пакета Vue Syntax Highlight , который вы используетеиспользуя is text.html.vue.

Если вы используете приведенную выше команду для просмотра области кода, вы увидите, что внутри тегов <script> в файле компонента Vue привязка клавиш работает, как и ожидалось, безнеобходимость что-либо делать;это связано с тем, что синтаксис 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 и триггеры привязки по умолчанию;однако, если вы выбираете все содержимое строки (то есть курсор находится на закрывающем символе ", область больше не содержит source.js, и привязка не срабатывает. Выбор текста справа налево вместо этого оставляет курсорсидя внутри строки, так что привязка будет работать.

Это немного перетаскивает рабочий процесс, самый простой способ справиться с этим - использовать область действия text.html.vue, которая будет соответствовать везде внутри Vue.файл компонента, не смотря ни на что, поэтому измененная контекстная строка будет: 

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

Вы также можете использовать область действия text.html.vue punctuation.definition.string.end, которая будет соответствовать закрывающему символу " только строки, и в этом случае привязка сработает, когда будет выбрано все содержимое строки. Недостатком является то, что он также будет срабатывать, даже если выбран текст атрибута, который не должен быть JavaScript.

В качестве альтернативы вы можете полностью удалить строку selector, и ваша пользовательская привязка сделает это в любом файле, который вы редактируете (если включена настройка auto_match_enabled).

Какой путь вы выберете, зависит от вашего рабочего процесса и от того, как все работает лучше для вас.

...