автоматическая замена синтаксиса

Emmet: автоматическая замена синтаксиса

Короткая заметка о том, как настроить синтаксис для плагина "Emmet" в текстовом редакторе "Sublime".

Короткая заметка о том, как настроить синтаксис для плагина «Emmet» в текстовом редакторе «Sublime». По умолчанию используется синтаксис, указанный в doctype и это логично.

Строгий синтаксис XHTML используют верстальщики и при написании HTML:

  • Теги и атрибуты набираются в нижнем регистре (строчными символами).
  • Соблюдается правильная вложенность тегов.
  • Не используются сокращённые атрибуты тегов. Если в HTML можем указать просто checked, то в XHTML пишется полностью checked="checked".
  • Вместо атрибута name следует указывать id. Для радиобатанов name используется, ведь иначе никак.
  • Закрываются все теги, даже одиночные. Об этом ниже.

Если указываем <!DOCTYPE html>, одиночные теги формируются следующим образом:

<input type="text">
<img src="" alt="">

При записи <!DOCTYPE xhtml>:

<input type="text" />
<img src="" alt="" />

Мы же хотим объединить подходы, чтобы при написании HTML использовался синтаксис XHTML. Благо, HTML5 это позволяет и код будет считаться валидным.

установка emmet для sublimeEmmet для Sublime text: установка.

Контекст заметки подразумевает, что Emmet уже установлен. Дальше идём следующим путём:
Preferences → Package Settings → Emmet → Settings — User

Путь к настройке в MacOS

Путь к настройке в MacOS

Путь к настройке в Windows

Путь к настройке в Windows

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

"syntaxProfiles": {
	"html": "xhtml"
}
настройка синтаксиса XHTML в HTML

Финальный код для замены синтаксиса

Сохраняем, перегружаем Sublime и наслаждаемся результатом.