Sublime text 3 не работает emmet tab: Не работает emmet в sublime text 3 при генерации html-разметки. как исправить?

Содержание

emmet sublime text 3 не работает tab

На чтение 3 мин. Просмотров 100 Опубликовано 15.12.2019

Структура html не появляется после нажатия ! + tab. Также не работает ul>li*5 . Переустановка не помогает. https://github.com/sergeche/emmet-sublime/issues/478 данные инструкции тоже не помогли решить проблему.

Preferences -> Settings. Проверьте что в ignored_packages нет Emmet и других плагинов

Помогло переназначение хоткеев tab в emmet >KeyBindings >User.

У меня не работал Emmet, много что перепробовал, ничего не помогало. Вот что я сделал чтобы проблема ушла! Сначала создаем новый документ Сtrl+N, затем Ctrl+S сохраняем указывая имя файла Index.html (важность играет именно приписка .html, а не само название), после чего сохраняем. Вуаля.

В настройках надо отключить включить HTML-синтаксис и будет вам счастье

Так может случиться, что В emmet не работает Tab у редактора Sublime text, и я тоже кучу всего перерыл в интернете, но не нашел. сделал сам.

На самом деле я понял, что у меня emmet не работает вообще, видимо настройки разных плагинов пересеклись или еще что. помучившись целый час или два я вот что сделал:

Preferences -> Browse Packages. (описание режима в настройках sublime text3) — открывается папка с настройками плагинов, но мы идем на уровень выше Installed Packages (тут находятся основные пакеты редактора) — и находим в этой папке Emmet.sublime-package или что-то похоже (ко времени, когда вы читаете эту статью все может измениться) — теперь закрываете саму программу и только потом удаляете этот файл — так мы удалили emmet.
Далее открываете программу sublime text 3 по новой и нажимаете ctrl+shift+P , набираете букву i — и увидите Control Control: Install Package — нажимаете — вводите emmet и нажимаете enter. Кстати, раньше он назывался просто emmet, а сейчас типа emmet css style — что-то такое. Плагин установится, опять перезапускаем программу и радуемся.

То есть в итоге помогла переустановка emmet. я рад) надеюсь и вам помогло

Более новые статьи:

В notepad++ я долго искал как же мне выставлять пробелы или tab перед строками, прям уже так раздражало, что в sublime это с emmet сразу идет, а тут э …

«>Вставить Tab перед строками в notepad++ — 18/05/2016 12:55
Emmet — это скорость набора тегов для веб-верстальщиков. сокращенные команды+определенная клавиша и страница может быть заполнена. давайте настроим …

«>Настраиваем Emmet в notepad++ — 18/05/2016 12:08
Сегодня нам обязательно надо поговорить о кратких командах в emmet.

Более старые статьи:

Редактор Sublime text 3 — является прогрессивным решением в сфере редактирования кода. если вы профессионально занимаетесь сайтами, то он вам просто …

«>Редактор Sublime text 3 настройка
Первой проблемой, которая обычно бывает у новичков при работе с виртуальными машинами — является залипание мыши на экране виртуалки и он никак не може …

«>Команды VirtualBox — горячие клавиши
Если вы не знаете, где скачать и как установить виртуальную машину VMware. то этот пост для вас. …

Установила все как на видео. При нажатии клавиши TAB после shift+1 ничего не открывается. Что с этим делать?

3 ответов

Shift+! затем клавишу TAB нужно нажать, чтобы построилась HTML5 разметка. Предварительно файл нужно сохранить, наприимер как index.html

Здесь https://fructcode.com/ru/courses/bootstrap/grid-system/ уже встроен EMMET, можно удалить код и нажать на вышесказанное сочетание. Если здесь будет работать, а в вашем редакторе нет, тогда где-то неправильно установили плагин emmet.

Скорее всего при сохранении файла, Вы не поставили расширение .html.

Почему emmet не работает

После переустановки системы неожиданно перестал устанавливаться Emmet на Sublime Text 3. В общем то был раздосадован – потому, что если не работает Emmet, то такое чувство, что мир рухнул.

Мы уже говорили о том, как мы устанавливали Emmet.

Но тут мы установлю эту программу на новой машине и оказалось, что гребаный Emmet – категорически не хочет работать! Я сегодня потратил целую тучу времени и перечитал весь интернет! И что вы думаете!?

Я решил эту задачку! Вернее будет сказано, что она решилась сама автоматически!

Почему не работает Emmet!?

Сколько я не перечитал всего, и понял только одно! Что никто и ничего не знает об этой проблеме. Emmet просто не устанавливается и всё! Хоть ты тресни!

И как же я все-таки заставил Emmet работать!?

Блин! Он сам заработал, после несчетного количества установок и удалений! Он просто взял и заработал! Я не знаю почему он не работал – это уже вопрос, к разработчикам!

Так, что же нужно делать, если Emmet вдруг не работает!?

Переустанавливать до тех пор, пока он не заработает!

И конечно же не забываем! Что после установки, переустановки плагинов. следует перезагрузить программу!

Preferences -> Browse Packages. (описание режима в настройках sublime text3) – открывается папка с настройками плагинов, но мы идем на уровень выше Installed Packages (тут находятся основные пакеты редактора) – и находим в этой папке Emmet.sublime-package или что-то похоже (ко времени, когда вы читаете эту статью все может измениться) – теперь закрываете саму программу и только потом удаляете этот файл – так мы удалили emmet.
Далее открываете программу sublime text 3 по новой и нажимаете ctrl+shift+P , набираете букву i – и увидите Control Control: Install Package – нажимаете – вводите emmet и нажимаете enter. Кстати, раньше он назывался просто emmet, а сейчас типа emmet css style – что-то такое. Плагин установится, опять перезапускаем программу и радуемся.

То есть в итоге помогла переустановка emmet. я рад) надеюсь и вам помогло

Более новые статьи:

В notepad++ я долго искал как же мне выставлять пробелы или tab перед строками, прям уже так раздражало, что в sublime это с emmet сразу идет, а тут э …

«>Вставить Tab перед строками в notepad++ – 18/05/2016 12:55
Emmet – это скорость набора тегов для веб-верстальщиков. сокращенные команды+определенная клавиша и страница может быть заполнена. давайте настроим …

«>Настраиваем Emmet в notepad++ – 18/05/2016 12:08
Сегодня нам обязательно надо поговорить о кратких командах в emmet.

Более старые статьи:

Редактор Sublime text 3 – является прогрессивным решением в сфере редактирования кода. если вы профессионально занимаетесь сайтами, то он вам просто …

«>Редактор Sublime text 3 настройка
Первой проблемой, которая обычно бывает у новичков при работе с виртуальными машинами – является залипание мыши на экране виртуалки и он никак не може …

«>Команды VirtualBox – горячие клавиши
Если вы не знаете, где скачать и как установить виртуальную машину VMware. то этот пост для вас. …

Структура html не появляется после нажатия ! + tab. Также не работает ul>li*5. Переустановка не помогает.

) есть какая-нибудь ругань по поводу Emmet? (После установки из PackageControl, при попытке развернуть аббревиатуру, ещё в какой-нибудь момент. ) – user181100 23 ноя ’16 в 14:55

12 ответов 12

у меня тоже ни с того, ни с сего перестало работать развертывание. помог совет Прогера, ревключить синтаксис HTML На верхней панели инструментов ST ищем View, потом Syntax -> HTML, кликаем и проверяем. и переназначать ничего не надо было

Preferences -> Settings. Проверьте что в ignored_packages нет Emmet и других плагинов

Помогла переустановка emmet-а с последующим перезапуском Sublime Text

мне помогло удаление плагина colorPicker

У меня перестал работать плагин emmet. Нажатие кнопки TAB после знака ! = отступ, ul>li*5 = отступ. При этом в CSS все работает норм.

Проблему решил так: Package Settings > Emmet > Key bindings – user

строки 125, 126 – заменил «tab» на «alt+x»

Помогло переназначение хоткеев tab в emmet > KeyBindings > User.

В настройках надо отключить включить HTML-синтаксис и будет вам счастье

Нужно поменять синтаксис: View –> Syntax –> HTML

Расширение плагина Emmet не работает для Sublime Text 3

Я успешно установил Emmet через Управление пакетами.

Когда я набираю ul и нажимаю Tab, я получаю <ul></ul> .
Когда я набираю ul.class и нажимаю Tab, я получаю ul.body_class , но я хочу, чтобы он генерировал <ul></ul> .

Что я делаю не так?

Я читал сообщения о том, что нужно попробовать Ctl + E вместо Tab в качестве триггерной клавиши, но это ничего не дает.

sublimetext3

emmet

Поделиться

Источник

draney

23 августа 2015 в 13:58

5 ответов

Sublime 3 & Emmet
это может показаться глупым вопросом, но я просмотрел документы и, похоже, не могу заставить его работать. я использую windows 8, я установил emmet в свой sublime text 3, проверил консоль, и она, кажется, установлена нормально, Emmet: No need to update PyV8. пробовал использовать команды html:5 и…
Не удалось найти Emmet в package control в Sublime Text 3
Я пытаюсь установить Emmet через Управление пакетами в Sublime Text 3, но всякий раз, когда я ищу его, он просто не появляется. Есть идеи? Может быть, мне не хватает хранилища?

