Выберите медиа запрос и содержание в Sublime Text - PullRequest
Новая
       7

Выберите медиа запрос и содержание в Sublime Text

0 голосов
/ 09 марта 2020

Есть ли способ выбрать каждый медиа-запрос и его содержимое, используя Sublime Text 3? Например, у меня есть файл CSS с большим количеством запросов @media print, я бы хотел выбрать все из них И содержимое в одном go. 

  @media print {
      .app-contact-panel__heading,
       .app-prose-scope h3 {
          font-size: 18pt;
          line-height: 1.15;
    }
   }

Я знаю, что могу выбрать один @media print и нажмите CMD + D, чтобы выбрать следующий. Или CTRL + CMD + D, чтобы выбрать все @media print в do c, но ни один из них также не выбирает свойства?

Кто-нибудь может помочь?

1 Ответ

3 голосов
/ 10 марта 2020

Один из способов сделать это - через плагин. Следующий плагин выделяет все содержимое тех медиазапросов, которые начинаются с @media print {

import sublime
import sublime_plugin

class HighlightMediaQueryCommand(sublime_plugin.TextCommand):

    def run(self, edit):
        # This finds all the regions that are @media print { 
        media_regions = self.view.find_all(r"@media print {")

        # This will clear the current Selection object.
        self.view.sel().clear()

        # We now add the region corresponding to the opening bracket of each media print query.
        for regions in media_regions:
            self.view.sel().add(sublime.Region(regions.end(), regions.end()))

        # Next, we move the selection to the end of the brackets. 
        self.view.run_command("move_to", { "to": "brackets" })

        # Now that we have access to the closing bracket of each media print query, we can construct the Region object for all media print queries with their contents also.
        for i, sel in enumerate(self.view.sel()):
            self.view.sel().add(sublime.Region(media_regions[i].begin(), sel.end() + 1))


    def is_enabled(self):
        # Enable the command to work only in a CSS file.
        return self.view.settings().get("syntax") == "Packages/CSS/CSS.sublime-syntax"

Чтобы использовать этот плагин, вам нужно сохранить этот код в файле .py в * Каталог 1006 * (от go до Preferences -> Browse Packages ... через верхнее меню). После сохранения вы можете использовать этот плагин одним из следующих способов: -

  1. Самый быстрый и простой способ - просто набрать view.run_command("highlight_media_query") на возвышенном консольном вводе и нажать клавишу ввода, пока вы находятся в нужном файле css (для доступа к консоли нажмите ctrl / cmd + `).

  2. Если вы делаете это очень часто, вы можете привязать его к сочетанию клавиш. Для этого вам нужно будет создать файл .sublime-keymap в каталоге User (имя файла раскладки клавиатуры не имеет значения, хотя, как правило, оно обычно хранится Default (os).sublime-keymap, где os = Windows, Linux or OSX в зависимости от вашей ОС). Затем вставьте следующее (связывание ключей по вашему выбору, оно может быть любым, если оно не противоречит существующим): - 

[
    { "keys": ["ctrl+alt+m"], "command": "highlight_media_query" }
]

Выполнение этого & При нажатии на указанную привязку ключа (необходимо открыть указанный файл css) теперь следует выбрать все @media print запросов.

...