Возвышенные сочетания клавиш для часто набираемого кода

Question

Я часто использую Sublime и обнаруживаю, что набираю много одинаковых фрагментов стандартного кода на очень регулярной основе

Например, что-то столь же обыденное, как

<div class="row">
</div>

Есть ли способ, которым я могу создать сочетание клавиш (то есть что-то вроде CTRL+r), чтобы ускорить это каждый раз?

Answer 1

Эта простая задача может быть решена без каких-либо дополнительных плагинов ("ванильный" Sublime Text) и с помощью плагина Emmet.

Ванильный возвышенный текст

Вы можете создавать фрагменты для повторяющихся шаблонов кода. Нажмите Инструменты → Новый фрагмент ..., откроется новый файл:

<snippet>
    <content><![CDATA[
Hello, ${1:this} is a ${2:snippet}.
]]></content>
    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
    <!-- <tabTrigger>hello</tabTrigger> -->
    <!-- Optional: Set a scope to limit where the snippet will trigger -->
    <!-- <scope>source.python</scope> -->
</snippet>

Вы можете ввести свой шаблон кода в блок CDATA:

(...)
    <content><![CDATA[
<div class="row">
    ${1:<!-- code goes here -->}
</div>
]]></content>
(...)

Затем раскомментируйте <scope> (Ctrl+/) и поместите в него text.html :

<scope>text.html</scope>

Теперь раскомментируйте <tabTrigger> и вставьте в него свою сокращенную фразу, например:

<tabTrigger>row</tabTrigger>

Наконец, сохраните файл. Sublime Text откроет окно Сохранить в своем каталоге User . Сохраните фрагмент или создайте свою собственную подпапку. Имя файла станет именем фрагмента. Расширение должно быть .sublime-snippet . В моем случае полный путь будет:

C:\Users\gronostaj\AppData\Roaming\Sublime Text 3\Packages\User\Bootstrap row.sublime-snippet

И вот полный фрагмент:

<snippet>
    <content><![CDATA[
<div class="row">
    ${1:<!-- code goes here -->}
</div>
]]></content>
    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
    <tabTrigger>row</tabTrigger>
    <!-- Optional: Set a scope to limit where the snippet will trigger -->
    <scope>text.html</scope>
</snippet>

Чтобы использовать его, просто откройте любой документ HTML, убедитесь, что для подсветки установлено значение HTML, введите row (сокращение от <tabTrigger> ) и нажмите клавишу Tab или Ctrl+Пробел. Sublime Text раскроет фрагмент:

Обратите внимание, что содержимое тега автоматически выделяется, потому что я настроил переменную шаблона. Вы можете добавить больше (например, ${2:...} , ${3:...}) и перемещаться между ними с помощью Tab. Повторное использование номеров переменных свяжет содержимое переменных (т. Е. Изменение его в одном месте повлияет на него везде).

муравей

Emmet - обязательный инструмент для каждого разработчика. Сначала вы должны установить пакет управления. Затем нажмите Ctrl+Shift+P в Sublime Text, введите install и нажмите Enter. Package Controll загрузит список доступных плагинов. Введите emmet и нажмите Enter, чтобы установить его. Прогресс будет отображаться в строке состояния. Затем перезапустите Sublime Text.

Emmet позволит создавать HTML с помощью селекторов CSS. Например, вы можете ввести .row в любом HTML-документе и нажать Tab, чтобы увидеть это:

<div class="row"></div>

С Эмметом вы можете сделать гораздо больше - попробуйте это:

aside.sidebar>.links>ul>li>a.sidebarLink[target=_blank]

Затем нажмите Tab и наблюдайте, как магия Эммета происходит на ваших глазах:

<aside class="sidebar">
    <div class="links">
        <ul>
            <li><a href="" class="sidebarLink" target="_blank"></a></li>
        </ul>
    </div>
</aside>