Попробуйте вместо этого использовать Ctrl + Space . Если это не сработает, вы можете попробовать изменить привязку ключей, поместив следующее в файл привязки ключей пользователя, который можно найти, выполнив Настройки -> Привязки ключей — Пользователь :

[
    {"keys": ["tab"], "args": {"action": "expand_abbreviation"}, "command": "run_emmet_action", "context": [{"key": "emmet_action_enabled.expand_abbreviation"}]}
]

а затем просто измените "tab" на любую привязку ключей, которую вы хотите. Проверьте, работает ли это.

Поделиться

Saad

24 августа 2015 в 14:58

Прочитав ваш вопрос, я установил Emmet в версию Windows Sublime Text 3 сегодня и столкнулся с той же проблемой. В ходе поиска решения я обнаружил следующее:

http://docs.emmet.io/действия/развернуть-аббревиатура/#комментарий-1272517661

В Windows я открыл настройки Эммета по умолчанию. Отправившись в:

Настройки > Настройки пакета > Emmet > Настройка — По умолчанию
и
Настройки > Настройки пакета > Emmet > Привязки ключей — По умолчанию

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

После перезагрузки Sublime Text 3:
Я создал новый файл html и смог ввести ul.class с вкладками , и он расширился до <ul class></ul>

Это было забавно, я никогда не сталкивался с такой проблемой с Sublime на моем Mac. Если вам нужно было выполнить тот же процесс на Mac, перейдите в Настройки > Настройки пакета > Emmet …

Поделиться

John Gratton

24 августа 2015 в 15:20

Я столкнулся с той же проблемой. Просто вставил приведенный ниже код в «Preferences -> Key Bindings — User:».

{
  "keys": ["tab"], 
  "command": "expand_abbreviation_by_tab", 

  // put comma-separated syntax selectors for which 
  // you want to expandEmmet abbreviations into "operand" key 
  // instead of SCOPE_SELECTOR.
  // Examples: source.js, text.html - source
  "context": [
    {
      "operand": "SCOPE_SELECTOR", 
      "operator": "equal", 
      "match_all": true, 
      "key": "selector"
    }, 

    // run only if there's no selected text
    {
      "match_all": true, 
      "key": "selection_empty"
    },

    // don't work if there are active tabstops
    {
      "operator": "equal", 
      "operand": false, 
      "match_all": true, 
      "key": "has_next_field"
    }, 

    // don't work if completion popup is visible and you
    // want to insert completion with Tab. If you want to
    // expand Emmet with Tab even if popup is visible -- 
    // remove this section
    {
      "operand": false, 
      "operator": "equal", 
      "match_all": true, 
      "key": "auto_complete_visible"
    }, 
    {
      "match_all": true, 
      "key": "is_abbreviation"
    }
  ]
}

Github: См. Более подробное описание

Поделиться

Ashish Singh Rawat

13 августа 2016 в 15:46

Sublime Text 3 Эммет кастомизация
Я использую ST3 с Emmet (Windows 7 64-bit) и хочу добавить некоторые пользовательские фрагменты, например CSS для запроса iPad media. Я не могу найти файл настроек Emmet, так как я могу это сделать? Я попытался создать стандартный фрагмент Sublime Text 3, но он не работает, поэтому я предполагаю,…
Sublime Text 3-Emmet shortcut for HTML 5 не работает.
Недавно я скачал sublime text 3 и установил emmet. Проблема, с которой я сталкиваюсь, заключается в том, что когда я пишу короткий код для HTML 5 и нажимаю tab, он не работает. Этот метод был использован в sublime text 2, и он сработал. Есть ли у кого-нибудь какие-либо решения этой проблемы?

Я проверяю , что ключ emmet по умолчанию равен ctrl+e, поэтому я добавляю его к своему Key Bindings - User :

{"keys": ["tab"], "args": {"action": "expand_abbreviation"}, "command": "run_emmet_action", "context": [{"key": "emmet_action_enabled.expand_abbreviation"}]}

Поделиться

wei zhu

08 сентября 2016 в 04:19

Я поделюсь этим в качестве комментария непосредственно там, где мне кажется, но требуется 50 повторений. Любыми способами. Вот что я сделал, что заставило меня работать на себя.

Из ответа @saadq’s сделайте это:
[
//other здесь должны быть привязки пользовательских ключей, за которыми следует

{"keys": ["tab"], "args": {"action": "expand_abbreviation"}, "command": "run_emmet_action", "context": [{"key": "emmet_action_enabled.expand_abbreviation"}]}

]

Смысл в том, чтобы перед ним появились другие привязки, чтобы любая перезапись привязки была перезаписана снова.

Поделиться

Michael Iyke

23 мая 2018 в 11:20

Emmet плагин для sublime text 3

Как ускорить верстку страницы в разы? А на помощь нам придет плагин под названием Emmet. Начнем с того, что данный плагин доступен под различные текстовые редакторы, сейчас мы рассмотрим пример как установить плагин в текстовый редактор Sublime text 3 который рассматривали в прошлом посте. Вся установка займет не более 5 минут.

Установка Emmet.

И так начнем, запускаем Sublime text 3 в верхней части панели инструментов выбираем Preferences (Предпочтения) -> Package Control или сочетанием горячих клавиш Ctrl + Shift + pи выбираем данный пункт.

В появившееся поле пишем install Package и вписывает название самого пакета т.е. Emmet

И ждем окончания установки (перед нами появится текстовое руководство Emmet). Установка окончена, разберемся с принципом использования.

Как работает Emmet.

Создаем html документ т.е. внизу справа в Sublime Text должно быть написано HTML, если там какое то другое значение плагин не сработает!

Развернем самую простую разметку html документа для это вводим ! знак и нажимаем Tab

и сразу получаем вот такую разметку

Как написать быстро тег?

Пишем название тега без всяких скобок просто div или ul и нажимаем Tab, emmet сам понимает как развернуть тег.

Как добавить класс тегу?

Класс добавляется через точку после названия тега т.е. указываем название тега например span.название класса и клавишу Tab. Это еще не все 🙂 Если нам необходимо добавить сразу несколько divов просто пишем div*5 и клавишу Tab, можно указывать с классами.

Как задать содержимое внутри тега?

Для этого используется {} скобки т.е. div+p{Привет мир} после нажатия Tab получим <div></div><p>Привет мир</p>, а () скобки используются для группировки элементов

Как добавить тегу атрибут id?

Для задания id в emmet используем #, div#firs_id.first_class получаем <div id=»firs_id» class=»first_class»></div>. Для задания любых других атрибутов используются квадратные скобки — [] внутри них указываются необходимые атрибуты.

Есть функция инкремента, например нам необходимо заполнить id тега a от 1 до 5 для этого используем следующую конструкцию div>a#$*5 в результате чего все id тега a заполнятся значениями от 1 до 5

Хочу еще добавить что Emmet умеет работать и с CSS таким же образом, только в Sublime Text должен быть выбран синтаксис CSS, Emmet знает все CSS свойства и достаточно написать первую букву свойства и нажать Tab или еще можно указать первую букву и необходимое значение например m20 + Tab выведет следующий результат margin: 20px;

У кого если вдруг появились какие-то вопросы задаем их в комментариях с радостью отвечу на них.

Плагин 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

Результат

<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.

Если вам нужно какое-то определенное количество слов, то напишите цифру, обозначающую количество слов после.

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

Михаил Русаков

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Сниппеты в Sublime Text. Как создать сниппет. Полная инструкция

Сниппеты — это готовые блоки кода, которые часто используются при создании html разметки, css стилей, программного кода, и так далее. Использование сниппетов значительно сокращает время на написание кода, так как вы начинаете использовать заготовки прямо из редактора. Если вы используете расширение Emmet в Sublime Text — то вероятно знакомы со сниппетом который создает html разметку с doctype html5 при наборе знака ! и нажатии клавиши TAB. В этой статье мы разберемся подробно как создать свой сниппет в Sublime Text 2.

Как создать сниппет в Sublime Text

Открываем Sublime Text. Идем в меню Tools → New Snippet. После этого у нас появляется новое окно с заготовкой для нового сниппета. Видим вот такой код:

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

Разберемся подробнее что значат эти строки и как их можно изменить. Раскомментируем строку с тегом <tabTrigger>, и строку с тегом <scope>.

Строка с тегом tabTrigger

Содержимое в строке <tabTrigger>hello</tabTrigger> означает что при наборе символов hello и нажатии клавиши TAB будет срабатывать данный сниппет. То есть это является триггером для данного сниппета.

Строка с тегом scope

Содержимое в строке <scope>source.python</scope> означает что данный сниппет будет работать в скриптах python.

Чтобы создать сниппет который будет работать html или css необходимо использовать другие значения для строки scope.

Так, для html сниппета строка <scope> должна быть следующей:

<scope>text.html</scope>

Для CSS:

<scope>source.css</scope>

Для LESS:

<scope>source.css.less</scope>

Полный список всех возможных значений scope смотрите конце статьи или по ссылке.

Если оставить строку <scope> закомментированной — то данный сниппет будет работать во всех файлах.

