Вышел Emmet 2 для Sublime Text — Разработка на vc.ru
После нескольких месяцев активной разработки, я хотел бы объявить о новой версии плагина Emmet для Sublime Text!
2020 просмотров
tl;dr: новый Emmet намного быстрее, меньше и лучше. Он не выламывает клавишу Tab, обеспечивает интерактивный предварительный просмотр расширенной аббревиатуры и имеет улучшенную поддержку JSX. Новый плагин находится в стадии бета-версии и должен быть установлен из внешнего репозитория. И если вам нравится Emmet, пожалуйста, поддержите его через Спонсоров GitHub: он помогает мне поддерживать проект дальше.
8 лет назад была выпущена первая версия Emmet, ставшая одним из самых скачиваемых пакетов для редактора Sublime Text. В те дни, когда Эммет был новеньким, я старался поддерживать как можно больше редакторов. Поскольку большинство редакторов расширено с помощью JavaScript, я хотел повторно использовать существующую JS-кодовую базу для Sublime Text, которая расширена с помощью Python.
Хотя это решение позволило мне реализовать плагин Sublime Text довольно быстро и (теоретически) облегчить дальнейшую поддержку плагина, у него было слишком много недостатков:
1) он требовал отдельной загрузки большого двоичного файла PyV8;
2) запуск JS внутри Python привел к значительному снижению производительности и стабильности;
3) это не позволяет глубже интегрироваться с возможностями Sublime Text.
Новая кодовая база Emmet — это полное переосмысление архитектуры и того, как пользователи должны взаимодействовать с расширениями.
Играйте приятно с клавишей Tab
Почти все пользователи хотят расширить аббревиатуру Emmet с помощью клавиши Tab, как и обычные фрагменты. Проблема заключается в том, что простая привязка клавиши Tab к действию Expand Emmet Abbreviation (Расширение аббревиатуры Эммета) не позволяет пользователям использовать нативные фрагменты. Более того, это разбивает другие важные функции редактора, такие как отступ, переход к следующему табулятору и т.
В плагине Emmet 2 используется новая парадигма, называемая захватом аббревиатуры. Когда вы начинаете вводить слово (в принципе, любое слово может быть аббревиатурой!), Emmet начинает его отслеживать (отображается как тонкое подчеркивание). Таким образом, подчеркнутое слово означает, что Emmet может расширить его как аббревиатуру: просто нажмите Tab, чтобы сделать это!
Если вы просто вводите обычный текст, то, скорее всего, вы введете некоторую некорректную аббревиатуру, например, пробел или запятую: при этом в конце захваченной аббревиатуры она будет автоматически сброшена, как будто ничего не случилось. Или просто нажмите клавишу Esc, чтобы принудительно сбросить аббревиатуру, и используйте клавишу Tab, чтобы развернуть фрагменты или вставить отступ.
Но самое интересное заключается в том, что когда аббревиатура становится сложной (содержит более одного элемента), вы увидите расширенный просмотр аббревиатуры, который обновляется в реальном времени при редактировании аббревиатуры:
Помните, что Emmet расширяет аббревиатуру по клавише Tab только в том случае, если она захвачена (имеет едва уловимое подчёркивание)! В противном случае клавиша Tab действует нормально.
Автозаполнение провайдера
Emmet также выступает в качестве провайдера автозавершения: если у вас уже есть аббревиатура в редакторе и вы хотите ее развернуть, переместите каретту в конце аббревиатуры и вызовите всплывающее окно автозавершения (по умолчанию Ctrl-Space):
Обратите внимание, что по умолчанию Sublime Text вставляет единичное завершение (например, немедленно расширяет аббревиатуру). Если вы хотите захватить аббревиатуру и продолжить ее редактирование с помощью интерактивного предварительного просмотра, запустите новый Emmet: Действие «Захват аббревиатуры».
Улучшенная поддержка JSX
Убедитесь, что синтаксис вашего документа в Sublime Text установлен на JSX, а не на JavaScript.
Поскольку любое слово может быть аббревиатурой Эммета, захват его таким же образом, как и в HTML, вызовет слишком много отвлекающих моментов при написании обычного JavaScript. Чтобы решить эту проблему, в JSX необходимо явно префиксовать аббревиатуру с < символом:
Кроме того, у Эммета есть некоторые внутренние улучшения для JSX:
Обнаружение нотации модуля на верблюжьей упряжке: Foo.
Bar будет расширен до вместо ;
Атрибуты выражения: div[class={getClass(‘foo’)}].
Поддержка CSS
В CSS, Sublime Text использует немного другое поведение автозавершения: он отображает завершения по умолчанию и не перезаполняет список завершений по мере того, как вы набираете далее, что не позволяет Emmet построить правильное динамическое завершение. Чтобы преодолеть эту проблему, Emmet отображает предварительный просмотр аббревиатуры сразу после caret в качестве phantom:
В Emmet 2 аббревиатуры CSS расширены динамическими цветными фрагментами: вы можете набрать, например, #f .5, чтобы быстро получить rgba(255, 255, 255, 0.5).
Просмотр тегов
Еще одна новинка Emmet 2 — встроенный предварительный просмотр открывающего тега. При перемещении каретты внутри названия закрывающего тега, а его соответствие открывающему тегу не видно на экране, вы увидите встроенный просмотр тега:
Нажмите на этот предварительный просмотр, чтобы перейти к открытию тега.
Больше действий
Все остальные действия, такие как «Обертка с аббревиатурой», «Баланс», «Выделить элемент» и т.д. также поддерживаются, но не имеют привязки клавиш по умолчанию: это создало слишком много проблем для новых пользователей, когда Emmet переопределяет действия из других плагинов. Вы должны либо вызывать эти действия через командную палитру, либо создавать свои собственные сочетания клавиш (список доступных действий см. в файле Default.sublime-commands).
Последний плагин Sublime Text предоставит веб-интерфейс для тонкой настройки опций Emmet и привязки клавиш.
Установка
Пожалуйста, сначала удалите старый плагин Emmet, иначе новый плагин не будет работать.
Новый плагин Emmet находится в стадии бета-версии и вскоре заменит старый плагин в Package Control. Если вы хотите попробовать новый плагин, вам необходимо установить его из внешнего репозитория:
В Sublime Text, откройте командную строку, найдите и запустите Package Control: Add Repository command: Add Repository.
Введите следующий URL в диалог и нажмите Enter: https://github.com/emmetio/sublime-text-plugin/releases/latest/download/registry.json
Из командной строки, запустите управление пакетами: Установить команду пакета.
В списке открытых пакетов найдите пакет Emmet2 и установите его.
Если на последнем шаге вы не можете найти пакет Emmet2 или установленный пакет не работает, перезапустите Sublime Text и повторите попытку.
Emmet нуждается в вашей поддержке! 🎉
Emmet — бесплатный проект с открытым исходным кодом, разработанный одним человеком в свободное от работы время. Мне очень сложно поддерживать проект такого масштаба и популярности, но при этом платить по счетам.
Если вы считаете Emmet полезным для вас или вашей компании, или вы хотите поддержать нового редактора или будущее, пожалуйста, рассмотрите возможность спонсорства проекта через Спонсоров GitHub! Каждое пожертвование заставляет меня меньше беспокоиться о деньгах и концентрироваться на возможностях и улучшениях Emmet.
Оригинал:
Перевод:Федоров Матвей
Еще больше интересной информации по программированию вы можете найти в нашем Телеграмм-канале по ссылке:
https://t.me/metsolution
Как закомментировать в sublime text 3
В Sublime Text 3 не могу закомментировать код. Пробую CTRL + / не реагирует. EMMET установлен. В чем может быть причина?
Знаете кого-то, кто может ответить? Поделитесь ссылкой на этот вопрос по почте, через Твиттер или Facebook.
Посмотрите другие вопросы с метками html sublime-text-3 emmet или задайте свой вопрос.
Похожие
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
дизайн сайта / логотип © 2019 Stack Exchange Inc; пользовательское содержимое попадает под действие лицензии cc by-sa 4.0 с указанием ссылки на источник. rev 2019.11.15.35459
Выделение
Поиск
Блоки кода
Вкладки
Emmet (плагин)
Текст
Строки
Переходы
Курсор
Внешний вид
Разное
Ряд комбинаций могут быть заняты в ОС (особенно в OS X) или переопределены плагинами.
Любые горячие кнопки можно переназначить самому.
Дополнения, сообщения об ошибках и лучи любви — в репозиторий.
Как переназначить кнопки
Горячие кнопки настраиваются редактированием файла с пользовательскими настройками (он имеет более высокий приоритет, чем файл с настройками по умолчанию). Под редактированием подразумевается копирование-вставка из файла с настройками по умолчанию и, возможно, смена самих кнопок.
Горячие кнопки задаются так:
- «keys» — собственно, комбинация кнопок.
- «command» — команда Sublime Text или плагина.
Пользовательские настройки горячих кнопок находятся в Preferences → Key Bindings – User
Настройки горячих кнопок самого Sublime Text по умолчанию находятся в Preferences → Key Bindings – Default
Горячие кнопки плагинов можно посмотреть в файлах плагинов. К примеру, для Emmet кнопки по умолчанию описаны в Preferences → Package Settings → Emmet → Key Bindings – Default
в Sublime Text 2 можно было закомментировать строку или блок строк с помощью Ctrl + / и Ctrl + Shift + / .
Согласно меню Edit > Comment эти ярлыки должны быть действительны, но в Sublime Text 3 (build 3047) они больше не работают. Кто-нибудь знает правильные сочетания клавиш по умолчанию для Linux и macOS? Или это ошибка?
21 ответ:
в качестве обходного пути перейдите к Preferences -> Key Bindings – User и добавьте эти привязки клавиш (Если вы используете Linux):
обновление: это также работает на Windows 8 (см. комментарий @Sosi)
вы можете добавить следующие строки в Настройки / горячие клавиши пользователя:
вот как я разобрался с проблемой – заменив «ctrl» на «control» и «/» на «keypad_divide».
это проблема интернационализации клавиатуры.
на стандартной американской QWERTY-клавиатуре, используемой в Австралии, где производится Sublime Text, / вполне доступна:
это не относится ко многим другим клавиатурам. Возьмем для примера немецкий латинскими буквами клавиатуры. Один должен ударить SHIFT + 7 и / . Вот почему комментирование не работает должным образом на них клавиры.
изменение привязки клавиш пользователя к тем, которые перечислены ниже, будет работать для немецкой клавиатуры QWERTZ.
Если проблемы возникают с еще другой раскладкой клавиатуры, измените привязки клавиш соответственно.
U может исправить эту ошибку:
Это позволит комментария CTRL + / и CTRL + SHIFT + / и вы можете использовать / на клавиатуре =)
Это работает для меня.
Я на Mac OS X El Capitan. Sublime Text 3 (стабильная сборка 3114).
на OSX Yosemite, я исправил это, перейдя System Preferences , Keyboard , потом Shortcuts . Под App Shortcuts отключить Show Help menu который был обязан CMD + SHIFT + 7 .
моя раскладка клавиатуры норвежская, с английским языком в качестве языка ОС.
Это проще, чем вы думаете пресс cmd + / в mac.
Я тоже под Linux. Для меня это работает только тогда, когда я нажимаю CTRL + SHIFT + / , и это похоже на один комментарий, а не комментарий блока. Причина в том, чтобы acceed / характер, я должен нажать SHIFT , если я этого не сделаю, sublime text обнаруживает, что я нажал CTRL + : .
Вот это мое решение, чтобы вернуть нормальные предпочтения. Пишите в Key Bindings – User :
для бразильских клавиатур ABNT вы делаете Ctrl + ; чтобы прокомментировать и повторить его, чтобы удалить комментарий.
в моей клавиатуре ноутбука, ABNT 2, я могу использовать CTRL + ; ярлык как действие комментария по умолчанию для блоков и строк. Тот же ярлык для раскомментирования.
убедитесь, что файл является признанным типа. У меня был открытый файл yaml (без него .расширение файла yaml) и Sublime Text распознали его как обычный текст. Простой текст не имеет метода комментариев. Переключение типа файла на YAML заставило работать ярлык комментария.
на MAC вместо shift используйте ALT такой CMD + ALT + /
была та же проблема. Проверьте с возвышенным.log_input (True) команда на консоли, чтобы увидеть, какие ключи обнаруживаются с помощью CTRL + / и SHIFT + CTRL + / shorcuts. Затем замените ярлыки на те. (Изменение / для keypad_divide работал для меня)
Sublime 3 для Windows:
Добавить теги комментариев -> CTRL + SHIFT + ;
Вся строка становится строкой комментария -> CTRL + ;
в случае, если у кого-то были дополнительные проблемы с Sublime 3 на Windows 7, все вышеперечисленные предложения не работали для меня.
Однако, когда я 1-повторно запустил приложение как администратор и 2-выделил и выбрал Edit – > Comment – > toggle comment, впоследствии я смог использовать привязку пользовательских настроек для переключения комментариев. У меня действительно нет объяснения, почему это сработало, за исключением того, что это произошло.
откройте sublime Text 3 и перейдите в меню настроек и нажмите на привязки клавиш затем вставьте этот код, чтобы сделать комментарий ярлык с CTRL + D .
затем сохранить его. теперь вы можете использовать ярлык.
в windows используйте Ctrl + Shift + ? . Вы сможете прокомментировать HTML.
Sublime Text 4 — установка, русификация, emmet, активация
Автор Алексей На чтение 4 мин Просмотров 7к. Опубликовано Обновлено
В данном уроке мы разберем где и как скачать редактор кода Sublime Text 4, как его установить на windows и русифицировать его меню, также активируем его при помощи License Key и установим на него Emmet.
Содержание
- Скачать Sublime Text 4
- Установка Sublime Text 4
- Русификация Sublime Text 4
- Альтернативный вариант русификаций
- Установка Emmet на sublime text 4.
- В трех словах, о том, как работает Эммет
- Активация Sublime Text 4
Скачать Sublime Text 4
Скачать Сублайн текст 4, вы можете с оф сайта sublimetext.com/download, не советую скачивать с сомнительных источников.
Установка Sublime Text 4
Установить Сублайн текст 4 очень просто, для этого его достаточно запустить и щелкать по кнопке далее (next), на этом останавливаться не буду, думаю с этим проблем не возникнет.
Русификация Sublime Text 4
В четвертой версии саблайна уже есть русский язык, его нужно только включить, для этого.
1. Открываем редактор и переходим в пункт меню «Tools» — «Install Pakage Control…» для установки менеджера пакетов (либо нажимаем сочетание клавиш «Ctrl+Shift+P» в поисковом поле находим «Install Pakage Control» и нажимаем «Enter»).
Если менеджер пакетов уже установлен (данного пункта в меню не будет), то переходим в пункт №3.
2. После установки менеджера пакетов появится уведомление, просто нажимаем «ОК».
3. Далее вновь зажимаем на клавиатуре одновременно клавиши «Ctrl+Shift+P» и находим в поисковом поле «Package Control: Install Package», после чего нажимаем «Enter» (или выбираем из списка кликом мыши).
4. Появится новое поле, в котором нужно ввести и найти «LocalizedMenu», далее жмём «Enter» или кликаем мышкой и ждём установки пакета (статус установки можно увидеть снизу, слева).
5. Затем открываем пункт меню «Preferences» — «Languages» — «Русский (ru)».
6. Смотрим интерфейс программы Sublime Text 4, теперь все на русском языке.
Альтернативный вариант русификаций
Скачиваем пакет локализации с github. Открываем архив и распаковываем его содержимое в «c:\Users\Имя_пользователя\AppData\Roaming\Sublime Text\Packages\» (Путь для Windows 7/8/10).
Идем в «c:\Users\Имя_пользователя\AppData\Roaming\Sublime Text\Packages\» и переименовываем LocalizedMenu-master в LocalizedMenu
После чего можно менять локализацию, см. пункт 6.
Установка Emmet на sublime text 4.
У вас должен быть установлен Package Control, см. выше пункты 1-3.
Зажимаем на клавиатуре одновременно клавиши «Ctrl+Shift+P» и находим в поисковом поле «Emmet», после чего нажимаем «Enter» (или выбираем из списка кликом мыши).
Ждем немного, пока не откроется вкладка с содержимым, что Эммет успешно установлен, закрываем все вкладки и перезапускаем редактор. Все можно пользоваться!
В трех словах, о том, как работает Эммет
Приведу несколько примеров для Emmet. Допустим нам нужно базовый каркас веб-страницы на html5, для этого достаточно ввести «!» и нажать «Tab».
Чтобы быстро построить к примеру блок с классом col-sm-6
.
col-sm-6 и нажать «Tab», получим 
col-sm-6<div></div>.Для того чтобы построить вот такую конструкцию:
<div> <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt natus quidem qui, obcaecati dolorem optio nulla voluptates suscipit eligendi laboriosam quisquam odio provident facilis laudantium. Non, tempora mollitia consequuntur laborum!</div> <div>Incidunt fugiat beatae non voluptatum at iste inventore obcaecati rem tenetur officiis reprehenderit soluta, magnam est consequatur accusantium, fuga aperiam nesciunt exercitationem dignissimos aut, ut. Voluptatibus id explicabo, suscipit porro.</div> <div>Iste magni, nam id a, maxime incidunt aperiam hic, aliquid suscipit aspernatur maiores quaerat sequi asperiores perferendis eum delectus consectetur sint excepturi laboriosam, error. Ratione voluptatum similique sunt sequi maiores!</div> <div>Officiis doloremque cumque ab quae similique totam voluptates? Molestias rerum eos dolor nulla quidem nam pariatur, quisquam reiciendis tenetur.
Dolorum, at, illum! Corporis, itaque, impedit repellendus natus accusantium sit sunt.</div>
</div>достаточно ввести вот такую небольшую строчку «.row>.col-md-3*4>lorem» и нажать «Tab».
Как вы видите Emmet очень крутое дополнение, которое очень ускоряет процесс верстки, главное уметь правильно им пользоваться) Советую почитать документацию.
Активация Sublime Text 4
Чтобы активировать Сублайн текст 4 перейдите во вкладку «Справка» («Help») — «Ввести лицензию» («Enter license») вставляем ключ и жмем «Use License»
Лицензию можно купить в Справка — купить лицензию. Если не хотите покупать ключ за 99$, то их можно поискать в общем доступе, в гугле или яндекс наберите запрос: Sublime Text 4 и дальше crack, Patcher, Keygen или License Key, лично я опробовал около сотни ключей и не нашёл не одного рабочего. Оказывается сублайн поменял условия лицензирования, поэтому как закончился триал, я его удалил и установил Subline Text 3, а лучше пользуйтесь бесплатны VS code не чем не уступает)
На сегодня все!
Шпаргалка ниндзя Sublime Text 3
Выделение
Выделить слово, в котором курсор
(2× — выделение совпадающих)Ctrl+D
Cmd+D
Найти и выделить всё
(выделено слово)Alt+F3
Ctrl+Cmd+G
Выделить строку
Ctrl+L
Cmd+L
Выделить содержимое скобок
Ctrl+Shift+M
Ctrl+Shift+M
Выделить слово справа от курсора
Ctrl+Shift+
Ctrl+Shift+
Выделить слово слева от курсора
Ctrl+Shift+
Ctrl+Shift+
Выделить строки с идентичным отступом
Ctrl+Shift+J
Ctrl+Cmd+J
Вертикальное выделение
Shift+ПКМ
—
Поиск
Поиск конкретного файла в проекте
Ctrl+P
Cmd+P
Поиск в файле
Ctrl+F
Cmd+F
Поиск следующее вхождение
Enter
Enter
Поиск выделить всё найденное
Alt+Enter
Alt+Enter
Поиск предыдущее вхождение
Shift+Enter
Shift+Enter
Поиск закрыть, выделить результат
Esc
Esc
Поиск вкл.
/выкл. рег. выраженияAlt+R
Cmd+Alt+R
Поиск вкл./выкл. чувств. к регистру
Alt+C
Cmd+Alt+C
Поиск вкл./выкл. поиск слова целиком
Alt+W
Cmd+Alt+W
Живой поиск в файле
Ctrl+I
Cmd+I
Живой поиск закрыть, выдел. результат
Enter
Enter
Живой поиск закрыть
Esc
Esc
Поиск и замена по файлам в папке
Ctrl+Shift+F
Ctrl+Cmd+F
Поиск и замена по файлу
Ctrl+H
Ctrl+Cmd+F
Заменить следущее
Ctrl+Shift+H
Ctrl+Cmd+E
Следущее вхождение искомого
F3
Cmd+G
Предыдущее вхождение искомого
Shift+F3
Cmd+Shift+G
Следущее вхождение искомого
(только в ходе поиска по файлам в папке)F4
F4
Предыдущее вхождение искомого
(только в ходе поиска по файлам в папке)Shift+F4
Shift+F4
/выкл. рег. выраженияБлоки кода
Свернуть текущий блок
Ctrl+Shift+[
Ctrl+Cmd+[
Развернуть текущий блок
Ctrl+Shift+]
Ctrl+Cmd+]
Закомментировать строку
Ctrl+/
Cmd+/
Закомментировать блок кода
(курсор в блоке)Ctrl+Shift+/
—
Вкладки
Создать вкладку
Ctrl+N
Cmd+N
Закрыть вкладку
Ctrl+W
Cmd+W
Сохранить
Ctrl+S
Cmd+S
Сохранить как
Ctrl+Shift+S
Cmd+Shift+S
Переместить вкладку в обл.
с номером
(показаны 2 и более областей)Ctrl+Shift+1...0
Ctrl+Shift+1...0
Показать соотв. вкладку
Alt+1...0
Cmd+1...0
Предыдущая вкладка
Ctrl+PageUp
Cmd+Shift+[
Следующая вкладка
Ctrl+PageDown
Cmd+Shift+]
Следующая вкладка в стеке
Ctrl+Tab
Ctrl+Tab
Предыдущая вкладка в стеке
Ctrl+Shift+Tab
Ctrl+Shift+Tab
с номером Развернуть аббревиатуру
Tab
Tab
Интерактивная аббревиатура
(пишем аббревиатуру и видим результат)Ctrl+Alt+Enter
Ctrl+Alt+Enter
Убрать тег, в котором курсор
(табуляция сохранится правильной)Ctrl+Shift+;
Cmd+'
Выделить тег и его контент
(2× и далее — выделить и родителя)Ctrl+,
Ctrl+D
Убрать из выделения родительский тег
(обратное этому)Ctrl+Shift+0
Ctrl+J
У меня эта комбинация, почему-то, не работает (даже если ее вписать в пользовательских настройках), хотя прочих конфликтов нет.
Помогает только смена кнопок (к примеру, на Ctrl+.)Перейти к парному тегу
Ctrl+Alt+J
Cmd+Shift+T ???
Обернуть выделенное в аббревиатуру
Ctrl+Shift+G
Cmd+W
Переход между точками редактирования
(что за точки?)Ctrl+Alt+/
Ctrl+Alt+/
Точки редактирования это: пустые теги, пустые атрибуты, пустые строки с отступами.
Выделять области ред-я (след./пред.)
(что за области?)Ctrl+Shift+./,
Cmd+Shift+./,
Области редактирования это: теги, атрибуты целиком, значения атрибутов целиком, значения атрибутов отдельно.
Подробнее — в демонстрации.Закомментировать строку или блок
(Если курсор вне тега, закомментируется содержимое родительского тега)Ctrl+Shift+/
Ctrl+Shift+/
Сделать тег парным/непарным
Ctrl+Shift+`
Cmd+Shift+`
Обновить/добавить размеры картинки
Ctrl+U
Cmd+Shift+I
Подсчитать мат. выражение
Ctrl+Shift+Y
Cmd+Shift+Y
Синхронизировать CSS-правила
(несколько правил с вендорными префиксами)Ctrl+Shift+R
Cmd+Shift+R
Кодировать/декодировать картинку в data:URL
Ctrl+'
Cmd+Shift+D
Выделить откр.
и закр. тег
(Редактировать тег)Ctrl+Shift+'
Cmd+Shift+K
Изменить число на 1
Ctrl+/
Ctrl+/
В Windows конфликтует с этим и этим. Нужно переназначать менее нужное.
Изменить число на 0.1
Alt+/
Alt+/
Изменить число на 10
Shift+Alt+/
Cmd+Alt+/
Помогает только смена кнопок (к примеру, на Ctrl+.)
Подробнее — в демонстрации.
и закр. тегТекст
Вставить из буфера с отступом
Ctrl+Shift+V
Cmd+Shift+V
Удалить слово перед курсором
Ctrl+Bsp
Ctrl+Bsp
Удалить слово после курсора
Ctrl+Del
Ctrl+Del
Удалить строку перед курсором
Ctrl+Shift+Bsp
Ctrl+Cmd+Bsp
Удалить строку после курсора
Ctrl+Shift+Del
Ctrl+Cmd+Del
Продублировать текст
(выделен фрагмент текста)Ctrl+Shift+D
Cmd+Shift+D
Преобразовать в прописные буквы
(выделен фрагмент текста)Ctrl+K+U
Cmd+K+U
Преобразовать в строчные буквы
(выделен фрагмент текста)Ctrl+K+L
Cmd+K+L
Проверка орфографии вкл.
/выкл.F6
F6
/выкл.Строки
Добавить строке отступ
(курсор в начале строки)Tab
Tab
Убрать строке отступ
(курсор в начале строки)Shift+Tab
Shift+Tab
Добавить строке отступ
(курсор в любой позиции)Ctrl+]
Cmd+]
Убрать у строки отступ
(курсор в любой позиции)Ctrl+[
Cmd+[
Поднять строку вверх
Ctrl+Shift+
Ctrl+Cmd+
Опустить строку вниз
Ctrl+Shift+
Ctrl+Cmd+
Продублировать строку
(нет выделения)Ctrl+Shift+D
Cmd+Shift+D
Вставить строку выше курсора
Ctrl+Shift+Enter
Cmd+Shift+Enter
Вставить строку ниже курсора
Ctrl+Enter
Cmd+Enter
Удалить строку, в которой курсор
Ctrl+Shift+K
Ctrl+Shift+K
Объединить строки
Ctrl+J
Cmd+J
Переходы
Переход к файлу в проекте (фильтр)
Ctrl+P
Cmd+P
Перейти к парной скобке
Ctrl+M
Ctrl+M
Перейти к строке
Ctrl+G
Ctrl+G
Поставить на строке закладку
Ctrl+F2
Cmd+F2
К следующей закладке
F2
F2
К предыдущей закладке
Shift+F2
Shift+F2
Убрать все закладки
Ctrl+Shift+F2
Cmd+Shift+F2
Курсор
Добавить курсор на стр.
выше или нижеCtrl+Alt+/
Ctrl+Shift+/
Убрать мультикурсор
Esc
Esc
Добавить мультикурсор
Ctrl+ЛКМ
Cmd+ЛКМ
выше или нижеВнешний вид
Полный экран
F11
Ctrl+Cmd+F
Только область редактирования
Shift+F11
Ctrl+Cmd+Shift+F
Показать одну/несколько обл. ред.
Alt+Shift+1...4
Alt+Cmd+1...4
Области ред-я сеткой 2×2
Alt+Shift+5
Alt+Cmd+5
Области ред-я в две линии
Alt+Shift+8
Alt+Shift+Cmd+2
Области ред-я в три линии
Alt+Shift+9
Alt+Shift+Cmd+3
Перейти к области ред-я с номером
Ctrl+1.
..4Ctrl+1...4
Переключиться на боковую панель
Ctrl+0
Ctrl+0
..4Разное
Прокрутить немного вверх
Ctrl+
Ctrl+Alt+
Прокрутить немного вниз
Ctrl+
Ctrl+Alt+
Плагин Emmet для Sublime Text.
Вы до сих пор пишите теги html и css свойства вручную? Пришло время это исправить! Сегодня мы поговорим о плагине emmet, который поможет нам в этом.
Emmet — это плагин, который позволит вам писать html и css в десятки раз быстрее. Многие уже используют его в своих проектах, но многие о нем еще ничего не знают, и сегодня я попытаюсь исправить это.
Для начала его нужно установить. В Sublime Text, о котором недавно была написана статья, это делается очень просто. Откройте command palette, нажав сочетание клавиш cmd+shift+p, или перейдите в пункт tools и выберите там command palette. Теперь введите «install package» и нажмите enter. Дальше введите «emmet» и снова нажмите enter. После того, как плагин загрузится и установится, перезапустите Sublime Text.
Установка завершена, и теперь мы можем начать пользоваться плагином emmet. Введите
div
А теперь нажмите клавишу tab. В результате этих несложных действий мы получим открывающий и закрывающий тег div, а курсор будет установлен внутри, между ними.
<div></div>
Точно так же можно делать с любыми тегами. Например, давайте создадим ссылку.
a
Теперь нажмите tab, и мы получим следующее
<a href=""></a>
Как видите, emmet добавил атрибут href самостоятельно.
Если же вы введете img, то там сразу будут атрибуты src и alt.
Теперь рассмотрим, как добаблять классы и id. Делается это точно так же, как и в css: класс с помощью ., а id с помощью #
.block
В результате получим
<div></div>
То же самое и с id
#block
Получим следующее
<div></div>
Заметьте, что я не писал слово div, а просто ставил точку или решетку и писал нужный мне класс или id. Дело в том, что мы можем пропускать название тега и тогда emmet сам будет додумывать, какой же тег поставить. В большинстве случаев это будет div, но, если вы, например, напишите так внутри тега ul, то тег будет li с нужным классом или id.
Если вы хотите сами ввести какой-то атрибут, то напишите его в квадратных скобках
div[data-attribute="value"]
Получим следующее
<div data-attribute="value"></div>
Чтобы вкладывать теги внутри других тегов, нужно использовать знак больше
ul>li>a
Получим следующее
<ul>
<li><a href=""></a></li>
</ul>
С помощью символа * можно указать, сколько таких тегов нам нужно
ul>li*5
Вот, что у нас получится
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
Если вам нужно добавить тег на том же уровне, используйте знак +
#container>. left+.right
left+.rightРезультат
<div>
<div></div>
<div></div>
</div>
С помощью символа $ мы можем указать, что каждый тег следует нумеровать автоматически
ul>li.item$*5
Результат
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
Если вам нужен ведущий ноль, то напишите знак $ 2 раза, если 2 ведущих нуля, то 3 знака $ и т.д.
Если вы хотите добавить внутри тега текст, то его нужно указать в фигурных скобках
a{Some text}
Результат
<a href="">Some text</a>
Если во время верстки вам нужен какой-то текст, то просто напишите lorem
lorem
Результат
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, mollitia quibusdam voluptatibus fuga dolorem officiis animi error ex ea ipsa excepturi incidunt quis sunt ducimus rerum corrupti obcaecati ipsum quisquam.
Quae, mollitia quibusdam voluptatibus fuga dolorem officiis animi error ex ea ipsa excepturi incidunt quis sunt ducimus rerum corrupti obcaecati ipsum quisquam.
Если вам нужно какое-то определенное количество слов, то напишите цифру, обозначающую количество слов после.
lorem3
Результат
Lorem ipsum dolor.
Чтобы создать html структуру, просто напишите знак !
!
Результат
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body></body>
</html>
Теперь поговорим о том, как emmet поможет нам в css
Там достаточно просто написать начальные буквы свойства и значение, а потом нажать tab. Например
m10
В результате получим
margin: 10px;
В некоторых свойствах уже стоят значения по-умолчанию.
Например, в свойстве text-align
ta
Результат
text-align: left;
Но вы можете изменить его, просто написав букву значения после сокращения свойства. К примеру, пусть будет по центру.
tac
Результат
text-align: center;
Все рассматривать нет смысла. Документацию по плагину emmet вы можете найти здесь: http://docs.emmet.io/cheat-sheet/
В конце стоит сказать, что если вам по каким-то причинам не нравится клавиша tab, то вы можете поменять ее. Для этого зайдите по следующему пути: Perferences->Package Settings->Emmet->Key Bindings — default. Используйте поиск(cmd+f или перейдите по пути Find->Find) С помощью поиска найдите команду «expand_abbreviation_by_tab». Выше нее, в массиве keys, в кавычках написано «tab». Измените это значение на свое, например, на «ctrl+e».
Но это не совсем правильно. Лучше будет, если вы скопируете весь этот объект и вставите его в файл Key Bindings — User, а там уже меняйте сочетание клавиш. Сделано это для того, чтобы если что, вы могли вернуть все настройки по-умолчанию с помощью файла Key Bindings — Default.
Итак, на этом все. Сегодня мы рассмотрели плагин emmet для текстового редактора Sublime Text. Если вы используете другой редактор, то поищите этот плагин для него в интернете. Удачи!
- Создано 20.05.2014 19:09:59
- Михаил Русаков
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Sublime Text 2/3 — плагины
- 28. 02.2013
- 15 комментариев
- Кодинг
02.2013В этой статье я сделаю небольшой обзор полезных плагинов для Sublime Text 2, которые могут оказаться очень полезными в повседневной работе.
Проще всего устанавливать плагины в Sublime Text 2 при помощи менеджера пакетов под названием Package Control. Как установить Package Control в Sublime и как его использовать — я подробно расписал в одной из прошлых статей.
Update-2017
Тот же набор плагинов актуален и для Sublime Text 3.
В этой же статье я сделаю небольшой обзор некоторых полезных плагинов для Sublime Text 2, которые я сам использую в своей работе и советую использовать вам. Естественно, рассматриваемые здесь плагины — это только капля в море, есть множество полезных плагинов, не упомянутых в этой статье.
К тому же, я не считаю себя программистом и не рассматриваю плагины, предназначенные для суровых кодеров, а подхожу к вопросу с точки зрения верстальщика. Впрочем, многие из рассматриваемых плагинов могут быть одинаково полезны как программистам, так и верстальщикам.
Исходя из всего вышеизложенного, я призываю вас: если вдруг вы не нашли в Sublime какого-то полезного для себя функционала — обязательно поищите среди доступных плагинов, велика вероятность, что необходимый вам функционал реализован с их помощью.
Ну а теперь перехожу непосредственно к обзорам.
Плагины Zen Coding и Emmet для Sublime Text 2
И начнем мы с одного из самых популярных плагинов — Zen Coding (устаревший) и Emmet (сегодняшнее название для Zen Coding). Zen Coding / Emmet — это набор инструментов для текстовых редакторов (не только для Sublime), который позволяет очень значительно ускорить написание html и css кода. В первую очередь речь идет о подобии сниппетов, но не только о них.
В отличие от стандартных сниппетов, при помощи Zen Coding (либо Emmet) вы можете создавать довольно сложные конструкции кода. Например, сокращение типа ul>li*8 будет развернуто в ненумерованный список (стандартный тег ul) с 8 пунктами. И это самый простой пример, конструкции могут быть гораздо более сложными.
Я уже писал отдельную статью по поводу того, как можно использовать Zen Coding практически где угодно — в популярных редакторах или текстовых полях на любом сайте.
Установить плагин Zen Coding можно буквально за несколько секунд при помощи Package Control. Нажмите комбинацию Ctrl+Shift+P и в появившейся панели наберите слово install, после чего выберите появившийся пункт Package Control: Install Package. В появившейся после этого панельке наберите zencoding и нажмите Enter. Вуаля — плагин установлен.
Но Zen Coding на сегодняшний день не развивается, новые версии носят название Emmet.
Не так давно этот тулкит имел нестабильный статус, но на сегодняшний день его вполне можно использовать (я использую именно Emmet). Соответствующий плагин в Sublime ставится тем же способом (см. предыдущий абзац), только при поиске естественно нужно набирать emmet.
Подробности про Zen Coding вы можете узнать на соответствующем сайте, про Emmet — на его официальном сайте. Приведу лишь некоторые примеры использования для тех, кто не знаком с этой концепцией. Все, что работало в Zen Coding, работает и в Emmet, поэтому примеры одинаково подходят для обоих случаев.
Для создания вложенных тегов используется символ >, для тегов на текущем уровне — символ +, а для многократного повторения какого-то тега используется символ *. После названия тега можно указывать название класса (отделив его точкой) или id (отделив его символом #). Например, конструкция вида:
div#page>div.logo+ul#navigation>li*5>a
… будет развернута до вида:
<div>
<div></div>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div>Последовательность символов в сокращении обязательно не должна содержать пробелов, а курсор должен находиться в ее конце в момент разворачивания.
Кстати говоря, разворачивание в Sublime производится нажатием клавиши Tab, либо же комбинацией Ctrl+E.
При желании можно задавать тегу a значение атрибута href, также любому «двойному» тегу можно задать его содержимое в фигурных скобках. В сложных конструкциях можно использовать скобки (например, для выхода на более высокие уровни в иерархии тегов). Вот пример подобного использования:
(ul>li*4>a[href=#]{Текст ссылки})+divПодобная конструкция будет развернута до вида:
<ul>
<li><a href="#">Текст ссылки</a></li>
<li><a href="#">Текст ссылки</a></li>
<li><a href="#">Текст ссылки</a></li>
<li><a href="#">Текст ссылки</a></li>
</ul>
<div></div>Для быстрого переключения между редактируемыми точками используются клавиши курсора ← и → с одновременно зажатыми клавишами Ctrl+Alt.
Можете поэкспериментировать и попереключаться между редактируемыми точками в примере выше, чтобы точнее понимать, о чем идет речь.
Zen Coding позволяет не указывать название для тега div, а указывать только класс или id. В этом случае автоматически подразумевается, что имеется ввиду div. Например, конструкция такого вида:
.container<#header+#main
… аналогична такой конструкции:
div.container<div#header+div#main
… и будет автоматически развернута до такого вида:
<div>
<div></div>
<div></div>
</div>Подобным же образом можно работать не только с HTML, но и с CSS-кодом, используя соответствующие сокращения для разворачивания их в полноценный CSS (тоже по нажатию на Tab).
Доступные комбинации клавиш можно посмотреть в соответствующем конфигурационном файле. В моем случае (в Ubuntu) этот файл находится по адресу ~/.config/sublime-text-2/Packages/Emmet/Default (Linux).. Либо же можно заглянуть в файлик sublime-keymapREADME.md в той же директории, там можно помимо основных клавиатурных комбинаций получить и много других полезных сведений.
В Emmet появились некоторые полезные фишки, которые отсутствовали в Zen Coding.
Многие сокращения в Emmet стали еще короче. Например, при работе с CSS сокращение p20 будет развернуто до padding: 20px;. Точно также сокращение m40 превратится в margin: 40px;, а w100 — в width: 50px;. Подобным образом можно задавать значения не только в пикселях. Так, сокращение w80p будет развернуто до width: 80%;. Подобным же образом можно задавать множественные значения, например m10-20 превратится в margin: 10px 20px;, а m0-auto превратится в margin: 0 auto;.
Emmet также знает о вендорных префиксах в CSS, имеет встроенный генератор градиентов и «рыбы» («Lorem Ipsum» с заданным количеством слов, например сокращение lorem20 создаст «рыбу» из 20 слов).
, который позволяет переходить на уровень (или несколько уровней) выше без использования скобок.
Функционал Emmet (как впрочем и Zen Coding) не ограничивается только разворачиванием сокращений. Есть также множество других полезных действий. Например, если поставить курсор в любое место тега img и нажать комбинацию Ctrl+U, то для заданного изображения будут автоматически подсчитаны и проставлены параметры width и height. Также вы можете приятно удивиться, если в css файле поставите курсор на адрес изображения и нажмете комбинацию Ctrl+'. Подобных фишек довольно много, все их я перечислить в рамках одной статьи не смогу, поэтому очень рекомендую заглянуть на официальный сайт проекта Emmet за более детальной документацией.
Плагин AdvancedNewFile для Sublime Text 2
Стандартный способ создания нового файла состоит (внезапно) из собственно создания (Ctrl+N) и последующего его сохранения (Ctrl+S).
При этом на втором этапе открывается стандартное системное диалоговое окошко, в котором нужно выбрать папку и задать имя для нового файла.
Однако всю вышеописанную процедуру можно значительно упростить, используя плагин AdvancedNewFile. Установить плагин можно как обычно через Package Control: Ctrl+Shift+P → install → AdvancedNewFile → Enter.
Плагин установлен и готов к использованию. Теперь достаточно нажать комбинацию Super+Alt+N, после чего в нижней части окошка Sublime появится небольшая панелька. В этой панели достаточно ввести путь к новому файлу (обычно относительно корневой папки текущего проекта) и нажать Enter — и новый файл сохранен.
Причем можно использовать при введении адреса к файлу и еще не существующие директории — в этом случае эти директории будут созданы автоматически.
Плагин SideBarEnhancements для Sublime Text 2
Если вы кликните правой кнопкой мыши по какому-то элементу на боковой панели (в дереве файлов), то обнаружите, что появляющееся при этом контекстное меню довольно скромное.
Функционал этого меню можно значительно расширить, установив (опять же через Package Control) плагин SideBarEnhancements, после чего контекстное меню станет значительно богаче:
Этот плагин приносит с собой дополнительный функционал не только в виде расширенного меню. Так, при нажатии на клавишу F12 текущий файл теперь будет открываться в браузере (естественно, назначенные клавиши можно менять).
Плагин PlainTasks для Sublime Text 2
PlainTasks — это необычный плагин для Sublime, который позволяет использовать редактор еще и в качестве простенького менеджера задач (todo-листа).
И несмотря на то, что для формирования списка задач я использую замечательную программу GTG, я все же нашел для себя полезной возможность делать простые списки задач прямо в Sublime.
После установки плагина PlainTasks в командной панели (вызываемой по Ctrl+Shift+P) при вводе слова tasks появляется новый пункт, позволяющий создать новый список задач:
При выборе этого пункта в Sublime открывается новая вкладка с характерным желтым фоном.
Теперь мы можем начать формировать свой список задач. При этом у нас имеется свой синтаксис и возможность использовать горячие клавиши, а при сохранении файла ему автоматически дается расширение *.TODO.
Если в конце строки стоит двоеточие, то такая строка автоматически считается заголовком последующего списка и подсвечивается красным цветом. Если теперь с новой строки набрать название новой задачи и нажать Ctrl+Enter, то пункт будет автоматически отформатирован (слева появится пустой квадратик). В качестве альтернативного способа создания новой задачи в списке можно использовать комбинацию Ctrl+I, при этом курсор должен находиться на предшествующем новой задаче пункте или в начале новой строки.
В рамках одного файла может быть сразу несколько списков задач. Причем при желании эти списки можно разделять сепаратором, для этого достаточно два раза ввести символ - и нажать клавишу Tab. Есть возможность назначать задачам теги (они должны начинаться символом @).
Задачи можно помечать как выполненные, установив на нужную задачу курсор и нажав комбинацию Ctrl+D. При этом задача помечается зеленой галочкой, подкрашивается серым цветом, автоматически помечается тегом @done, а в скобках указывается дата и время ее исполнения. Если повторно нажать комбинацию Ctrl+D, то задача возвращается к исходному виду (как другие невыполненные задачи).
Все выполненные задачи одним махом можно перенести в архив, используя комбинацию клавиш Ctrl+Shift+A.
Используя курсорные клавиши ↑ и ↓ с зажатыми Ctrl+Shift, можно перемещать вверх/вниз строку с текущей задачей (в том числе и в другой список).
Плагин приятен в использовании, а подобные списки задач удобно использовать в рамках каждого проекта, сохраняя TODO-файлы прямо в папку проекта.
Плагин LiveReload для Sublime Text 2
Плагин LiveReload позволит вам вживую видеть все изменения в редактируемом HTML и CSS коде.
Вы сможете держать рядом открытое окно браузера и окно редактора, и при каждом сохранении файла страница в браузере будет обновляться автоматически.
Правда, для использования этого плагина придется установить дополнение в браузер (имеются дополнения для Firefox, Chrome и Safari). Ну а сам плагин LiveReload для Sublime Text 2 устанавливается как обычно через Package Control (Ctrl+Shift+P → install → LiveReload).
После установки расширения на панели браузера появляется кнопка, с помощью которой можно активировать или отключать расширение LiveReload.
Если вы установили плагин в Sublime и расширение в браузер, то подготовительные работы закончены. Не забудьте проверить, активирована ли соответствующая кнопка в браузере, и можете приступать к работе. Теперь при каждом сохранении редактируемого файла вы сможете вживую наблюдать результаты своей работы, причем без необходимости каждый раз вручную перезагружать страницу в браузере.
Плагин ColorHighlighter для Sublime Text 2
Плагин ColorHighlighter позволит вам видеть реальный цвет, соответствующий цветовому коду в CSS-файлах. Устанавливается плагин как обычно — через Package Control. Теперь при установке курсора на цветовой код он будет подсвечиваться соответствующим цветом.
Плагин ColorPicker для Sublime Text 2
Плагин ColorPicker позволит вам использовать системное диалоговое окно подбора цвета при правке CSS-стилей. После установки плагина (через Package Control) для появления диалогового окна достаточно нажать комбинацию Ctrl+Shift+P. После подбора цвета и нажатия на кнопку OK выбранный цвет автоматически подставится в то место, в котором был установлен курсор. Если же при этом курсор уже был установлен на каком-то цветовом коде, то при появлении диалогового окна этот цвет будет в него подставлен.
Плагин SFTP для Sublime Text 2
Плагин SFTP позволит вам прямо из Sublime передавать файлы по протоколам FTP и SFTP.
После настройки соответствующих параметров при клике правой кнопкой мыши на любом файле в боковой панели в появившемся контекстном меню появится дополнительная группа пунктов, позволяющая передавать файлы на удаленный сервер.
Плагин SFTP распространяется по такой же условно-бесплатной модели, как и сам Sublime Text 2. Вы можете заплатить за его использование, а можете не платить (при этом иногда при отправке файлов на удаленный сервер плагин будет напоминать о возможной покупке).
На этом пожалуй и закончу обзор полезных плагинов для Sublime Text 2. Не забывайте, что для Sublime существует и множество других полезных плагинов, которые вы с легкостью можете установить через Package Control.
Напоследок рекомендую также взглянуть на другие мои статьи про Sublime Text 2, если вы этого еще не сделали:
- Sublime Text 2 — введение
- Sublime Text 2 — основные возможности
- Sublime Text 2 — сниппеты
- Sublime Text 2 — полезные советы
sublimetext3 — расширение плагина Emmet не работает для Sublime Text 3
спросил
Изменено 4 года, 2 месяца назад
Просмотрено 10 тысяч раз
Я успешно установил Emmet через Package Control.
- Когда я набираю
ulи нажмите Tab , я получаю - Когда я набираю
ul.classи нажимаю Tab , я получаюul.body_class, но я хочу, чтобы он сгенерировал
Что я делаю не так?
Я читал сообщения о том, чтобы попробовать Ctl + E вместо Tab в качестве клавиши запуска, но это ничего не делает.
- сублимтекст3
- Эммет
0
Попробуйте вместо этого использовать Ctrl + Пробел . Если это не сработает, вы можете попробовать изменить привязку клавиш, поместив следующее в свой файл привязок клавиш пользователя, который можно найти, выполнив Preferences -> Key Bindings — User :
[
{"keys": ["tab", "args": {"action": "expand_abbreviation"}, "command": "run_emmet_action", "context": [{"key": "emmet_action_enabled. expand_abbreviation"}] }
]
expand_abbreviation"}] }
]
, а затем просто измените «вкладка» на любую комбинацию клавиш, которую вы хотите. Проверьте, работает ли это.
1
Прочитав ваш вопрос, сегодня я установил Emmet в версии Sublime Text 3 для Windows и столкнулся с той же проблемой. В ходе поиска решения я нашел следующее:
http://docs.emmet.io/actions/expand-abbreviation/#comment-1272517661
В Windows я открыл настройки Emmet по умолчанию. По пути:
Настройки > Настройки пакета > Emmet > Настройка — по умолчанию а также «Настройки» > «Настройки пакета» > «Emmet» > «Привязки клавиш» — по умолчанию
Когда я закрывал файлы настроек, мне было предложено сохранить файлы настроек. Я нажал OK, чтобы сохранить, а затем перезапустил Sublime Text 3.
После перезагрузки Sublime Text 3:
Я создал новый html-файл и смог набрать ul.class с вкладками, и он расширился до
Это было забавно, я никогда не сталкивался с этой проблемой с Sublime на моем Mac.
Если вам нужно было проделать тот же процесс на Mac, перейдите в «Настройки» > «Настройки пакета» > «Emmet… 9».0005
4
Я столкнулся с той же проблемой. Просто вставьте приведенный ниже код в «Настройки -> Привязки клавиш — Пользователь:».
{
"клавиши": ["вкладка"],
"команда": "expand_abbreviation_by_tab",
// поместите селекторы синтаксиса, разделенные запятыми, для которых
// вы хотите расширить аббревиатуры Emmet в ключ «операнд»
// вместо SCOPE_SELECTOR.
// Примеры: source.js, text.html - источник
"контекст": [
{
"операнд": "SCOPE_SELECTOR",
"оператор": "равно",
"match_all": правда,
"ключ": "селектор"
},
// запускаем, только если нет выделенного текста
{
"match_all": правда,
"ключ": "выбор_пусто"
},
// не работает, если есть активные вкладки
{
"оператор": "равно",
"операнд": ложь,
"match_all": правда,
"ключ": "has_next_field"
},
// не работает, если всплывающее окно завершения видно и вы
// хотите вставить завершение с помощью Tab. Если ты хочешь
// расширяем Emmet с помощью Tab, даже если всплывающее окно видно --
// удалить этот раздел
{
"операнд": ложь,
"оператор": "равно",
"match_all": правда,
"ключ": "auto_complete_visible"
},
{
"match_all": правда,
"key": "is_abbreviation"
}
]
} 
Если ты хочешь
// расширяем Emmet с помощью Tab, даже если всплывающее окно видно --
// удалить этот раздел
{
"операнд": ложь,
"оператор": "равно",
"match_all": правда,
"ключ": "auto_complete_visible"
},
{
"match_all": правда,
"key": "is_abbreviation"
}
]
} Github: см. дополнительное описание. args»: {«action»: «expand_abbreviation»}, «command»: «run_emmet_action», «context»: [{«key»: «emmet_action_enabled.expand_abbreviation»}]}
Я поделился этим как комментарий прямо там, где я чувствую, но требовалось 50 повторений. В любом случае. Вот что я сделал, что заставило меня работать на меня.
Из ответа @saadq сделайте следующее: [ //Здесь должны быть другие привязки клавиш пользователя, за которыми следует
{"keys": ["tab", "args": {"action": "expand_abbreviation"}, "command": "run_emmet_action", "context" : [{"key": "emmet_action_enabled.expand_abbreviation"}]}
]
Смысл в том, чтобы другие привязки появлялись перед ним, чтобы любая привязка, перезаписывающая ее, была перезаписана снова.
Твой ответ
Зарегистрируйтесь или войдите в систему
Зарегистрируйтесь с помощью Google
Зарегистрироваться через Facebook
Зарегистрируйтесь, используя адрес электронной почты и пароль
Опубликовать как гость
Электронная почта
Обязательно, но не отображается
Опубликовать как гость
Электронная почта
Требуется, но не отображается
Sublime Text 3 Советы и рекомендации
Примечание.
С тех пор была выпущена версия Sublime Text 4, которая доступна здесь.
Sublime Text 3 (ST3) — это предыдущая версия одного из наиболее часто используемых текстовых редакторов веб-разработчиками, кодировщиками и программистами. Это редактор исходного кода с поверхностью программирования Python или API. Он может поддерживать C++ и язык программирования Python. Кроме того, любой пользователь может добавить функции с помощью плагина.
Извлеките максимум из ST3, воспользовавшись 25 советами и рекомендациями в этом исчерпывающем руководстве для веб-разработчиков. Узнайте не только о том, как использовать Sublime Text 3, но и о необходимых пакетах, полезных сочетаниях клавиш и многом другом.
1. Пользовательские настройки
По умолчанию в ST3 используются жесткие вкладки длиной 4 символа. Это может привести к тому, что код будет трудно читаемым, так как большие табличные отступы смещают вашу работу вправо. Я рекомендую всем разработчикам добавить это в свои пользовательские настройки ( Sublime Text 3 => Настройки => Настройки — Пользователь ):
{
"draw_white_space": "все",
«правители»: [80],
"размер_вкладки": 2,
"translate_tabs_to_spaces": правда
}
Этот параметр преобразует жесткие табуляции в пробелы, делает отступы длиной всего два символа, помещает линейку на отметку 80 символов (чтобы напомнить вам о том, что код должен быть кратким) и добавляет маркеры пробелов.
Вот полный список параметров предпочтений, если вы хотите продолжить настройку среды ST3.
2. Палитра команд
Палитра команд ST3 позволит вам выполнять действия панели инструментов (например, устанавливать синтаксис кода для открытого файла), не отрывая пальца от клавиатуры. Хотя палитру команд можно открыть мышкой через Инструмент => Палитра команд , лучший способ получить приглашение палитры команд — использовать сочетание клавиш CTRL/⌘-SHIFT-P .
Скриншот командной палитры в Sublime Text 3
3. Панели рабочего пространства столбцов и строк
Вы более продуктивный программист с несколькими открытыми файлами? ST3, как и любой хороший текстовый редактор, позволяет вам видеть открытые файлы рядом друг с другом, так что вы не будете переключаться между файлом HTML и его документом CSS:
Для просмотра двух столбцов (вертикальных) панелей рядом используйте сочетание клавиш ALT-UP-2 (ПК) или OPTION-⌘-2 (Mac).
Замените последнюю черту на «3» или «4», чтобы просмотреть три или четыре панели соответственно. Использование «5» создает сетку из 4 панелей.
Для просмотра двух строк (горизонтальных) панелей рядом используйте сочетание клавиш SHIFT-ALT-UP-2 (ПК) или SHIFT-OPTION-⌘-2 (Mac). Замените последнюю черту на «3», чтобы просмотреть три панели соответственно.
Разделение столбца пополам с помощью функции группы ST3
Если вы хотите еще больше разделить панель, вы можете использовать функцию «группа» ST3. Используйте CTRL-K, SHIFT-CTRL-UP (ПК) или ⌘-K, SHIFT-⌘-UP (Mac), чтобы создать новую группу внутри панели.
4. Управление пакетами
ST3 поставляется с множеством готовых функций, но вы можете расширить его функциональность с помощью «пакетов» — подключаемых модулей, написанных большим сообществом ST3. Самый простой способ установить эти пакеты — использовать Package Control.
Чтобы установить Package Control на ST3, следуйте инструкциям по установке на веб-сайте Package Control.
Если управление пакетами установлено успешно, вы сможете искать действия управления пакетами в палитре команд ( CTRL/⌘-SHIFT-P ):
Обязательные пакеты Sublime Text 3
Примечание. Установите эти пакеты с помощью управления пакетами, открыв палитру команд (CTRL/⌘-SHIFT-P), выбрав «Управление пакетами: установить пакет» и выполнив поиск пакета по его имя.
5. Улучшения боковой панели
Улучшения боковой панели расширяют функциональные возможности боковой панели ST3, позволяя выполнять действия с файлами и папками, которые обычно недоступны. Вы также сможете запускать эти действия из палитры команд с этим пакетом.
Расширенная функциональность с помощью Sidebar Enhancement
6. Emmet
Emmet значительно упрощает кодирование HTML с помощью ярлыков на основе селекторов CSS.
Что это значит? Смотрите сами на гифке ниже:
Эммет не ограничивается HTML-тегами, классами и идентификаторами. Текст Lorem ipsum — это то, что часто используют веб-разработчики. Часто они обращаются к генератору lorem ipsum, но с Эмметом просто введите lorem и нажмите Tab. Хотите определенное количество слов-заполнителей (например, 100 слов lorem ipsum)? Вместо этого используйте lorem100 .
Emmet также распространяется на CSS. Например, префиксы поставщиков CSS всегда доставляют неудобства, поэтому Emmet позволяет использовать сокращение -bdrs для установки радиуса границы:
7. Git
Пакет Git позволяет запускать команды Git (например, «Git Diff» или «Git Blame») прямо из палитры команд ST3.
Не знаете, что такое Git и как его использовать? Посмотрите вводное видео General Assembly
«Начало работы с Git и Github».
8. GitGutter
GitGutter показывает незафиксированные добавления, изменения и удаления рядом с номерами строк ST3:
9.
SASS
” добавляет его. Настоятельно рекомендуется для продвинутых разработчиков интерфейсов и программистов Ruby on Rails:
10. Better CoffeeScript
В ST3 также нет поддержки синтаксиса и фрагментов для CoffeeScript, поэтому этот пакет заполняет этот пробел:
11. Пользователи командной строки OSX
терминал, текстовый редактор Sublime также включает инструмент командной строки subl , который позволит вам открывать текстовый редактор непосредственно из терминала. Выполните следующую команду в своем терминале, чтобы настроить этот ярлык:
ln -s "/Applications/Sublime Text.app/Contents/SharedSupport/bin/subl" ~/bin/subl
Если вы используете Homebrew или /usr/local/bin находится в вашем $PATH, выполните команду:
ln -s "/Applications/Sublime Text.app/Contents/SharedSupport/bin/subl" / usr/local/bin/subl
Сочетания клавиш
Изучение сочетаний клавиш в ST3 превратит вас из пользователя Sublime в эксперта Sublime.
Вот некоторые фавориты:
12. Множественные курсоры
Множественные курсоры — убийственная особенность Sublime Text. Это позволяет вам печатать в нескольких местах одновременно, экономя время на разработку. Чтобы активировать несколько курсоров, поместите курсор на слово, которое хотите выделить, и нажмите 9.0014 CTRL/⌘-D , пока не выберете все нужные слова. Вы также можете создать несколько курсоров с помощью CTRL/⌘-MOUSECLICK во всех местах, где вы хотите иметь курсор.
13. Перейти к чему-либо
Подобно палитре команд, ST3 имеет функцию «Перейти к чему-либо» (произносится как «перейти к»), которая позволяет перейти к определенному файлу, строке или определению метода. Откройте панель поиска Goto Anything с помощью CTRL/⌘-P . Чтобы переключаться между файлами, начните вводить имя файла. Поскольку это нечеткий поиск, поисковый запрос не обязательно должен точно соответствовать имени, и вам не нужно вводить полный путь к файлу:
14.
Перейти к строке в файле
Перейти к чему угодно не только приведет вас к файлу, но также может привести вас к определенной строке в файле. Если вы хотите перейти к строке в новом файле, просто откройте Goto Anything и введите двоеточие, за которым следует номер строки (например, :18 для строки 18). Чтобы перейти к строке в другом файле, введите имя файла, затем двоеточие и номер строки:
15. Перейти к определению в файле
Если вы хотите перейти к определению класса, метода или функции в файл, Goto Anything имеет синтаксис, аналогичный переходу к строке. Вместо двоеточия в определении перехода используется цифра 9.0014 @ . Вы получите список всех определений в выбранном вами файле, и, набрав имя одного из них и нажав ENTER, вы перейдете к данному определению:
16. Режим без отвлекающих факторов
Иногда быть самым продуктивным программистом или фронтенд-разработчик означает устранение всех отвлекающих факторов.
Никаких других приложений, окон, вкладок, боковых панелей и меню. Текстовый редактор Sublime предлагает простой способ сделать это в режиме без отвлечения внимания. Запустите его с помощью SHIFT-F11 (ПК) или ⌘-CTRL-SHIFT-F (Mac):
17. Скрыть/показать боковую панель
Боковая панель полезна для отображения ваших файлов и структуры каталогов, но иногда вам нужно немного больше пространство окна для кода. Использование сочетания клавиш CTRL/⌘-K, CTRL/⌘-B (в таком порядке) переключит боковую панель. Помните, что боковая панель будет видна только в том случае, если у вас открыто несколько файлов или папок.
18. Быстро прокомментируйте свой код
Это полезный совет, если вы постоянно комментируете свой код или временно проверяете, как отключение блока кода влияет на ваш проект. Чтобы быстро прокомментировать код в ST3, выделите код и нажмите CTRL/⌘-/ . Если вы не выделите какой-либо код, использование этого сочетания клавиш закомментирует всю строку.
Выбор текста
Мы уже видели, как выбрать слово ( CTRL/⌘-D ), но в ST3 есть несколько других полезных опций выбора.
19. Выбор всей строки
Чтобы выбрать всю текущую строку: CTRL/⌘-L .
20. Выбор кода с одинаковым отступом
Чтобы выбрать весь код с одинаковым отступом: CTRL/⌘-SHIFT-J .
21. Выбор всего внутри HTML-тега
Чтобы выбрать все внутри текущего HTML-тега: CTRL/⌘-SHIFT-A
22. Быстрый отступ, потому что разработчики знают его важность делает ваш код разборчивым и легким для понимания. Если вы хотите увеличить отступ текущей строки, используйте CTRL/⌘-] . Для уменьшения отступа используется другая клавиша с квадратной скобкой ( CTRL/⌘-[ ).
23. Вставка с отступом
Если вы копируете/вырезаете код с отступом и хотите сохранить уровень отступа при вставке, используйте CTRL/⌘-Shift-V для вставки с отступом.
24. Переключение строк
Вы когда-нибудь писали код только для того, чтобы понять, что некоторые строки вышли из строя? В ST3 есть ярлык для экономии времени, который позволяет перемещать заданную строку вверх или вниз в документе. CTRL-SHIFT-ВВЕРХ (ПК) или CTRL-⌘-ВВЕРХ (Mac) перемещает строку вверх, а CTRL-SHIFT-ВНИЗ (ПК) или CTRL-⌘-ВНИЗ (Mac) перемещает строку вниз.
25. Удаление строк
Для тех случаев, когда строка кода не нарушена, но ее нужно просто удалить, в ST3 есть удобный ярлык для удаления строк без необходимости выделения всей строки. CTRL-SHIFT-K (ПК и Mac) удалит текущую строку, на которой находится курсор.
—
Теперь, когда вы освоили Sublime Text 3, вы можете сосредоточиться на написании отличного кода и стать лучшим разработчиком внешнего интерфейса. Продолжите обучение с помощью онлайн-видеоуроков, проводимых экспертами-практиками по темам программирования, бизнеса и дизайна.
Начните заниматься веб-разработкой с помощью нашего курса Software Engineering Immersive.
Узнайте больше о нашем неполном курсе Python
Emmet — Сообщество разработчиков 👩💻👨💻
Сообщество DEV 👩💻👨💻 — это сообщество из 911 456 замечательных разработчиков.
Мы место, где кодеры делятся информацией, остаются в курсе событий и развивают свою карьеру.
Создать учетную запись Войти
Твиттер Фейсбук Гитхаб Инстаграм дергаться👋 Войдите, чтобы иметь возможность сортировать сообщения по релевантным , последним или топ .
Ускоренный курс Эммета!
Устариз Энцо
Устариз Энцо
#html #эммет #учебник
Реакции 13 отзывов Комментарии Добавить комментарий4 минуты чтения
Удивительные ярлыки Эммета для более быстрого программирования
Ракеш Потнуру
Ракеш Потнуру
#emmet #вебдев #html #css
Реакции 16 отзывов Комментарии Добавить комментарий3 минуты чтения
Ярлыки для кода VS и emmet.
Дахье Джи
Дахье Джи
#vscode #эммет #новички #программирование
Реакции 5 реакций Комментарии Добавить комментарий2 минуты чтения
Эммет не работает в VS Code ?— Вот как можно решить эту проблему!!
Пранав Арора
Пранав Арора
#vscode #эммет #json # не работает
Реакции 27 откликов Комментарии 43 комментария1 мин чтения
Включить использование Emmet с вкладкой на VSCode
0xkoji
0xkoji
#emmet #vscode
Реакции 6 реакций Комментарии Добавить комментарий1 мин чтения
Кто такой Эммет?! (Ваш новый лучший друг!)
Макс Зандер
Макс Зандер
#emmet #ярлыки #новички #плагины
Реакции 10 реакций Комментарии Добавить комментарий3 минуты чтения
LightSpeed CSS
Сиддхант Джайсвал
Сиддхант Джайсвал
#css #эммет #vscode
Реакции 5 реакций Комментарии Добавить комментарий2 минуты чтения
Ускорьте кодирование HTML с помощью Emmet в VSCode
Рейнальдо Сутисна
Рейнальдо Сутисна
#html #эммет #vscode #реакция
Реакции 66 реакций Комментарии 3 комментария2 минуты чтения
✨ Как создавать пользовательские фрагменты Emmet в VS Code!
Максимальное программирование
Максимальное программирование
#vscode #эммет #фрагменты #производительность
Реакции 21 реакция Комментарии 3 комментария2 минуты чтения
Как установить Emmet с Vim в Termux
Винод Мэтью Себастьян
Винод Мэтью Себастьян
#учебник #термукс #вим #эммет
Реакции 14 реакций Комментарии 4 комментария2 минуты чтения
Штат Эммет
фронтендгерой
фронтендгерой
#обсудить #html #css #эммет
Реакции 3 реакции Комментарии Добавить комментарий1 мин чтения
Некоторые разработчики Emmet Magic Frontend должны знать
Андреас
Андреас
#html #производительность #эммет #разметка
Реакции 63 реакции Комментарии 1 Комментарий2 минуты чтения
Использовать html5 emmet внутри уценки (VSCODE)
Марио Муи
Марио Муи
#vscode #эммет #html
Реакции 8 реакций Комментарии Добавить комментарий2 минуты чтения
Эммет упрощенный 😍
Риши
Риши
#emmet #html #просто #учиться
Реакции 8 реакций Комментарии Добавить комментарий1 мин чтения
Краткое руководство по плагину Emmet
Натан Б. Ханкес
Натан Б. Ханкес
для ветеринаров Who Code
#emmet #плагин #эффективность # рабочий процесс
Реакции 7 реакций Комментарии Добавить комментарий2 минуты чтения
Мультипликатор скорости в Visual Studio Code с использованием Emmet
Хуанан Руис
Хуанан Руис
#herramientas #эммет #продуктивидад #visualstudioкод
Реакции 7 реакций Комментарии 1 Комментарий5 минут чтения
Как использовать Emmet с React/JSX?
Жане Сухадольник
Жане Сухадольник
#help #эммет #реагировать #jsx
Реакции 18 отзывов Комментарии 5 комментариев1 мин чтения
Установите Emmet (кодирование Zen) в Sublime Text
Адам К.
Дин
Адам К. Дин
#sublimetext #эммет #зенкодирование
Реакции 3 реакции Комментарии Добавить комментарий1 мин чтения
Извлечение и использование пакета NPM Emmet в качестве модуля javascript и использование его в браузере
netsi1964 🙏🏻
нетси1964 🙏🏻
#codepen #эммет # нпм
Реакции 4 реакции Комментарии Добавить комментарий1 мин чтения
загрузка.
..
возвышенный текст
Дэйв Розофф
Sublime Text — это быстрый кроссплатформенный редактор с тысячами пользовательских пакетов, реализованных в Python 9.0751 API . Он не бесплатный и не с открытым исходным кодом, хотя большинство пакетов, созданных пользователями, являются обоими. Разработка активна по состоянию на июнь 2016 г.
Здесь мы описываем несколько наиболее важных функций Sublime Text, которые помогут вам свести к минимуму накладные расходы на набор текста и более эффективно работать с вашим проектом MathBook XML . Мы также представляем пакет MBXTools, призванный помочь авторам MathBook XML работать более эффективно.
Sublime Text 2 и 3 доступны в течение неограниченного ознакомительного периода, но для дальнейшего использования необходимо приобрести лицензию. Я обнаружил, что дополнительные функции Sublime Text 3 полностью оправдывают стоимость лицензии.
Подраздел D.1.1 Настройки
Настройки Sublime Text хранятся и управляются в коллекции файлов JSON в виде пар ключ-значение в файлах с расширением .. Вы можете изменить настройки, посетив эти файлы и отредактировав значения, отличные от значений по умолчанию.
sublime-settings
Чтобы отредактировать настройки Sublime Text, вы можете использовать меню Preferences/Settings — User (Sublime Text/Preferences… в OS X ). Убедитесь, что когда вы переходите к редактированию настроек, вы всегда выбираете опцию «Пользователь». Изменения в файлах настроек по умолчанию будут перезаписаны при обновлении Sublime Text. Рекомендуется использовать файлы по умолчанию, чтобы увидеть, какие настройки доступны для изменения. Их много, и не все задокументированы.
Все пользователи Sublime Text должны знать, что конкретное представление (буфер) может получать настройки несколькими различными способами, например, из глобальных настроек по умолчанию, из глобальных настроек ОС , из настроек, предоставляемых пакетом, из настроек, предоставляемых пользователем , и так далее.
Привязки клавиш также хранятся в файлах аналогичного формата.
Доступно лишь ограниченное количество сочетаний клавиш, хотя Sublime Text поддерживает многошаговые сочетания клавиш, такие как Emacs. Если вы обнаружите, что хотите переназначить сочетания клавиш, это, безусловно, возможно через меню «Настройки/Привязки клавиш» — «Пользователь» (Sublime Text/Preferences… на OS X ).
Подраздел D.1.2 Управление пакетами
Sublime Text Python API раскрывает множество внутренних компонентов Sublime Text авторам плагинов и пакетов. Пакеты расширяют функциональность Sublime Text, подобно основным режимам Emacs. Пакет обычно состоит из нескольких сценариев Python, которые определяют события и действия Sublime Text, некоторых текстовых файлов конфигурации (файлы XML / JSON / YAML , определяющие синтаксис языка, распознавание символов, настраиваемые триггеры и контексты вставки фрагментов, сочетания клавиш для новых и старых команд и т. д.), и, возможно, что-то еще. Обычно они объединяются в . архив, замаскированный необычным расширением 
zip .sublime-package . Эти архивы находятся в каталоге Packages, доступном через меню Preferences (меню Sublime Text/Preferences в OS X ). Sublime Text отслеживает каталог Packages на наличие изменений и перезагружает все затронутые плагины на лету.
Первое, что вы должны сделать после установки Sublime Text, это установить пакет управления пакетами. Этот менеджер пакетов работает в Sublime Text для автоматического получения обновлений для установленных вами пакетов (если вы не отключите эту функцию). Вы также можете перечислить установленные пакеты, найти новые пакеты для изучения, удалить пакеты и т. д.
Тысячи пользовательских пакетов доступны для простой установки через Управление пакетами. Пакеты можно поддерживать вручную, так как большинство авторов пакетов публикуют их через GitHub, но Package Control — это повсеместно рекомендуемый метод получения, управления и удаления пакетов для вашей установки.
Посетите сайт загрузки Package Control 1 .
Найдите консольную команду Sublime Text (убедитесь, что выбрана правильная версия Sublime Text) и скопируйте ее в буфер обмена.
Откройте консоль Sublime Text (
Ctrl-`) и вставьте команду в появившееся окно, затем нажмитеEnter.
Установив Package Control, вы можете использовать палитру команд для развертывания его команд, таких как «Установить пакет», «Список пакетов» и «Удалить пакет». См. документацию для получения дополнительной информации. В этом разделе рекомендуется несколько особенно полезных пакетов, а их краткое описание приведено в подразделе D.1.9.
Подраздел D.1.3 (*) Сочетания клавиш
Будет записано.
Подраздел D.1.4 Управление проектом
Как и многие современные редакторы, Sublime Text имеет хорошие функции управления проектами. Это позволяет файлам, являющимся частью более крупного проекта, работать вместе.
Например, команда Sublime Goto Anything обеспечивает быстрый доступ к любому файлу в проекте. Команда «Найти в проекте» позволяет пользователям выполнять поиск и замену (с регулярными выражениями или без них) во всем проекте. Совпадения отображаются в текстовом буфере, а двойной щелчок открывает соответствующий файл в соответствующей позиции.
Боковая панель обеспечивает удобный просмотр всех файлов и каталогов в проекте или, если хотите, отфильтрованный вид, из которого исключаются файлы по вашему выбору. В пакете MBXTools (подраздел D.1.7) также используются настройки, специфичные для проекта, чтобы обеспечить некоторые из его функций.
Подподраздел D.1.4.1 Команда «Открыть папку»
Самый простой способ использовать функции управления проектами — хранить связанные файлы в одном каталоге и его подкаталогах. Если вы затем используете команду «Файл/Открыть папку…», открывается весь каталог, а все его подкаталоги и файлы отображаются на боковой панели. Вы можете переключать боковую панель либо с помощью палитры команд, либо напрямую с помощью Ctrl+K, Ctrl+B ( Cmd+K, Cmd+B на OS X ).
Используя эту команду, вы уже используете управление проектом, даже если вы никогда не сохраняете свой проект. В Sublime Text всегда открыт неявный проект, если вы не открываете явный. В большинстве случаев этого достаточно для многих пользователей, поскольку он предоставляет наиболее полезную функцию (Найти/Найти в проекте). Команда «Перейти/Перейти к символу в проекте» также полезна, но не полностью реализована в MBXTools (подраздел D.1.7). Ниже описаны некоторые преимущества явного управления проектами.
Подподраздел D.1.4.2 Явные проекты
Чтобы явно сохранить проект, в меню «Проект» выберите «Сохранить как проект…» и выберите подходящее имя и местоположение. Для проекта MathBook XML это, вероятно, будет тем же именем и местоположением, что и корневой файл документа. Используйте команды меню «Проект», чтобы открывать и закрывать проект.
Существует несколько преимуществ использования явного проекта для группировки файлов.
Вы можете группировать файлы и папки в разных частях файловой системы, вместо того, чтобы ограничиваться поддеревьями.
У вас могут быть настройки для конкретного проекта, которые отличаются от настроек Sublime Text по умолчанию и от ваших пользовательских настроек (
[предварительная перекрестная ссылка: настройки подраздела]).Рабочие пространства проекта Sublime запомнят, какие файлы вы открывали при последнем закрытии проекта и в каких позициях.
Если вам очень нравится, вы можете иметь несколько рабочих пространств для одного и того же проекта с разными фильтрами и представлениями для разных целей.
Можно включать файлы
.sublime-projectв репозитории Git, но файлы.sublime-workspaceдолжны включать и никогда (согласно документации Sublime Text).
Подраздел D.1.5 Множественный выбор
Множественный выбор — самая полезная и незаменимая функция Sublime Text, которая заставит вас вернуться. Из документации:
Любая похвала множественному выбору — это преуменьшение.
Базовая функциональность множественного выбора проста. Удерживая нажатой клавишу Ctrl ( Cmd в OS X ), щелкните где-нибудь в открытом виде, чтобы появился второй курсор. Продолжайте добавлять курсоры. Все они будут вести себя вместе, когда вы печатаете: текст будет вставлен, большинство фрагментов или других текстовых команд работают как обычно и т. д. Даже команды мыши работают интуитивно понятным образом с множественным выбором.
Трудно точно объяснить, что делает множественный выбор таким мощным. Вы просто должны попробовать это сами. Вот типичный пример. В структурированном документе многие биты текста встречаются довольно часто — например, имена элементов и атрибутов. Вы можете захотеть обновить сразу несколько вхождений фрагмента, сделав несколько идентичных изменений. Команда Sublime Quick Add Next ( Ctrl+D / Cmd+D ) делает это проще простого.
Поместите курсор где-нибудь в слове, которое вы хотите изменить.
Используйте Quick Add Next, чтобы расширить (пустое) выделение до текущего слова.
Снова используйте функцию «Быстрое добавление следующего», чтобы добавить к выборке следующий экземпляр, который затем обычно отключается.
Продолжайте быстрое добавление следующего столько раз, сколько хотите. Использовать быстрый переход «Далее» (
Ctrl+K, Ctrl+D/Cmd+K, Cmd+D), чтобы перепрыгнуть через экземпляры, которые вы хотели бы оставить в покое. Если вы зашли слишком далеко и выбрали ошибку, нажмитеCtrl+U/Cmd+U, чтобы отменить действие.Сделайте свою модификацию только один раз.
Другим примером, который часто возникает при создании XML , является использование фрагмента Wrap with Tag ( Alt+Shift+W / Ctrl+Shift+W ). Этот фрагмент оборачивает выбранные элементы в тег 
Если 9Элемент 0014 p не то, что вы хотели, просто введите. Оба тега заменены. Это огромное преимущество для автора XML , который существенно использует множественный выбор, даже если вы едва замечаете это, когда используете эту функцию.
Выбор столбца позволяет выбрать прямоугольную область файла. Это невероятно полезно при редактировании структурированного документа. Есть много способов сделать это (почти исчерпывающий список см. в документации Sublime Text 3 ), но чаще всего используется нажатие Shift при нажатии и перетаскивании правой кнопкой мыши (в OS X удерживайте нажатой Option при перетаскивании правой кнопкой мыши). См. документацию по сочетаниям клавиш.
Выбор столбца становится еще более полезным при использовании в сочетании с сочетаниями клавиш для перемещения и выделения, такими как Ctrl+Shift+Right (выделить до конца слова) и Shift+End (выделить до конца строки).
Еще один пример ужасающе полезного множественного выбора возникает при копировании и вставке из файла другого формата. Предположим, вы скопировали несколько строк текста и хотите, чтобы каждая такая строка стала элементом списка в вашем MathBook 9.0751 Источник XML .
Используйте выбор столбца, как описано выше, чтобы выбрать каждую строку отдельно.
Используйте Обтекание тегом, чтобы обернуть каждую из выбранных строк совпадающими тегами начала/конца
Теперь вам нужно снова выбрать строки, чтобы обернуть их совпадающими тегами begin/end
Shift+End, чтобы выбрать конец строки.Если ваши строки переносятся, вам может понадобиться нажать
Shift+Endеще раз, чтобы добраться до конца перенесенных строк.Теперь вы выбрали слишком далеко:
также выбраны. Удерживая Используйте Обтекание тегом, чтобы обернуть каждую из выбранных строк совпадающими тегами начала/конца
Ctrl+Shift , дважды нажмите стрелку влево (отменить выделение по слову).
(После небольшой практики такие шаги кажутся автоматическими.)Это требует небольшой работы с мышью, но экономия клавиш может быть значительной. (Пакет Emmet, описанный в подразделе D.1.6, обеспечивает еще более быстрый способ выполнения этой задачи и гораздо более сложные.)
Существует так много невероятно удобных способов использования множественного выбора, что мы воздержимся от дальнейших примеров, чтобы предоставить читателю удовольствие открыть для себя свои собственные фавориты. Одним из особенно полезных пакетов является Text Pastry, который предоставляет некоторые команды автонумерации и вставки текста, которые хорошо работают с множественным выбором. Существует также несколько пакетов, расширяющих функциональность множественного выбора, таких как PowerCursors и MultiEditUtils. PowerCursors позволяет добавлять курсоры и управлять ими без использования мыши.
MultiEditUtils предоставляет дополнительные команды обработки текста, предназначенные для работы с множественным выделением.
Подраздел D.1.6 Эммет
Emmet — самый загружаемый плагин для Sublime Text (1,82 миллиона установок через Package Control). Он в основном используется авторами HTML и CSS и предоставляет им множество функций. Это также полезно для записи XML , как мы видим ниже. Основными преимуществами работы с Emmet являются простота создания, обработки и удаления тегов.
Emmet по умолчанию переопределяет привязку Sublime к клавише Tab , наделяя ее новым поведением (команда Expand Abbreviation). Это новое поведение заключается в создании соответствия Пара тегов XML для любого слова, которое находится слева от знака вставки, или для любых выбранных слов. Например, если вы наберете «ol» и нажмете клавишу Tab , результирующий текст будет
<ол>
с кареткой, расположенной между двумя вновь созданными тегами.
При повторном нажатии Tab курсор перемещается вправо от конечного тега.
Emmet создаст любое слово, которое он не распознает, в совпадающую пару тегов при выполнении команды Expand Abbreviation. Некоторые 9Однако элементы 0751 XML пусты. В совпадающей паре тегов команда Разделить/Объединить тег ( Ctrl+Shift+` / Cmd+Shift+` ) свернет его в пустой тег, удалив любой текст между существующими начальным и конечным тегами. (Если символ вставки равен внутри тега для пустого элемента, эта команда заменяет пустой элемент соответствующей парой начального/конечного тега.)
Поведение по умолчанию (создание пар тегов при каждом нажатии Tab ) мешает обычному завершению Tab в Sublime Text, что может быть нежелательно. Его можно отключить, настроив
"disabled_keymap_actions": "expand_abbreviation_by_tab"
в Preferences/Package Settings/Emmet/Settings — Пользовательский файл. Функциональность Expand Abbreviation по-прежнему будет доступна через Ctrl+E .
В качестве более сложного примера аббревиатур предположим, что вы вставили элементы упорядоченного списка. Теперь вам нужно структурировать его с помощью ol , li и так далее.
Списки часто хороши. Вы можете указать элементы списка с помощью@xml:id . Однако вы, вероятно, не хотите их нумеровать.
Требуемый результат:
<ол>
Используя Emmet, его можно создать, выполнив команду Wrap as you Type ( Ctrl+Shift+G / Ctrl+W ) и введя следующее выражение в минибуфер.
ол>ли[xml:id=item$]*>р
Символ > обозначает дочерний элемент, квадратные скобки (с присвоением или без) обозначают список атрибутов, $ обеспечивает нумерацию строк, а * указывает перенос каждой выбранной строки с указанным поддеревом (поэтому каждая строка оборачивается 
Эммет может создать большую иерархию вложенных Теги XML на различных уровнях с использованием этого синтаксиса аббревиатуры. Например, предположим, что вы знаете, что вам нужно создать структуру тега следующей формы.
<раздел xml:id="">
<введение>
<подраздел xml:id="">
<рисунок>
<ол>
<заключение>
9вывод>p
После ввода этой строки и размещения курсора справа от нее нажмите Ctrl+E (или Tab , если вы не отключили Emmet по умолчанию). Сразу же создается вся древовидная структура с позициями табуляции для отсутствующих значений атрибутов и для каждой совпадающей пары начала/конца.
Команда «Расширять аббревиатуру при вводе» позволяет изменять такие аббревиатуры в интерактивном режиме.
Нажмите Ctrl+Alt+Enter и введите приведенное выше выражение в минибуфер в нижней части окна, наблюдая, как дерево появляется по мере ввода.
Emmet — очень мощный пакет, который может делать гораздо больше, чем описано здесь. Однако по умолчанию он в основном адаптирован для написания CSS и HTML. Его настройка для более непосредственной работы с MathBook XML является текущим проектом. Вы можете узнать больше об Emmet, изучив документацию Emmet 4 или покопавшись в файлах Settings и Keymap.
Подраздел D.1.7 MBXTools — пакет Sublime Text для MathBook
XMLMBXTools — это пакет Sublime Text, предназначенный для помощи авторам в использовании MathBook 9.0751 XML . Это очень экспериментально и может вести себя неожиданно.
Пакет своим вдохновением и большей частью своего кода обязан превосходному пакету LaTeXTools 5 . Сообщите автору о любых обнаруженных вами ошибках или функциях, которые вы хотели бы видеть включенными в MBXTools, создав выпуск GitHub 6 .
Подподраздел D.1.7.1 Установка
через управление пакетами.
Рекомендуется устанавливать MBXTools через Package Control 7 . Если вы еще не установили Package Control, вам следует сделать это в первую очередь (а затем перезапустить Sublime Text).
После установки Package Control используйте команду Install Package для поиска пакета MBXTools и выберите его на панели быстрого доступа для установки. Этот метод установки позволяет Package Control автоматически обновлять вашу установку и показывать вам соответствующие примечания к выпуску.
через git.
Вы также можете установить MBXTools через гит . Перейдите в папку Packages . Чтобы найти папку Packages , выберите Browse Packages в меню Preferences (из меню Sublime Text 3 в OS X). Убедитесь, что вы находитесь в папке Packages и , а не Packages/User .
Затем запустите
клонgit https://github.
com/daverosoff/MBXTools.git и перезапустите Sublime Text (вероятно, не обязательно).
Подподраздел D.1.7.2 Использование
Вы можете активировать функции пакета, включив синтаксис MathBook XML . Определение синтаксиса ищет расширения файлов .mbx , которые большинство из нас не используют (пока?). Если ваши файлы MathBook XML заканчиваются на .xml , вам нужно либо добавить комментарий к первой строке каждого файла (после объявления XML ):
или вам нужно будет включить синтаксис вручную с помощью палитры команд. Чтобы включить его вручную, откройте MathBook XML и нажмите Ctrl+Shift+P ( Cmd+Shift+P в OS X ) и введите предлог . Выберите «Установить синтаксис: MathBook XML » из списка вариантов.
Вы должны увидеть текст «MathBook XML » в правом нижнем углу, если у вас есть видимая строка состояния (палитра команд: Переключить строку состояния).
На данный момент реализовано всего несколько функций.
Если в файле MBX есть разделы, нажмите
Ctrl+R(Cmd+Rв OS X ) для запуска команды «Перейти к символу». Вы должны увидеть панель, показывающую имена всех подразделений@xml:id.Если вы использовали
@xml:idдля маркировки своих материалов, попробуйте ввести
Тип
chp,сек,секилиsssecи нажмитеTab, чтобы активировать фрагменты деления. Предусмотрен пустой элементtitle, внутри которого находится курсор. По мере ввода поле@xml:idдля подразделения заполняется аналогичным текстом, отражающим заголовок, который вы вводите.
Подподраздел D.1.7.3 Известные проблемы
При ручном добавлении внешней ссылки
Фрагмент кода
refне вызывает панель быстрого доступа. Должен ли?Рекурсивный поиск меток во включенных файлах пока не реализован.
Это будет работать только для завершения
xref, но не для перехода к символу.Ничего не тестировалось на OS X или Linux.
Подраздел D.1.8 (*) Sublime Linter
Будет записано.
Подраздел D.1.9 Рекомендуемые пакеты
Контроль пакетов
Эммет
Улучшения боковой панели
PowerCursors
MultiEditUtils
Текстовое печенье
Git или SublimeGit
СублимЛинтер
MBXTools
17 лучших бесплатных плагинов для Sublime Text
Текстовые редакторы — один из самых основных инструментов, который должен быть в арсенале каждого разработчика. Однако независимо от того, выберете ли вы Vim, Atom или Sublime Text, одно можно сказать наверняка: вам потребуются плагины для получения желаемой функциональности.
Даже не важно, являетесь ли вы веб-разработчиком или программистом на Python. Хотите сделать свой текстовый редактор удобным инструментом для написания кода? Вам нужно будет загрузить и установить плагины или расширения.
Когда дело доходит до Sublime Text, есть веская причина его популярности среди аналогов. Он содержит довольно много встроенных функций, которые делают этот легкий кроссплатформенный инструмент любимым многими, несмотря на его стоимость лицензии.
Возможности Sublime Text 3 (последняя коммерческая версия) предлагает разработчикам включить определение GoTo, панель команд, раздельное редактирование и список удобных предустановленных сочетаний клавиш . Однако , если вам нужно больше, чем поддержка уценки и проверка орфографии для текста? Вам придется обратиться к плагинам (также известным как пакеты) для вашего Sublime Text .
Стоит отметить, что наш список наших любимых плагинов Sublime Text довольно разносторонний и (в основном) случайный по порядку. В нашем списке из семнадцати лучших пакетов Sublime Text каждый найдет что-то для себя как с общими пакетами, так и с расширениями, предназначенными для разработчиков на определенных языках или стеках.
Прежде чем вы сможете установить какие-либо пакеты для расширения функциональности Sublime text, вам понадобится менеджер пакетов. Это делает Package Control наиболее важным плагином для Sublime Text.
Как следует из названия, Package Control позволяет устанавливать, загружать и обновлять пакеты в Sublime Text. Он включает в себя список из более чем 2500 пакетов, доступных для установки . Кроме того, вы можете добавить любой репозиторий GitHub или BitBucket в виде пакета.
Управление пакетами также автоматически обновляет установленные пакеты, чтобы свести к минимуму время, затрачиваемое на обслуживание. Таким образом, вы можете сосредоточиться на фактическом кодировании и поиске обновлений пакетов для Sublime Text.
2. Tabnine Наше собственное решение для интеллектуального завершения кода на основе ИИ имеет собственный подключаемый модуль Sublime Text. Он заменяет родную функцию автоматического завершения Sublime Text гораздо более комплексным решением.
Tabnine индексирует весь ваш проект, читая ваш .gitignore или другие, и определяет, какие файлы индексировать . С помощью этих данных он может предсказывать длинные имена файлов до того, как вы их наберете, используя механизм мнемонического завершения с почти мгновенными предложениями по мере ввода.
Начать бесплатную пробную версию
3. EmmetЕсли вы разработчик внешнего интерфейса, скорее всего, вы знакомы с Emmet независимо от редактора или IDE, которые вы используете в своей повседневной работе. Emmet оптимизирует работу с HTML и CSS, помогая вам печатать намного меньше. Он позволяет использовать сокращения, которые автоматически преобразуются в полнофункциональный код 9.0432 . Затем вы можете взаимодействовать с полученными фрагментами кода, чтобы добавлять теги и вносить другие изменения.
Как и ожидалось, Emmet доступен в виде загружаемого пакета Sublime Text из расширения Package Control.
Хотя этот плагин устарел и изначально был создан для Sublime Text 2, он продолжает поддерживать постоянный поток загрузок на packagecontrol.io
Выравнивание — полезный инструмент для выравнивание нескольких секций или многострочных секций . Это простой пакет привязки клавиш, который выравнивает ваш выбор при нажатии ctrl + alt + a в Windows или cmd + ctrl + a на Mac . Конечно, вы можете назначить другие разделители для экономии нажатий клавиш и времени.
5. JSHintКачество кода имеет значение. Нам не нужно говорить вам это. Когда дело доходит до разработки JavaScript, одним из решений, которое должен знать каждый разработчик JavaScript, является JSHint.
JSHint — это интуитивно понятное расширение, которое добавляет возможности отладки JavaScript в вашу среду IDE или текстовый редактор по выбору . Конечно, есть пакет для интеграции с Sublime Text.
После установки и запуска JSHint открывается в новом окне, где отображаются возможные ошибки и проблемы в коде. Если вы хотите увидеть его в действии, вы можете поиграть с веб-версией на веб-сайте JSHint.
6. SideBarEnhancementsОбеспечивает улучшения операций на боковой панели файлов и папок для Sublime Text . Среди других функций он устанавливает удаление в «Переместить в корзину», добавляет опцию «Открыть с помощью…», а также множество действий, которые вы можете выполнять с файлами и папками, не закрывая Sublime Text для выполнения действий с файлами.
Стоит отметить, что SideBarEnhancements не только является одним из самых загружаемых пакетов, но и хорошо поддерживается на GitHub.
7. SublimeLinter SublimeLinter — это плагин для Sublime Text, который предоставляет основу для анализа кода. SublimeLinter, один из самых загружаемых пакетов, доступных для Sublime Text (в топ-25), на самом деле сам по себе не линтит.
Чтобы выполнить анализ вашего кода, вам также необходимо установить пакет, подходящий для языка или языков, на которых вы программируете.
Хотя это может показаться небольшим изменением в вашем рабочем процессе, автоматическое завершение имен файлов в вашем коде может сэкономить вам много времени и усилий. После установки все, что вам нужно сделать, это нажать Ctrl + пробел при попытке создать ссылку на файл. Затем AutoFileName откроет список файлов и каталогов, которые вы можете легко просмотреть и выбрать.
Чтобы сделать работу еще более эффективной, вы можете настроить AutoFilename для автоматического отображения при нажатии / . Еще меньше нажатий клавиш!
9. GitGutterGitGutter — это подключаемый модуль Sublime Text, который показывает информацию о файлах в репозитории git таким образом, который вдохновлен Atom .
Как следует из названия, он покажет вам значки Gutter для обозначения вставленных, измененных или удаленных строк.
При наведении курсора на значки появится всплывающее окно Diff с подробной информацией об измененных строках. Затем вы можете перемещаться между изменениями и выполнять команды для каждого изменения.
Делает именно то, о чем говорит название, добавляя диалоговое окно выбора цвета, чтобы вы могли легко вставлять или изменять ссылки на цвета в своем коде . Чтобы открыть палитру цветов, просто введите cmd+shift+c на Mac или ctrl+shift+c в Windows или Linux. По умолчанию шестнадцатеричный код вставляется в верхнем регистре, но вы можете настроить его так, чтобы он вставлялся в нижнем регистре в настройках пакета.
11. FileDiffsКто трогал ваши файлы и что они делали? Кто менее критичен, чем внесенные изменения, и здесь пригодится пакет плагинов FileDiffs.
Вместо того, чтобы вручную копаться в истории репозитория git или (не дай Бог!) в содержимом файлов, вы можете использовать FileDiffs .
Он покажет вам различия между текущим файлом или выборками в текущем файле и буфером обмена, другим файлом или несохраненными изменениями. FileDiffs также можно настроить для работы с внешними инструментами сравнения в Sublime Text.
При работе с кодом скобки и теги могут стать бесконечным источником ошибок и ошибок компиляции. Это делает Bracket Highlighter обязательным пакетом плагинов для большинства пользователей Sublime Text.
Bracket Highlighter соответствует различным открывающим и закрывающим скобкам, таким как: [] , () , {} , "" , '' , .
Стоит отметить, что упомянутый выше плагин Emmet добавляет некоторые функции выделения скобок. Тем не менее, если вы ищете более настраиваемый и всеобъемлющий инструмент, Bracket Highlighter — это ваш пакет плагинов.
13.
GitHubinator GitHubunator — это пакет, который позволит вам выбирать текст в файле Sublime Text и видеть выделенные строки в удаленном репозитории GitHub или BitBucket . Все, что вам нужно сделать, это выделить текст, который вы хотите найти, а затем щелкнуть правой кнопкой мыши, чтобы открыть контекстное меню. Затем вы можете запустить соответствующую веб-страницу Github или Bitbucket в браузере по умолчанию.
14. ChangeQuotesChangeQuotes преобразует одинарные в двойные или двойные в одинарные кавычки, пытаясь сохранить правильное экранирование . Чтобы запустить его, поместите курсор в любое место внутри цитируемого текста, затем откройте палитру команд, чтобы запустить его.
15. Themr Поиск правильной темы и стиля подсветки синтаксиса — это вопрос проб и ошибок. Для тех, кто хочет выйти за рамки стандартных тем, встроенных в Sublime Text, Themr — это плагин, который вы ищете .
Он позволяет быстро и легко переключаться между доступными темами пользовательского интерфейса вперед, назад или случайным образом с помощью палитры команд или сочетаний клавиш.
Вы также можете добавлять новые темы, упорядочивать их и сохранять как предустановки. Вы даже можете назначить сочетания клавиш для быстрого доступа к любимым темам.
16. LiveReloadНебольшой, но необходимый плагин для большинства веб-разработчиков — LiveReload. Вместо того, чтобы обновлять браузер каждый раз, когда вы вносите крошечные изменения в файл, чтобы увидеть результаты? LiveReload просто синхронизируется с выбранным вами браузером и мгновенно отображает обновленные результаты .
17. Терминал И последнее, но не менее важное: плагин Sublime Text, который оптимизирует использование функций терминала . Этот полезный плагин создает сочетания клавиш и элементы меню, которые можно использовать для быстрого открытия терминала, где бы вы ни находились.
Так, например, вы можете запустить терминал в позиции редактируемого в данный момент файла или перейти в корневую папку проекта.
Этот список ни в коем случае не является исчерпывающим. На самом деле, на момент написания только с packagecontrol.io можно было загрузить чуть более 5000 пакетов! Так что нет сомнений, что мы упустили несколько плагинов и расширений, без которых вы просто не можете жить. Что он?
Плагины Sublime Text 3 для веб-разработчиков
Правильный набор плагинов может сделать ваше время в любом приложении намного более продуктивным. Если вы веб-разработчик, работающий над Sublime Text 3, мы настоятельно рекомендуем внимательно изучить эти плагины.
- Контроль пакетов
- HTMLPrettify
- Эммет
- Подсветка кронштейнов
- jQuery
- Модификация корпуса
Управление пакетами
Управление пакетами — это подключаемый модуль (он же пакет), упрощающий поиск, установку и обновление других пакетов.
В идеале, это плагин, который вы хотите установить первым. Это значительно упрощает работу со всеми другими плагинами.
Как установить
- Перейдите на страницу https://packagecontrol.io/installation и скопируйте туда длинную команду. Это будет выглядеть примерно так:
- Нажмите Control-обратную галочку (
⌃ `), чтобы открыть Sublime Text Console. - Вставьте длинную командную строку и нажмите
return. - После запуска команды вы, вероятно, увидите всплывающее окно с небольшим предупреждением.
- Нажмите OK.
- Закройте и перезапустите Sublime Text.
- Нажмите Shift-Command-P (
⇧⌘P) для OSX или Control-Shift-P (⌃⇧P) для Windows, чтобы открыть палитру команд. - Начните вводить
Package Control, чтобы увидеть все команды.
Мы будем использовать Package Control: Install Package для остальных плагинов.
HTMLPrettify
HTMLPrettify берет длинные строки HTML, CSS, JavaScript и JSON и форматирует их так, чтобы их можно было читать, а не пытаться анализировать сплошной текст.
Как установить
- Нажмите Shift-Command-P (
⇧⌘P) для OSX или Control-Shift-P (⌃⇧P) для Windows, чтобы открыть палитру команд. - Начните вводить
Package Control, чтобы увидеть все команды. ВыберитеУправление пакетами: Установить пакет. Появится меню доступных плагинов. - Начните вводить
HTMLPrettify. - Нажмите
HTML-CSS-JS Prettify. Это немного другое имя, но не волнуйтесь — это тот же самый плагин.
Вы можете увидеть HTMLPrettify в действии в этом 14-секундном видео.
Эммет
Раньше Эммета называли Zen Coding, и он существует уже некоторое время. Это позволяет вам писать сокращенные HTML и CSS. Например, набрав это:
#page>div.logo+ul#navigation>li*5>a{Item $}
и нажав вкладку , вы получите следующее:
1 2 3 4 5 6 7 8 9 10 | <дел>
<дел>
<ул>
|
После установки Emmet через Package Control перезапустите Sublime Text.
Чтобы Emmet работал, убедитесь, что вы установили синтаксис для своего документа. В противном случае это не сработает.
Попробуйте. Введите это:
1 | nav#menuSystem.navMenu.isOpen>div#hotelLogo>div.navMenuIcon.logoIcon+div#arrowPointer+ul#navMenuMain>li.navMenuItem.navMenuItem$$$*2>div.navMenuIcon{Item $}+a {Товар $} |
и нажмите вкладку . (Вы также можете использовать Control-E ⌃E )
Бам!
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <навигация>
<дел>
<дел>
<дел>
<ул>
Элемент 1
Элемент 1
Элемент 2
Элемент 2
|
Потребуется некоторое время, чтобы изучить все сочетания клавиш, но если вы пишете много HTML, это стоит вложений.
BracketHighlighter
BracketHighlighter — отличный инструмент для выделения скобок и ярлыков.
После установки с помощью Package Control вы можете щелкнуть в любом месте JavaScript или HTML и увидеть начальную и конечную скобки в левом столбце.
jQuery
Подключаемый модуль jQuery обеспечивает правильную окраску синтаксиса для методов jQuery и предоставляет фрагменты jQuery для завершения кода.
Преобразование регистра
Преобразование регистра позволяет переключаться между змеиным регистром, верблюжьим регистром, паскалькейсом и/или другими.
После установки Case Conversion через Package Control (введите «pic», чтобы получить ярлык для перехода к Install Package), попробуйте:
До: navMenu
Нажмите: ⌃⌥c , затем ⌃⌥s
После: nav_menu
Обратите внимание, что это не будет работать должным образом, если вы попытаетесь преобразовать регистр на всей строке.