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 для Sublime text: установка.Контекст заметки подразумевает, что Emmet уже установлен. Дальше идём следующим путём:
Preferences → Package Settings → Emmet → Settings — User
Путь к настройке в MacOS
Путь к настройке в Windows
В открывшемся окне дописываем индивидуальные настройки для плагина. Между фигурными скобками, что уже есть в файле, вписываем следующие строки:
"syntaxProfiles": {
"html": "xhtml"
}
Финальный код для замены синтаксиса
Сохраняем, перегружаем Sublime и наслаждаемся результатом.