Тег content

Рассмотрим блок с тегом <content>

<content><![CDATA[
Hello, ${1:this} is a ${2:snippet}.
]]></content>

В параметре CDATA[ ... ] указан собственно текст сниппета, то что будет выведено когда мы наберем hello (значение tabTrigger в нашем примере) и нажмем TAB. То есть на экран выведется:

Hello, this is a snippet.

Ключевые точки

Разберемся со знаками ${1:this} и ${2:snippet}. Это ключевые точки для редактирования сниппета. После вызова сниппета перемещаться по ним можно используя клавишу TAB. В данном примере ключевые точки заданы с некоторыми значениями по умолчанию. Можно задать свое значение по умолчанию, которое выделится для редактирования когда мы создадим сниппет, либо сделать пустую ключевую точку. Создавать пустую ключевую точку имеет смысл тогда когда просто необходимо поставить курсор в нужное место. В примере ниже я изменил текст сниппета и ключевые точки. Первая точка ${1} — пустая, а вторая ${2:сниппет} с значением по умолчанию.

<content><![CDATA[ Привет, ${1}. Это ${2:сниппет}. ]]></content>

Множественные курсоры

Известно что в Sublime Text с помощью зажатой клавиши Ctrl можно поставить курсор сразу в нескольких местах для ввода текста. Множественные курсоры можно использовать и при создании сниппетов. Чтобы задать множественный курсор, необходимо несколько раз указать одну и ту же ключевую точку. Пример ниже:

<h3>${1}</h3>
<p>${2}</p>
<a href="" title="${1}">Читать далее</a>

Это пример сниппета для html разметки короткой новости или статьи. В этом примере используется множественный курсор в точке ${1}, так как она упоминается в сниппете два раза. Соответственно при запуске сниппета курсор автоматически станет в два разных места — в тег <h2>${1}</h2> и в значение атрибута title="${1}" для ссылки. Этот пример сделан только для того чтобы показать как задавать и использовать множественные курсоры при создании сниппетов в Sublime Text.

Пример готового сниппета

После манипуляций над начальным примером сниппета, можем получить вот такой сниппет для html документов:

<snippet>
<content><![CDATA[
Привет, ${1}. Это ${2:сниппет}.
]]></content>
    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
    <tabTrigger>hello</tabTrigger>
    <!-- Optional: Set a scope to limit where the snippet will trigger -->
    <scope>text.html</scope>
</snippet>

Сохранение сниппетов

Сохранять файл со сниппетом можно в папку Packages/User . По умолчанию Sublime предлагает сохранить его под именем untitled.sublime-snippet. Имя файла изменяем на свое усмотрение, а расширение необходимо оставить неизменным. Желательно давать файлам осмысленные имена. Также можно создать структуру из вложенных папок внутри Packages/User чтобы сортировать все сниппеты, и не возникло путаницы в будущем.

На этом все. Ниже приведен список значений тега scope, чтобы определять сниппеты к конкретным типам файлов.

Список значений <scope>

Ниже приведен полный список всех возможных значений параметра <scope> при создании сниппетов в Sublime Text 2.

ActionScript: source.actionscript.2
AppleScript: source.applescript
ASP: source.asp
Batch FIle: source.dosbatch
C#: source.cs
C++: source.c++
Clojure: source.clojure
CoffeeScript: source.coffee
CSS: source.css
D: source.d
Diff: source.diff
Erlang: source.erlang
Go: source.go
GraphViz: source.dot
Groovy: source.groovy
Haskell: source.haskell
HTML: text.html(.basic)
JSP: text.html.jsp
Java: source.java
Java Properties: source.java-props
Java Doc: text.html.javadoc
JSON: source.json
Javascript: source.js
BibTex: source.bibtex
Latex Log: text.log.latex
Latex Memoir: text.tex.latex.memoir
Latex: text.tex.latex
LESS: source.css.less
TeX: text.tex
Lisp: source.lisp
Lua: source.lua
MakeFile: source.makefile
Markdown: text.html.markdown
Multi Markdown: text.html.markdown.multimarkdown
Matlab: source.matlab
Objective-C: source.objc
Objective-C++: source.objc++
OCaml campl4: source.camlp4.ocaml
OCaml: source.ocaml
OCamllex: source.ocamllex
Perl: source.perl
PHP: source.php
Regular Expression(python): source.regexp.python
Python: source.python
R Console: source.r-console
R: source.r
Ruby on Rails: source.ruby.rails
Ruby HAML: text.haml
SQL(Ruby): source.sql.ruby
Regular Expression: source.regexp
RestructuredText: text.restructuredtext
Ruby: source.ruby
SASS: source.sass
Scala: source.scala
Shell Script: source.shell
SQL: source.sql
Stylus: source.stylus
TCL: source.tcl
HTML(TCL): text.html.tcl
Plain text: text.plain
Textile: text.html.textile
XML: text.xml
XSL: text.xml.xsl
YAML: source.yaml

Материалы по теме:
snippets.me — удобная программа для создания, хранения и навигации по библиотеке сниппетов
Неофициальная документация по Sublime Text 2
JS сниппеты для Sublime Text 2

Emmet autocomplete не работает для php-файлов в Sublime (Развернуть аббревиатуры)

В файле README в Эммет-х Package Control page четко объяснить, как это сделать — прокрутите вниз до раздела How to expand abbreviations with Tab in other syntaxes:

Эммет расширяет аббревиатур в ограниченных синтаксисах только: HTML, CSS, LESS, SCSS, Стилус и PostCSS. Причина ограничить обработчик Tab ограниченным списком синтаксиса состоит в том, что он разбивает фрагменты самописца Sublime Text.
Если вы хотите аббревиатуру с помощью Tab в других синтаксисах (например, JSX, HAML и т. Д.), Вы должны настроить настройки shorcuts на клавиатуре: добавьте команду expand_abbreviation_by_tab для клавиши табуляции для требуемых селекторов видимости синтаксиса.P (OSX) или Ctrl + Alt + Сдвиг + Р, он будет отображен в строке состояния редактора.
Перейти к Preferences > Key Bindings — User и вставить следующий фрагмент JSON с правильно сконфигурированной селектор области действия вместо SCOPE_SELECTOR маркера:

{ 
    "keys": ["tab"], 
    "command": "expand_abbreviation_by_tab", 

    // put comma-separated syntax selectors for which 
    // you want to expandEmmet abbreviations into "operand" key 
    // instead of SCOPE_SELECTOR. 
    // Examples: source.js, text.html - source 
    "context": [ 
    { 
     "operand": "SCOPE_SELECTOR", 
     "operator": "equal", 
     "match_all": true, 
     "key": "selector" 
    }, 

    // run only if there's no selected text 
    { 
     "match_all": true, 
     "key": "selection_empty" 
    }, 

    // don't work if there are active tabstops 
    { 
     "operator": "equal", 
     "operand": false, 
     "match_all": true, 
     "key": "has_next_field" 
    }, 

    // don't work if completion popup is visible and you 
    // want to insert completion with Tab. If you want to 
    // expand Emmet with Tab even if popup is visible -- 
    // remove this section 
    { 
     "operand": false, 
     "operator": "equal", 
     "match_all": true, 
     "key": "auto_complete_visible" 
    }, 
    { 
     "match_all": true, 
     "key": "is_abbreviation" 
    } 
    ] 
}

Значение SCOPE_SELECTOR для PHP является embedding.php text.html.basic.

sergeche / emmet-sublime: Emmet для Sublime Text

Официальный плагин Emmet для Sublime Text.

Как установить

Предупреждение: этот плагин может вообще не работать в некоторых ОС, так как он написан на JavaScript и использует для работы двоичные файлы PyV8 и Google V8. Если у вас возникли проблемы или сбои в редакторе, заполните проблему.

с контролем пакетов:

Запустите команду «Управление пакетами: Установить пакет», найдите и установите подключаемый модуль Emmet .
Перезапустить редактор ST (если требуется)

Вручную:

Клонируйте или загрузите репозиторий git в папку пакетов (в ST найдите пункт меню Обзор пакетов …, чтобы открыть эту папку)
Перезапустить редактор ST (если требуется)

ПРЕДУПРЕЖДЕНИЕ : Когда плагин установлен, он автоматически загрузит требуемый двоичный файл PyV8, поэтому вам придется немного подождать (см. Загрузка двоичного файла PyV8, сообщение в строке состояния). Если у вас возникли проблемы с автоматическим загрузчиком PyV8, попробуйте установить его вручную.

Доступные действия

Увеличение / уменьшение Число действий:

Увеличение на 1: Ctrl + ↑
Уменьшение на 1: Ctrl + ↓
Увеличение на 0,1: Alt + ↑
Уменьшение на 0,1: Alt + ↓
Увеличение на 10: ⌥⌘ ↑ / Shift + Alt + ↑
Уменьшение на 10: ⌥⌘ ↓ / Shift + Alt + ↓

Поддержка расширений

Вы можете легко расширить Emmet новыми действиями и фильтрами или настроить существующие.В Emmet.sublime-settings определите параметр extension_path , и Emmet загрузит все файлы .js и .json в указанную папку при запуске.

Значение по умолчанию extension_path — ~ / emmet , что указывает на папку emmet внутри домашней папки пользователя ОС.

Кроме того, вы можете создавать разделы с именами файлов расширений (например, фрагменты , , настройки , и синтаксис , профили ) внутри пользовательского Emmet.sublime-settings и напишите туда свои настройки. Примеры см. В исходном файле настроек.

Переопределение сочетаний клавиш

Sublime Text — отличный текстовый редактор с множеством функций и действий. Большинство этих действий привязаны к сочетаниям клавиш, поэтому практически невозможно предоставить удобные сочетания клавиш для сторонних подключаемых модулей.

Если вас не устраивает раскладка клавиатуры по умолчанию, вы можете отключить отдельные сочетания клавиш с настройкой disabled_keymap_actions для Emmet.sublime-settings файл.

Используйте список имен действий, разделенных запятыми, для которых по умолчанию сочетания клавиш должны быть отключены. Например, если вы хотите освободить ярлыки Ctrl + E («Расширить аббревиатуру») и Ctrl + U («Обновить размер изображения»), вы должны установить следующее значение:

  "disabled_keymap_actions": "expand_abbreviation, update_image_size"

Вы должны обратиться к файлу Default (Your-OS-Name) .sublime-keymap , чтобы получить идентификаторы действий (ищите args / action key).

Чтобы отключить все ярлыки по умолчанию, установите значение для всех :

  "disabled_keymap_actions": "все"

Не то, чтобы если вы отключили какое-либо действие, подобное этому, и создаете собственное сочетание клавиш, не должно использовать контекст emmet_action_enabled.ACTION_NAME , поскольку это клавиша, отключающая действие.

Как расширить аббревиатуры с помощью Tab в других синтаксисах

Emmet расширяет сокращения только в ограниченном синтаксисе: HTML, CSS, LESS, SCSS, Stylus и PostCSS.Причина ограничения обработчика вкладок ограниченным списком синтаксиса заключается в том, что он нарушает собственные фрагменты Sublime Text.

Если вы хотите использовать аббревиатуру Tab в других синтаксисах (например, JSX, HAML и т. Д.), Вам необходимо настроить параметры сочетаний клавиш: добавьте команду expand_abbreviation_by_tab для tab ключ для требуемого синтаксиса селекторы области . Чтобы получить текущий селектор области синтаксиса, нажмите ⇧⌃P (OSX) или Ctrl + Alt + Shift + P , он отобразится в строке состояния редактора.

Перейдите к Preferences > Key Bindings - User и вставьте следующий фрагмент JSON с правильно настроенным селектором области вместо SCOPE_SELECTOR token:

 {
  "ключи": ["вкладка"],
  "command": "expand_abbreviation_by_tab",

  // помещаем селекторы синтаксиса через запятую, для которых
  // вы хотите расширить аббревиатуры Emmet до ключа "операнд"
  // вместо SCOPE_SELECTOR.
  // Примеры: source.js, text.html - исходный код
  "context": [
    {
      "операнд": "SCOPE_SELECTOR",
      "оператор": "равно",
      "match_all": правда,
      "ключ": "селектор"
    },

    // запускаем, только если нет выделенного текста
    {
      "match_all": правда,
      "ключ": "пустой_выбор"
    },

    // не работает, если есть активные табуляторы
    {
      "оператор": "равно",
      "операнд": ложь,
      "match_all": правда,
      "ключ": "has_next_field"
    },

    // не работает, если всплывающее окно завершения видно и вы
    // хочу вставить завершение с помощью Tab.Если хотите
    // расширяем Emmet с помощью Tab, даже если всплывающее окно видно -
    // удаляем этот раздел
    {
      "операнд": ложь,
      "оператор": "равно",
      "match_all": правда,
      "ключ": "auto_complete_visible"
    },
    {
      "match_all": правда,
      "ключ": "аббревиатура is_abbreviation"
    }
  ]
}

Обработчик клавиши Tab

Плагин

Emmet позволяет расширять сокращения с помощью клавиши Tab , как и в обычных сниппетах. С другой стороны, из-за динамического характера и обширного синтаксиса иногда можно получить неожиданные результаты.В этом разделе описывается, как работает обработчик вкладок и как вы можете его настроить.

По умолчанию обработчик вкладок работает в ограниченных областях синтаксиса : HTML, XML, HAML, CSS, SASS / SCSS, LESS, PostCSS и строки в языках программирования (например, JavaScript, Python, Ruby и т. Д.). Это означает:

Вы должны переключить свой документ на один из синтаксисов, перечисленных выше, чтобы расширить аббревиатуры клавишей Tab.
С помощью сочетания клавиш Ctrl-E вы можете разворачивать аббревиатуры повсюду, его объем не ограничен.
Когда вы расширяете аббревиатуру внутри строк языков программирования, вывод создается со специальным профилем вывода с именем line , который генерирует вывод как одну строку.

Для точной настройки обработчика клавиш Tab вы можете использовать следующие настройки в пользовательском файле Emmet.sublime-settings :

disable_tab_abbreviations_for_scopes — разделенный запятыми список областей синтаксиса, в которых должен быть отключен обработчик клавиши Tab. Например, если вы хотите отключить обработчик внутри строк языков программирования и синтаксиса HAML, ваша настройка будет выглядеть так:

 "disable_tab_abbreviations_for_scopes": "текст.haml, строка "

disabled_single_snippet_for_scopes — разделенный запятыми список областей синтаксиса, в которых обработчик табуляции должен быть отключен при раскрытии одного сокращения. В настоящее время ST не предоставляет API для получения списка нативных сниппетов. Так, например, если вы попытаетесь расширить аббревиатуру php , она будет передана в Emmet, который выведет вместо блока PHP, как определено в собственных фрагментах ST. В качестве обходного пути, если вы пытаетесь расширить одну аббревиатуру внутри области, определенной в настройке disabled_single_snippet_for_scopes , Emmet сначала будет искать ее имя в своем собственном каталоге сниппетов, во-вторых, внутри настройки known_html_tags и, если она не найдена, позволяет ST чтобы обработать это и расширить родную аббревиатуру, если она найдена.
known_html_tags — разделенный пробелами список всех известных HTML-тегов, используемых для поиска, как описано выше.

Если вас не устраивает поведение обработчика вкладок Emmet, вы можете отключить его: просто добавьте «disable_tab_abbreviations»: true в пользовательский файл Preferences.sublime-settings .

Отключить автоматическую вставку префиксов поставщиков

Если ваш рабочий процесс уже включает автоматическую задачу для добавления префиксов поставщиков CSS (например, Autoprefixer), вы можете отключить автоматическую вставку префиксов поставщиков Emmet, добавив эту опцию к Emmet вашего пользователя.sublime-settings файл:

 {
  "предпочтения": {
    "css.autoInsertVendorPrefixes": ложь
  }
}

Полное руководство (с 25 советами, приемами и ярлыками)

Примечание. С тех пор был выпущен Sublime Text 4, который доступен здесь.

Sublime Text 3 (ST3) — это бывшая версия одного из наиболее часто используемых текстовых редакторов веб-разработчиками, кодировщиками и программистами. Извлеките максимальную пользу из ST3 с 25 советами и приемами из этого полного руководства для веб-разработчиков.Узнайте не только о том, как использовать Sublime Text 3, но и о необходимых пакетах, полезных сочетаниях клавиш и многом другом.

1. Настройки предпочтений пользователя

По умолчанию ST3 использует жесткие вкладки длиной 4 символа. Это может привести к тому, что код будет трудночитаемым, поскольку большие табличные отступы смещают вашу работу вправо. Я рекомендую всем разработчикам добавить это в свои пользовательские настройки ( Sublime Text 3 => Preferences => Settings - User ):

 {
    "draw_white_space": "все",
    "правители": [80],
    "tab_size": 2,
    "translate_tabs_to_spaces": true
  }

Этот параметр преобразует жесткие табуляции в пробелы, делает отступы длиной всего два символа, помещает линейку на отметку 80 символов (чтобы напомнить вам, что код должен быть кратким) и добавляет маркеры пробелов.Вот полный список параметров настройки, если вы хотите продолжить настройку среды ST3.

2. Палитра команд

Палитра команд

ST3 позволит вам запускать действия на панели инструментов (например, устанавливать синтаксис кода для открытого файла), не снимая пальца с клавиатуры. Хотя палитру команд можно открыть с помощью мыши через Tool => Command Palette , лучший способ получить подсказку Command Palette — использовать сочетание клавиш 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.

Если Package Control установлен успешно, вы сможете искать действия Package Control в палитре команд ( CTRL / ⌘-SHIFT-P ):

Доступ к управлению пакетами из палитры команд

Обязательный пакет Sublime Text 3

Примечание. Установите эти пакеты с помощью Package Control, открыв панель команд (CTRL / ⌘-SHIFT-P), выбрав «Package Control: Install Package» и выполнив поиск пакета по его имени.

5. Улучшения боковой панели

Sidebar Enhancements расширяет функциональность боковой панели ST3, позволяя выполнять действия с файлами и папками, которые обычно недоступны. Вы также сможете запускать эти действия из палитры команд с помощью этого пакета.

Расширенная функциональность с улучшением боковой панели

6. Эммет

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

ST3 не имеет собственного синтаксиса SASS и поддержки фрагментов, но пакет ST3 SASS добавляет их.Настоятельно рекомендуется для опытных разработчиков интерфейса и программистов на Ruby on Rails:

10. Лучше CoffeeScript

Также нет поддержки синтаксиса и фрагментов для CoffeeScript в ST3, поэтому этот пакет заполняет этот пробел:

11. Пользователи командной строки OSX

Если вы используете Mac и терминал, текстовый редактор 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. Это позволяет вам набирать текст в нескольких местах одновременно, экономя время на разработку. Чтобы вызвать несколько курсоров, наведите курсор на слово, которое вы хотите выделить, и нажимайте CTRL / ⌘-D , пока не выберете все нужные слова. Вы также можете создать несколько курсоров с помощью CTRL / ⌘-MOUSECLICK во всех местах, где вы хотите разместить курсор.

13.Перейти к чему-нибудь

Подобно палитре команд, ST3 имеет функцию Goto Anything (произносится как «перейти к»), которая может перенаправить вас к определенному файлу, строке или определению метода. Вызовите панель поиска Goto Anything с помощью CTRL / ⌘-P . Чтобы переключаться между файлами, начните вводить имя файла. Поскольку это нечеткий поиск, поисковый запрос не обязательно должен точно соответствовать имени, и вам не нужно вводить полный путь к файлу:

14. Перейти к строке в файле

Goto Anything — это не только переход к файлу, но и определенная строка внутри файла.Если вы хотите перейти к строке в новом файле, просто вызовите Goto Anything и введите двоеточие, за которым следует номер строки (например, : 18 для строки 18). Чтобы перейти к строке в другом файле, введите имя файла, затем двоеточие и номер строки:

15. Определение перехода к файлу

Если вы хотите перейти к определению класса, метода или функции в файле, Goto Anything имеет синтаксис, аналогичный переходу к строке. Вместо двоеточия Goto Definition использует @ . Вы получите список всех определений в выбранном вами файле, и, набрав имя одного и нажав ENTER, вы перейдете к данному определению:

16.Режим без отвлекающих факторов

Иногда быть самым продуктивным кодером или разработчиком интерфейса означает избавиться от всех отвлекающих факторов. Никаких других приложений, окон, вкладок, боковых панелей и меню. Превосходный текстовый редактор предлагает простой способ сделать это с помощью режима без отвлечения внимания. Запустите его, используя 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-UP (ПК) или CTRL-⌘-UP (Mac) перемещает линию вверх, а CTRL-SHIFT-DOWN (ПК) или CTRL-⌘-DOWN (Mac) перемещает строку линия вниз.

25. Удаление строк

На тот случай, когда строка кода не вышла из строя, а ее нужно просто удалить, в ST3 есть удобный ярлык для удаления строк без необходимости выделять всю строку. CTRL-SHIFT-K (ПК и Mac) удалит текущую строку, на которой находится курсор.

—
Теперь, когда вы освоили Sublime Text 3, вы можете сосредоточиться на написании отличного кода и стать лучшим разработчиком интерфейса. Продолжайте обучение с помощью онлайн-видеоуроков, которые проводят эксперты-практики по темам программирования, бизнеса и дизайна.
Начните веб-разработку с нашего иммерсивного курса «Инженерия программного обеспечения».

Узнайте больше о нашем курсе Python неполный рабочий день

Question Sublime Text 3 — ярлык Emmet для HTML 5 не работает.

Вопрос

Sublime Text 3 — ярлык Emmet для HTML 5 не работает.

14130 видимость

0 arrow_circle_up

0
arrow_circle_down

Я недавно загрузил Sublime Text 3 и установил emmet.Проблема, с которой я столкнулся, заключается в том, что когда я пишу короткий код для HTML 5 и нажимаю вкладку, он не работает. Этот метод использовался в возвышенном тексте 2, и он сработал. Есть ли у кого-нибудь решения этого вопроса?

Ответ — 1

0 arrow_circle_up

0
arrow_circle_down

Текстовый редактор не знает, какой ярлык раскрыть, пока вы не сохраните новый файл как *.html или измените синтаксис (внизу / справа), потому что новый документ начинается с обычного текста.

Ответ — 2

проверено

0 arrow_circle_up

0
arrow_circle_down

тип ! , а затем нажмите Tab .нашел ответ в шпаргалке

Ответ — 3

0 arrow_circle_up

0
arrow_circle_down

Думаю, вы ищете что-то вроде Html Boilerplate.Этот пакет генерирует полную структуру html5, просто набрав

  html котел

и нажав TAB

РЕДАКТИРОВАТЬ: Только что нашел ответ в официальной шпаргалке Эммета; просто введите

И нажмите TAB (да, только восклицательный знак).

Ответ — 4

0 arrow_circle_up

0
arrow_circle_down

Вам не нужен добавочный номер.Просто откройте html-файл, сохраните его как html-файл или нажмите ctrl + shift + P, затем введите «html» и нажмите Enter, чтобы выбрать «Set Syntax: HTML»

Затем просто введите «HTML», а затем либо табуляцию, либо ctrl + пробел.

Ответ — 5

0 arrow_circle_up

0
arrow_circle_down

@ayek правильный, все, что вам нужно сделать, это установить тип документа HTML; как только вы это сделаете, вы можете ввести «html» и нажать вкладку.Удачи и счастливого кодирования. —

кВт

Источник:
https://stackoverflow.com/questions/33635826

Как писать сверхбыстрый HTML с помощью Sublime

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

Если вы один из тех, кто пишет много HTML и CSS, то этот пост для вас.

По сути, большинство текстовых редакторов позволяют хранить и повторно использовать часто используемые фрагменты кода, называемые фрагментами. А сниппеты — это хороший способ повысить вашу продуктивность. У всех реализаций есть общие подводные камни: сначала нужно определить сниппет, и вы не можете расширять их во время выполнения.

У всех реализаций есть общие подводные камни: сначала нужно определить сниппет, и вы не можете расширять их во время выполнения.

Emmet выводит идею сниппетов на совершенно новый уровень: вы можете вводить CSS-подобные выражения, которые можно динамически анализировать, и выводить результат в зависимости от того, что вы вводите в сокращении.

Emmet разработан и оптимизирован для веб-разработчиков, чей рабочий процесс зависит от HTML / XML и CSS, но также может использоваться с языками программирования.

В этой статье мы узнаем несколько интересных советов по быстрому написанию HTML с помощью Emmet.

В этом руководстве я использую Sublime в качестве текстового редактора, но Emmet также доступен для многих других выпусков, таких как Adobe DreamWeaver, TextMate, Eclipse и Notepad ++.

Установка Emmet

Вы можете скачать Эммет отсюда.Если вы используете Sublime text, как я, вы можете установить его прямо из установщика пакета Sublime.

Чтобы установить любой пакет Sublime, вам необходимо установить установщик пакетов. Для установки перейдите в Инструменты -> Установить управление пакетами и щелкните по нему, и он будет установлен автоматически. Когда вы снова закончите установку управления пакетами, перейдите к T ools-> command palette и найдите Install Package.
Когда вы нажмете «Установить пакет», вы увидите некоторую обработку внизу окна Sublime и откроется всплывающее окно поиска.

Здесь вы можете найти любой плагин Sublime. Найдите «Эммет» и щелкните по нему, чтобы установить.

ПРИМЕЧАНИЕ- В приведенных ниже примерах клавиша Tab используется для раскрытия тегов. Большинство текстовых редакторов имеют такие же встроенные функции.

1. Базовый документ HTML

Что вы будете делать, если начнете создавать любой HTML-проект. Вы пишете сам код HTML-документа или копируете его откуда угодно. Но Emmet предоставляет возможность легко генерировать базовую структуру HTML-документа.

Вы можете сгенерировать, просто набрав! (Восклицательный знак) + Tab или doc + Tab или HTML: 4t + Tab и HTML doc будет перед вами

2. Написание простого тега HTML

Чтобы написать простой HTML, например, для тега div, мы просто набираем div и нажимаем клавишу Tab. Его можно использовать для создания любого тега.

3. Назначьте атрибут элементу

Мы можем назначить любой атрибут, такой как class, id, src и т. Д., Используя Emmet-

Если мы хотим назначить только Id или класс, мы можем использовать # или.как мы используем в CSS.

Как видите, если вы просто наберете #firstdiv, по умолчанию будет создан элемент div. Если вы хотите указать элемент, введите section # firstelement

Но если вы хотите назначить какой-либо другой атрибут, вы можете легко указать его в скобках []. Предположим, мы хотим назначить атрибут src тегу img, мы можем написать

4. Создание одноуровневого элемента

Родственный элемент относится к элементу на том же уровне вложенности.Если вы хотите создать родственников или параллельный элемент, вы можете просто добавить + между элементами.

5. Создание дочернего элемента / вложение

Emmet использует синтаксис, аналогичный CSS, поскольку мы можем выбрать дочерний элемент в CSS с помощью знака>. В Emmet мы используем тот же синтаксис для создания дочернего элемента.

6. Группировка

Если вы хотите, чтобы внутри элемента было несколько элементов, этого можно добиться, сгруппировав их с помощью ().

7.Умножение

Если вы хотите повторить один и тот же элемент несколько раз, это вам поможет. Мы можем создать несколько элементов со знаком звездочки *.

Предположим, мы хотим создать 6 div с class = ”main”, мы просто набираем- .main * 6

8. Автоматическая нумерация

Автоматическая нумерация поможет вам легко написать другое имя с автоматическим приращением номера. Правильный синтаксис этой функции — знак доллара $.

Также читают:

Essential Sublime Text Plugins для веб-разработчиков

9.Фиктивный текст

Если вы используете фиктивный текст, копируя его из lorem или lipsum, или откуда-то еще, вам не нужно этого делать, если у вас есть Emmet. Эммет может сгенерировать для вас фиктивный текст lorem ipsum. мы просто пишем lorem. Он будет генерировать от 5 до 7 строк текста Ipsum.

В Emmet мы можем указать, сколько слов нужно сгенерировать. Скажите, 7, затем введите lorem7

10. Ярлык ссылки

Если у вас есть значок, rss или внешний файл CSS, который вы хотите добавить в свой документ, вы можете использовать уловки со ссылками для их более быстрого написания.

Чтобы вставить css-ссылку: css
Чтобы вставить favicon- ссылку: favicon

Заключение

Emmet — действительно отличный инструмент для повышения продуктивности веб-разработчика. Вы можете столкнуться с некоторыми трудностями при запуске, но как только вы возьмете его, это может значительно повысить вашу производительность. Вы сможете писать HTML и CSS быстрее, чем когда-либо прежде.

Люди Также читают

Sublime Text

Раздел D.1 возвышенный текст

Дэйв Рософф

Sublime Text — это быстрый кросс-платформенный редактор с тысячами пользовательских пакетов, реализованных в Python 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 menu (Sublime Text / Preferences… в OS X ). Убедитесь, что когда вы переходите к редактированию настроек, вы всегда выбираете опцию «Пользователь». Изменения файлов настроек по умолчанию будут перезаписаны при обновлении Sublime Text. Рекомендуется использовать файлы по умолчанию, чтобы узнать, какие настройки можно изменить.Их много, и не все задокументированы.

Все пользователи Sublime Text должны знать, что конкретное представление (буфер) может получать настройки несколькими различными способами, например, из глобальных настроек по умолчанию, из глобальных настроек OS , из настроек, предоставленных пакетом, из настроек, заданных пользователем. , и так далее.

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

Тысячи пакетов, добавленных пользователями, доступны для простой установки с помощью Package Control. Пакеты можно поддерживать вручную, поскольку большинство авторов пакетов публикуют их через GitHub, но управление пакетами — это универсально рекомендуемый метод получения, управления и удаления пакетов для вашей установки.

Посетите сайт загрузки Package Control.
Найдите консольную команду Sublime Text (убедитесь, что выбрана правильная версия Sublime Text) и скопируйте ее в буфер обмена.
Откройте консоль Sublime Text ( Ctrl-`) и вставьте команду в появившееся окно, затем нажмите Введите .

Установив Package Control, вы можете использовать палитру команд для развертывания его команд, таких как Install Package, List Packages и Remove Package.См. Документацию для получения дополнительной информации. В этом разделе рекомендуются несколько особенно полезных пакетов, которые кратко описаны в подразделе 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 всегда открыт неявный проект, если вы не открываете явный. Этого достаточно для многих пользователей, поскольку он предоставляет наиболее полезную функцию (Найти / Найти в Project). Команда Goto / Go To Symbol в проекте также полезна, но не полностью реализована в 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 Skip Next ( Ctrl + K, Ctrl + D / Cmd + K, Cmd + D ), чтобы перепрыгивать через экземпляры, которые вы хотите оставить в покое. Если вы зашли слишком далеко и ошиблись при выборе, нажмите Ctrl + U / Cmd + U , чтобы отменить.
Сделайте свою модификацию, только один раз.

Другой пример, который часто встречается при создании XML , — это использование фрагмента «Перенос с тегом» ( Alt + Shift + W / Ctrl + Shift + W ).Этот фрагмент оборачивает выбранные элементы в тег

, при этом имя тега выделяется как в начальном, так и в конечном тегах. Если элемент p не тот, который вам нужен, просто введите. Оба тега заменены. Это огромное преимущество для автора XML , который существенно использует множественный выбор, даже если вы почти не подозреваете об этом, когда используете эту функцию.

Выбор столбца позволяет выбрать прямоугольную область файла. Это невероятно полезно при редактировании структурированного документа.Есть много способов сделать это (см. Документацию Sublime Text для почти исчерпывающего списка), но наиболее часто используемым является удерживание Shift при щелчке и перетаскивании правой кнопкой мыши (в OS X удерживайте вниз Опция при перетаскивании правой кнопкой мыши). См. Документацию по сочетаниям клавиш.

Выбор столбца становится еще более полезным при использовании в сочетании с сочетаниями клавиш для перемещения и выделения, такими как Ctrl + Shift + Right (выделение до конца слова) и Shift + End (выделение до конца строки).

Еще один пример ужасающей полезности множественного выбора — это копирование и вставка из файла другого формата. Предположим, вы скопировали несколько строк текста и хотите, чтобы каждая такая строка стала элементом списка в вашем источнике MathBook 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. Однако некоторые элементы XML пусты. В совпавшей паре тегов команда «Разделить / объединить тег» ( Ctrl + Shift + `/ Cmd + Shift +` ) сократит его до пустого тега, удалив любой текст между существующими начальным и конечным тегами.(Если каретка — внутри тега для пустого элемента, эта команда заменяет пустой элемент соответствующей парой начального / конечного тегов.)

Поведение по умолчанию (создание пар тегов всякий раз, когда нажимается Tab ) мешает обычному завершению Tab в Sublime Text, что может быть нежелательно. Его можно отключить, установив

 "disabled_keymap_actions": "expand_abbreviation_by_tab"

в Preferences / Package Settings / Emmet / Settings — User file. Функциональность Expand Abbreviation будет по-прежнему доступна через Ctrl + E .

В качестве более сложного примера сокращений предположим, что вы вставили элементы упорядоченного списка. Теперь вам нужно структурировать его с помощью ol , li и так далее.

 Списки часто бывают хорошими.
Вы можете предоставить элементы списка с помощью  @xml: id .
Однако вы, вероятно, не захотите их нумеровать.

Желаемый результат:

 
     Списки часто бывают хорошими. 
     Вы можете предоставить элементы списка с помощью  @xml: id .
     Но вы, вероятно, не захотите их нумеровать.

Используя Emmet, его можно получить, выполнив команду Wrap as you Type ( Ctrl + Shift + G / Ctrl + W ) и введя следующее выражение в минибуфер.

 ol> li [xml: id = item $] *> p

Символ > обозначает дочерний элемент, квадратные скобки (с назначением или без него) обозначают список атрибутов, $ обеспечивает нумерацию на основе строк, а * указывает перенос каждой выбранной строки указанным поддеревом. (поэтому каждая строка оборачивается

вместо всего выделения).
Emmet может создать большую иерархию вложенных тегов XML на различных уровнях, используя этот синтаксис сокращения. Например, предположим, что вы знаете, что вам нужно будет создать структуру тегов следующей формы.
<раздел xml: id = ""> <введение>

<подраздел xml: id = "">

<заключение>

По общему признанию, это многовато, но в этом есть смысл.заключение> p
Набрав эту строку и поместив курсор справа от нее, нажмите Ctrl + E (или Tab , если вы не отключили значение Emmet по умолчанию). Вся древовидная структура создается немедленно, с позициями табуляции для отсутствующих значений атрибутов и для каждой совпадающей пары начало / конец.
Команда «Расширить сокращение при вводе» позволяет настраивать такие сокращения в интерактивном режиме. Нажмите Ctrl + Alt + Enter и введите указанное выше выражение в минибуфер внизу окна, наблюдая, как дерево появляется по мере ввода.
Emmet — очень мощный пакет, который может гораздо больше, чем описано здесь. Однако по умолчанию он в основном адаптирован для написания CSS и HTML. Настройка его для более непосредственной работы с MathBook XML — текущий проект. Вы можете узнать больше об Emmet, изучив документацию Emmet или покопавшись в файлах настроек и Keymap.
Подраздел D.1.7 MBXTools — пакет Sublime Text для MathBook
XML
MBXTools — это пакет Sublime Text, предназначенный для помощи авторам, использующим MathBook XML .Это очень экспериментально и может вести себя неожиданно.
Вдохновением и большей частью кода этот пакет обязан отличному пакету LaTeXTools. Сообщите автору обо всех обнаруженных вами ошибках или функциях, которые вы хотели бы включить в MBXTools, создав проблему на GitHub.
Подраздел D.1.7.1 Установка

через Package Control.
Рекомендуется устанавливать MBXTools через Package Control. Если вы еще не установили Package Control, вам следует сделать это сначала (а затем перезапустить Sublime Text).
После установки Package Control используйте команду Install Package , чтобы найти пакет MBXTools и выбрать его на быстрой панели для установки. Этот метод установки позволяет Package Control автоматически обновлять вашу установку и показывать вам соответствующие примечания к выпуску.
через git.
Вы также можете установить MBXTools через git . Измените каталоги в папку Packages . Чтобы найти папку Packages , выберите «Обзор пакетов» в меню «Настройки» (в меню «Sublime Text 3» в OS X).Убедитесь, что вы находитесь в папке Packages, и , а не в папке Packages / User .
Затем запустите
git clone 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 ) и введите pretext . Выберите «Установить синтаксис: MathBook XML » из списка параметров.
Вы должны увидеть текст «MathBook XML » в правом нижнем углу, если у вас есть видимая строка состояния (палитра команд: «Переключить строку состояния»).
Пока реализовано лишь несколько функций.
Если в вашем файле MBX есть разделы, нажмите Ctrl + R ( Cmd + R в OS X ), чтобы запустить команду «Перейти к символу». Вы должны увидеть панель, на которой отображаются имена всех подразделений @xml: id .
Если вы использовали @xml: id для маркировки своих материалов, попробуйте ввести Подраздел D.1.7.3 Известные проблемы
При добавлении xref вручную (без использования фрагментов или автозаполнения) вы часто будете видеть ложную ошибку «Нераспознанный формат».
Фрагмент ref не вызывает быструю панель. Должен ли он?
Рекурсивный поиск ярлыков по включенным файлам пока не реализован.
Это будет работать только для завершения xref , но не для перехода к символу.
Ничего не тестировалось на OS X или Linux.
Подраздел D.1.8 (*) Sublime Linter
Будет написано.
Подраздел D.1.9 Рекомендуемые пакеты
Пакетный контроль
Эммет
Усовершенствования боковой панели
PowerCursors
MultiEditUtils
Текстовое тесто
Git или SublimeGit
SublimeLinter
MBXИнструменты
Автозаполнение в Sublime Text | Скотт Граннеман
Sublime Text автоматически дополняет текст; Другими словами, он определяет, что вы вводите, и завершает это за вас.Это поможет сэкономить время и набор текста, а также сделает вашу работу более точной. Это отличная функция для любого текстового редактора, и Sublime Text отлично с ней справляется. Кроме того, вы также можете установить различные пакеты, которые будут включать дополнительные виды автозаполнения.
Встроенное автозаполнение
Из документов Sublime Text:
Автозаполнение показывает всплывающее окно автозавершения по мере ввода, поэтому вы можете заполнить длинные слова, набрав всего несколько символов. Он включен по умолчанию для исходного кода и HTML (но только после ввода символа <).
В отрывке обсуждаются две вещи: слова и код.
слов
Sublime Text обращает внимание на слова, которые вы уже набрали на своей странице, и будет автоматически заполнять их, если вы нажмете вкладку. Попробуйте увидеть в действии. Введите (или вставьте) следующее в документ в Sublime Text (бонусные баллы, если вы сможете определить источник!):
Я думаю, что самая милосердная вещь на свете - это неспособность человеческого разума соотносить все его содержание.
Дважды нажмите Enter, чтобы начать новый абзац, а затем введите следующее, нажмите Tab там, где это сказано:
Х. П. Лавкрафт любит громкие слова, такие как mer [Tab], ina [Tab] и cor [Tab].
В каждом случае нажатие Tab должно приводить к автозаполнению этих слов. А теперь попробуйте это:
Слова, начинающиеся с t, включают: t [Ctrl-пробел].
На этот раз появляется небольшое меню со списком возможных автозаполнений, включая код и любые введенные вами слова, которые начинаются с t .Используйте клавиши со стрелками вверх и вниз для перемещения по списку или продолжайте связывать букву или две, чтобы сузить список, пока не увидите то, что вы хотите, затем нажмите Tab.
Код
Помимо слов, Sublime Text также упрощает быстрый и точный ввод HTML-кода. В документе введите <, и вы сразу увидите меню со списком элементов HTML. Продолжайте вводить текст, чтобы сузить список, пока не увидите нужный элемент, и нажмите Tab.Когда вы это сделаете, Sublime Text не только завершит первый элемент, но также войдет в закрывающий элемент, например: .
В довершение ко всему, Sublime Text помещает курсор туда, где вы хотите, между и .
Если вместо этого вы используете автозаполнение для создания элемента привязки (или любого элемента, который требует пары атрибут / значение), Sublime Text вводит элемент И пару атрибут / значение для вас: .Более того, ваш курсор находится внутри пустого значения (между кавычками), поэтому вы можете ввести или вставить URL-адрес. Но ждать! После того, как вы ввели URL-адрес, нажмите Tab, & Sublime Text переместит ваш курсор между и , чтобы вы могли ввести текст гиперссылки. Нажмите Tab в третий раз, и ваш курсор окажется после , так что вы можете продолжить ввод.
Вот это умно!
Но как мне вставить настоящую табуляцию ?!
Нажмите Shift-Tab.Alt-Tab работает и на Mac.
Убедитесь, что автозаполнение включено
Если автозаполнение не включено для вас ¹, откройте свои личные настройки следующим образом:
Mac OS X: Sublime Text 2> Настройки> Настройки - Пользователь
Windows: Предпочтения> Настройки - Пользователь
Linux: Предпочтения> Настройки - Пользователь
Должен открыться файл с именем Preferences.sublime-settings . Если вы следовали моим инструкциям в разделе «Настройка возвышенного текста», этот файл не будет пустым; в противном случае в нем может ничего не быть.Я сначала перейду к настройке Sublime Text и сделаю то, что там написано, прежде чем продолжить.
Затем убедитесь, что в вашем файле Preferences.sublime-settings указано следующее:
// Включите автозаполнение, которое будет запускаться автоматически при наборе текста. "auto_complete": правда, // Максимальный размер файла, при котором автоматически запускается автозаполнение. "auto_complete_size_limit": 4194304, // Задержка в мс перед отображением окна автозаполнения после ввода "auto_complete_delay": 50, // Управляет тем, в каких областях будет запускаться автозаполнение "auto_complete_selector": "источник - комментарий", // Дополнительные ситуации для запуска автозаполнения "auto_complete_triggers": [{"selector": "текст.html "," characters ":" <"}], // По умолчанию автозаполнение зафиксирует текущее завершение при входе. // Вместо этого этот параметр можно использовать для завершения на вкладке. // Завершение на вкладке обычно является лучшим вариантом, так как оно удаляет // двусмысленность между фиксацией завершения и вставкой новой строки. "auto_complete_commit_on_tab": правда, // Управляет отображением автозаполнения, когда поля фрагмента активны. // Актуально, только если auto_complete_commit_on_tab истинно. "auto_complete_with_fields": ложь,
Пакет тегов
Встроенное автозаполнение
Sublime Text - это фантастика, но что, если у вас уже есть текст, который вы хотите окружить HTML? Например, вы набираете слова Блог Скотта Граннемана , а затем хотите окружить их элементом strong ? Если вы поместите курсор перед Scott и наберете , а затем нажмете Tab, вы получите следующее:
Блог Скотта Граннемана
Не совсем то, что вы хотели.Я имею в виду, что на этом этапе вы можете выбрать и переместить его после Блог или скопировать Блог Скотта Граннемана и поместить его после , но такой вид поражает цель автоматизации .
В моем случае, после того, как я набираю Блог Скотта Граннемана и затем понимаю, что хочу, чтобы эти слова были полужирными, я помещаю курсор перед Скотт и набираю . Затем я помещаю курсор после Blog и набираю … и сразу же для меня все готово, и появляется strong> !
Спасибо, пакет тегов! (О, и он также делает кучу других интересных вещей.)
Что это?
Согласно его странице GitHub:
Плагин
"Tag" представляет собой набор пакетов с тегами, смешанных вместе, чтобы предоставить единый пакет с утилитами для работы с тегами.
В настоящее время предоставляет: «Закрыть тег по косой черте», «Теги отступа или автоформатирования тега», «Удалить тег», «Вставить как тег», «Атрибуты удаления тега», «Закрыть тег», «Тег Lint».
Пакет Tag делает много очень интересных вещей, особенно для тех, кто пишет HTML.
Установка пакета тегов
Выполните следующие действия:
Command-Shift-P (Mac) или Ctrl-Shift-P (Windows), чтобы открыть палитру команд.
Тип Устанавливайте , пока не увидите Управление пакетами: установить пакет .
Когда появится список пакетов, набирайте Tag , пока не найдете его.
Нажмите Enter, чтобы установить пакет Tag .
Перезапустить Sublime Text.
Использование пакета тегов
Если все, для чего вам нужен пакет Tag, - это автозаполнение закрывающих элементов (то, что Tag называет «Close Tag on Slash»), то все готово.Тег очень умно распознает, какие элементы должны быть автоматически заполнены (даже если они вложены), когда вы нажимаете . Но Tag делает больше. Для получения дополнительной информации посетите страницу Tag GitHub, где вы можете узнать о:
Отступ тега: исправьте вложение, нажав Ctrl-Alt-F
Удаление тега: удаление всех или выбранных тегов с помощью меню «Правка»> «Тег».
Вставить как тег: преобразовать текущее слово в элемент HTML, нажав Ctrl-Shift-.
Tag Remove Attributes: удаление всех или выбранных атрибутов с помощью меню «Правка»> «Тег».
Tag Close: закрыть текущий элемент, нажав Alt-. (Windows и Linux) или Alt-Command-. (Mac OS X)
Tag Lint: проверьте правильность вашего HTML, ища незакрытые элементы, используя меню Edit> Tag.
Пакет TagWrapper
При обсуждении пакета Tag выше я упоминал, что вы не можете выделить текст, ввести некоторый HTML-код и заставить его автоматически обтекать ваш выбор.С пакетом TagWrapper вы можете!
Что это?
Согласно его странице GitHub:
Этот плагин позволяет вам заключать выделенный текст в заданные HTML-теги или удалять HTML-теги из выделения.
Выделите текст, введите первый тег (например,
), вызовите TagWrapper и бум! Теперь выделенный текст имеет
и
вокруг него. С другой стороны, вы также можете выделить код (например,
Lorem ipsum
), вызвать TagWrapper и бум! у вас остался только текст без кода.
Установка пакета TagWrapper
Выполните следующие действия:
Command-Shift-P (Mac) или Ctrl-Shift-P (Windows), чтобы открыть палитру команд.
Тип Устанавливайте , пока не увидите Управление пакетами: установить пакет .
Когда появится список пакетов, набирайте TagWrapper , пока не найдете его.
Нажмите Enter, чтобы установить пакет TagWrapper .
Перезапустить Sublime Text.
Использование пакета TagWrapper
С TagWrapper можно делать 2 вещи: добавлять теги и удалять теги.
Добавить метки
Довольно просто:
Выделите слова, которые вы хотите заключить в HTML.
Нажмите Alt-Shift-T. Подсказка откроется в нижней части окна Sublime Text.
Введите начальный тег ( или или даже или Ленточные бирки Вы также можете удалить теги из HTML: Выделите код, из которого вы хотите удалить HTML. Нажмите Alt-Shift-S. HTML-б-ушел! Использование Emmet с Sublime Text Emmet - бесценный инструмент экономии времени для всех, кто пишет HTML и CSS. Благодаря Sublime Text вам потребуется совсем немного усилий, чтобы установить и начать использовать прямо сейчас. Одна из самых больших проблем при ручном редактировании HTML - это монотонность написания общей разметки, которая окружает сам контент.Хотя существует несколько языков шаблонов для решения этой проблемы, они вводят зависимости и абстракции, которые требуют довольно крутого обучения для освоения. К счастью, инструмент под названием Emmet проходит границу между ручным и автоматическим подходами и стал одним из самых полезных дополнений к моему рабочему процессу. Что такое Эммет? Emmet (ранее известный как Zen Coding) - это набор инструментов для веб-разработчиков, который может значительно улучшите рабочий процесс HTML и CSS, вы можете вводить выражения, похожие на CSS которые можно динамически анализировать и выводить в зависимости от того, что вы вводите в сокращении.- Документация Emmet Это означает, что с помощью Emmet мы можем: Вводить HTML и CSS с помощью простых ярлыков Экономить время на написание кода Упростить жизнь Довольно полезно, правда? Давайте узнаем, как установить его с помощью Sublime Text. Установка плагинов Sublime Text имеет замечательное дополнение под названием Package Control , которое позволяет вам найти и установить практически любой плагин из самого приложения.Строка кода для установки Package Control меняется с каждым выпуском, поэтому вам придется копировать ее прямо с официального сайта. Когда у вас есть фрагмент для вашей версии Sublime, запустите программу и откройте консоль ( ⌘ + ` в OS X). Вставьте предполагаемый код, нажмите , введите , затем наблюдайте, как Package Control устанавливает себя как по волшебству. При установленном Package Control вы можете загрузить дополнительные плагины, открыв палитру команд ( Shift + ⌘ + P в OS X) и набрав «Установить пакет», а затем отправив лучший результат.Затем откроется аналогичное меню со списком пакетов, доступных для установки. Введите здесь «Эммет» и выберите лучший результат. Использование Emmet Теперь, когда у нас установлен Emmet, мы, наконец, можем начать получать удовольствие от некоторых из его невероятных ярлыков. Формула использования Emmet очень проста: Введите поддерживаемый ярлык Нажмите Tab И все! Ознакомьтесь с некоторыми из наиболее полезных ярлыков, которые вы можете использовать прямо сейчас. Улучшение Если вы похожи на меня, освоить новые инструменты - это бесконечная борьба. К счастью, Emmet является полностью необязательным после установки, и вы можете игнорировать все его функции до тех пор, пока не захотите их использовать. Это делает освоение Emmet таким же гибким, как и постепенное добавление ярлыков в рабочий процесс, когда они вам нужны. Например, начните с сокращенного обозначения класса или идентификатора, а затем наращивайте его, попутно изучая более амбициозные ярлыки. Вы можете посетить официальную документацию, чтобы открыть для себя все функций Эммета, или, если это не ваша чашка чая, Крис Койер из CSS-Tricks предлагает приятный скринкаст, охватывающий основы, а также все остальное, что вам нужно. Добавить комментарий Отменить ответ Ваш адрес email не будет опубликован. Обязательные поля помечены * Комментарий * Имя * Email * Сайт Навигация по записям Previous PostКак виндовс 7 закинуть на флешку: Загрузочная флешка Windows 7 | remontka.pro Next PostГоризонтальный список html: Как разместить элементы списка горизонтально?

Sublime text 3 не работает emmet tab: Не работает emmet в sublime text 3 при генерации html-разметки. как исправить?

emmet sublime text 3 не работает tab

Похожие вопросы

3 ответов

Почему emmet не работает

Почему не работает Emmet!?

12 ответов 12

Расширение плагина Emmet не работает для Sublime Text 3

5 ответов

Похожие вопросы:

Emmet плагин для sublime text 3

Установка Emmet.

Как работает Emmet.

Плагин Emmet для Sublime Text.

Сниппеты в Sublime Text. Как создать сниппет. Полная инструкция

Как создать сниппет в Sublime Text

Строка с тегом tabTrigger

Строка с тегом scope

Тег content

Пример готового сниппета

Сохранение сниппетов

Список значений <scope>

Emmet autocomplete не работает для php-файлов в Sublime (Развернуть аббревиатуры)

sergeche / emmet-sublime: Emmet для Sublime Text

Как установить

Доступные действия

Поддержка расширений

Переопределение сочетаний клавиш

Как расширить аббревиатуры с помощью Tab в других синтаксисах

Обработчик клавиши Tab

Отключить автоматическую вставку префиксов поставщиков

Полное руководство (с 25 советами, приемами и ярлыками)

Question Sublime Text 3 — ярлык Emmet для HTML 5 не работает.

Вопрос

Sublime Text 3 — ярлык Emmet для HTML 5 не работает.

Ответ — 1

Ответ — 2

Ответ — 3

Ответ — 4

Ответ — 5

Как писать сверхбыстрый HTML с помощью Sublime

Установка Emmet

1. Базовый документ HTML

2. Написание простого тега HTML

3. Назначьте атрибут элементу

4. Создание одноуровневого элемента

5. Создание дочернего элемента / вложение

6. Группировка

7.Умножение

8. Автоматическая нумерация

9.Фиктивный текст

10. Ярлык ссылки

Заключение

Sublime Text

Раздел D.1 возвышенный текст

Подраздел D.1.1 Настройки

Подраздел D.1.2 Управление пакетами

Подраздел D.1.3 (*) Сочетания клавиш

Подраздел D.1.4 Управление проектом

Подраздел D.1.4.1 Команда открытия папки

Подраздел D.1.4.2 Явные проекты

Подраздел D.1.5 Множественный выбор

Подраздел D.1.6 Эммет

Подраздел D.1.7 MBXTools — пакет Sublime Text для MathBook

Подраздел D.1.7.1 Установка

через Package Control.

через git.

Подраздел D.1.7.2 Использование

Подраздел D.1.8 (*) Sublime Linter

Подраздел D.1.9 Рекомендуемые пакеты

Автозаполнение в Sublime Text | Скотт Граннеман

Встроенное автозаполнение

слов

Код

Но как мне вставить настоящую табуляцию ?!

Убедитесь, что автозаполнение включено

Пакет тегов

Что это?

Установка пакета тегов

Использование пакета тегов

Подраздел D.1.3 () Сочетания клавиш*

`Подраздел D.1.8 (*) Sublime Linter`

`Подраздел D.1.9 Рекомендуемые пакеты`

`Автозаполнение в Sublime Text | Скотт Граннеман`

`Встроенное автозаполнение`

`слов`

`Код`

`Но как мне вставить настоящую табуляцию ?!`

`Убедитесь, что автозаполнение включено`

`Пакет тегов`

`Что это?`

`Установка пакета тегов`

`Использование пакета тегов`

`Пакет TagWrapper`

`Что это?`

`Установка пакета TagWrapper`

`Использование пакета TagWrapper`

`Добавить метки`

`Использование Emmet с Sublime Text`

`Что такое Эммет?`

`Установка плагинов`

`Использование Emmet`

`Улучшение`

`Добавить комментарий Отменить ответ`