Установка emmet в sublime text 3 – Emmet для sublime text 3 установка. Добавление Package Control

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

Вы до сих пор пишите теги html и css свойства вручную? Пришло время это исправить! Сегодня мы поговорим о плагине emmet, который поможет нам в этом.

Emmet — это плагин, который позволит вам писать html и css в десятки раз быстрее. Многие уже используют его в своих проектах, но многие о нем еще ничего не знают, и сегодня я попытаюсь исправить это.

Для начала его нужно установить. В Sublime Text, о котором недавно была написана статья, это делается очень просто. Откройте command palette, нажав сочетание клавиш cmd+shift+p, или перейдите в пункт tools и выберите там command palette. Теперь введите «install package» и нажмите enter. Дальше введите «emmet» и снова нажмите enter. После того, как плагин загрузится и установится, перезапустите

Установка завершена, и теперь мы можем начать пользоваться плагином emmet. Введите

А теперь нажмите клавишу tab. В результате этих несложных действий мы получим открывающий и закрывающий тег div, а курсор будет установлен внутри, между ними.

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

Теперь нажмите tab, и мы получим следующее

Как видите, emmet добавил атрибут href самостоятельно. Если же вы введете

Теперь рассмотрим, как добаблять классы и id. Делается это точно так же, как и в css: класс с помощью ., а id с помощью #

В результате получим

То же самое и с id

Получим следующее

Заметьте, что я не писал слово div, а просто ставил точку или решетку и писал нужный мне класс или id. Дело в том, что мы можем пропускать название тега и тогда emmet сам будет додумывать, какой же тег поставить. В большинстве случаев это будет

Если вы хотите сами ввести какой-то атрибут, то напишите его в квадратных скобках

Получим следующее

Чтобы вкладывать теги внутри других тегов, нужно использовать знак больше

Получим следующее

С помощью символа

Вот, что у нас получится

Если вам нужно добавить тег на том же уровне, используйте знак +

Результат

С помощью символа $ мы можем указать, что каждый тег следует нумеровать автоматически

Результат

Если вам нужен ведущий ноль, то напишите знак $ 2 раза, если 2 ведущих нуля, то 3 знака $ и т.д.

Если вы хотите добавить внутри тега текст, то его нужно указать в фигурных скобках

Результат

Если во время верстки вам нужен какой-то текст, то просто напишите

Результат

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

Результат

Чтобы создать html структуру, просто напишите знак !

Результат

Теперь поговорим о том, как emmet поможет нам в css

Там достаточно просто написать начальные буквы свойства и значение, а потом нажать tab. Например

В результате получим

В некоторых свойствах уже стоят значения по-умолчанию. Например, в свойстве text-align

Результат

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

Результат

Все рассматривать нет смысла. Документацию по плагину emmet вы можете найти здесь: http://docs.emmet.io/cheat-sheet/

В конце стоит сказать, что если вам по каким-то причинам не нравится клавиша tab, то вы можете поменять ее. Для этого зайдите по следующему пути: Perferences->Package Settings->Emmet->Key Bindings — default. Используйте поиск(cmd+f или перейдите по пути Find->Find) С помощью поиска найдите команду «expand_abbreviation_by_tab». Выше нее, в массиве

Итак, на этом все. Сегодня мы рассмотрели плагин emmet для текстового редактора Sublime Text. Если вы используете другой редактор, то поищите этот плагин для него в интернете. Удачи!

• Создано 20.05.2014 19:09:59
• Михаил Русаков

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

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

myrusakov.ru

Быстрая настройка Sublime Text 3 для вёрстки сайтов

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

Поделиться

Твитнуть

Поделиться

Класснуть

Запинить

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

Сегодня мы рассмотрим максимально быструю настройку Sublime Text, самые популярные среди верстальщиков плагины для ускорения вёрски и установим одну из лучших и комфортных тем оформления редактора One Dark Material Theme.

По-умолчанию Sublime Text выглядит довольно печально:

Установка Package Control в Sublime Text

Для начала необходимо настроить Package Control. Для этого нажимаем хоткей Ctrl+Shift+P. Во всплывающем окне набираем Install Package Control и выбираем соответствующий пунк. Через несколько секунд Package Control будет установлен, о чём вы получите соответствующее уведомление.

Если вы пользователь MacOS, необходимо нажать на клавиатуре Cmd+Shift+P.

Package Control необходим для того, чтобы вы могли устанавливать дополнения и плагины в Sublime Text 3 из репозитория пакетов.

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

Далее необходимо установить нужные для работы плагины. Мы рассмотрим установку самых популярных среди верстальщиков плагины, которые значительно упрощают разработку. Вы также можете поэкспериментировать с другими плагинами в Package Control, может быть вам понравятся и другие из огромного количества доступных пакетов.

Для установки плагинов в Sublime Text через Package Control необходимо вызвать меню, как мы это делали ранее: Ctrl+Shift+P. Затем вводим команду «Install Package» и выбираем нужный пакет из списка.

Самые популярные плагины для Sublime Text:

• Emmet — ускоряет написание HTML и CSS кода до скорости света. Урок по Emmet;
• AutoFileName — дополняет код при написании путей до файлов в вёрстке;
• Gist — подключает в Sublime Text возможность использовать сервис сниппетов кода GitHub Gist. Урок по Gist;
• Sass — плагин для подсветки Sass синтаксиса в Sass и Scss файлах. Раскрывает Emmet в Sass файлах.

Установка внешнего оформления Sublime Text

Мне очень нравится тема оформления One Dark Material Theme и подсветка кода соответствующей цветовой гаммой. Это наиболее сбалансированные, достаточно контрастные, но не слишком резкие цвета для комфортной работы в редакторе.

Дя установки цветового оформления One Dark нам необходимо доустановить следующие пакеты через Package Control:

• One Dark Color Scheme — цветовая схема для подсветки кода;
• One Dark Material — Theme — тема оформления UI Sublime Text.

Установка плагина вручную

Некоторые плагины более не обновляются в Package Control или просто там не фигурируют. Кое-какие из этих плагинов имеют жизненную необходимость при работе с кодом и их приходится устанавливать вручную.

Один из таких плагинов BufferScroll — потрясающий плагин, который при повторном открытии документа устанавливает курсор на том месте, на котором вы закончили редактирование в прошлый раз, тем самым сокращая время на поиск нужной позиции для продолжения работы.

Для установки BufferScroll вручную, перейдите на GitHub страницу плагина, скачайте и распакуйте его в любое удобное место на вашем диске. Далее в Sublime Text выбираем пункт меню Preferences > Browse Packeges. Откроется папка пользовательских данных на вашем диске. Скопируйте сюда папку, содержащую файлы Buffer Scroll и перезапуститие Sublime Text. Теперь плагин работает.

Тонкая настройка редактора, пресет моих настроек

Переходим к настройкам Sublime Text.

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

Keymap (Windows Users):
[
	{ "keys": ["alt+shift+f"], "command": "reindent" },
]

Settings:
{
	"show_definitions": false,
	"auto_complete": false,
	"bold_folder_labels": true,
	"color_scheme": "Packages/One Dark Material - Theme/schemes/OneDark.tmTheme",
	"fold_buttons": false,
	"font_size": 13,
	"highlight_line": true,
	"indent_guide_options":
	[
		"draw_normal",
		"draw_active"
	],
	"line_padding_bottom": 2,
	"line_padding_top": 2,
	"margin": 2,
	"material_theme_compact_sidebar": true,
	"material_theme_compact_panel": true,
	"material_theme_small_statusbar": true,
	"material_theme_small_tab": true,
	"tab_size": 2,
	"theme": "OneDarkMaterial.sublime-theme",
	"word_wrap": "false",
}

Код пресета для пользовательских настроек (Preferences.sublime-settings | Preferences > Settings) — отдельно:

{
	"show_definitions": false,
	"auto_complete": false,
	"bold_folder_labels": true,
	"color_scheme": "Packages/One Dark Material - Theme/schemes/OneDark.tmTheme",
	"fold_buttons": false,
	"font_size": 13,
	"highlight_line": true,
	"indent_guide_options":
	[
		"draw_normal",
		"draw_active"
	],
	"line_padding_bottom": 2,
	"line_padding_top": 2,
	"margin": 2,
	"material_theme_compact_sidebar": true,
	"material_theme_compact_panel": true,
	"material_theme_small_statusbar": true,
	"material_theme_small_tab": true,
	"tab_size": 2,
	"theme": "OneDarkMaterial.sublime-theme",
	"word_wrap": "false",
}

Код пресета для пользовательских клавиатурных сокращений (Default (Windows).sublime-keymap | Preferences > Key Bindings) — отдельно:

[
	{ "keys": ["alt+shift+f"], "command": "reindent" },
]

Теперь при выделении и по нажатию Alt+Shift+F ваш код будет автоматически выравниваться отступами с соответствующей иерархией вложенности элементов.

Разместив данные сниппеты в соответствующих файлах настроек вы получите полностью готовый к рабое, настроенный Sublime Text или можете настроить редактор под себя. В настройках есть два поля — левое с дефолтными настройками и правое с пользовательскими. В дефолтных настройках вы можете увидеть подсказки к каждому свойству и применить его в правой части скопировав и установив своё значение.

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

Для того, чтобы сделать бэкап всех ваших настроек и быстро развернуть Sublime Text на другом рабочем месте, достаточно скопировать папку

«C:\Users\{Ваш пользователь}\AppData\Roaming\Sublime Text 3»
в потаённое резервное место на вашем диске или на флешку, а затем разместить у другого юзера или на другом компьютере в этой-же директории под пользователем.

Также дополнительно на ваше усмотрение можно отключить миникарту справа и скрыть меню. Это можно сделать перейдя в меню View > Hide Minimap и View > Hide Menu. Показать меню можно нажатием клавишы Ctrl на клавиатуре.

Премиум уроки от WebDesign Master

Другие уроки по теме «Инструменты»

webdesign-master.ru

EMMET шпаргалка для молниеносностной верстки

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>
<body>

</body>
</html>

<!DOCTYPE html>

<a href=""></a>

<a href="http://"></a> 

<a href="mailto:"></a>

<br />

<frame />

<link rel="stylesheet" href="" />

<link rel="stylesheet" href="style.css" />

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />

<link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml" />

<meta />

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

<meta http-equiv="Content-Type" content="text/html;charset=windows-1251" />

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />

<meta http-equiv="X-UA-Compatible" content="IE=7" />

<style></style>

<script></script>

<script src=""></script>

<img src="" alt="" />

<img srcset="" src="" alt="" />

<img srcset="" src="" alt="" />

<map name=""></map>

<form action=""></form>

<label for=""></label>

<input type="text" /> 

<input type="text" name="" />

<input type="text" name="" />

<input type="search" name="" />

<input type="email" name="" />

<input type="url" name="" />

<input type="password" name="" /> 

<input type="datetime" name="" />

<input type="date" name="" />

<input type="time" name="" />

<input type="tel" name="" />

<input type="number" name="" />

<input type="color" name="" />

<input type="checkbox" name="" />

<input type="radio" name="" />

<input type="range" name="" />

<input type="file" name="" /> 

<input type="submit" value="" />

<input type="image" src="" alt="" />

<input type="button" value="" />

<input type="reset" value="" />

<select name=""></select>

<select name="" disabled="disabled"></select>

<option value=""></option>

<textarea name="" cols="30" rows="10"></textarea>

<marquee behavior="" direction=""></marquee>

<menu type="context"></menu>

<menu type="toolbar"></menu>

<video src=""></video>

<audio src=""></audio>

<html xmlns="http://www.w3.org/1999/xhtml"></html>

<keygen />

<command />

<button type="submit"></button>

<button type="reset"></button>

<button disabled="disabled"></button>

<blockquote></blockquote> 

<figure></figure>

<figcaption></figcaption>

<picture></picture>

<iframe src="" frameborder="0"></iframe>

<embed src="" type="" />

<object data="" type=""></object>

<caption></caption>

<colgroup></colgroup>

<fieldset></fieldset>

<button></button>

<optgroup></optgroup>

<textarea name="" cols="30" rows="10"></textarea>

<legend></legend>

<section></section>

<article></article>

<header></header>

<footer></footer>

<address></address>

<dialog></dialog>

<strong></strong>

<progress></progress>

<main></main>

<template></template>

<datagrid></datagrid>

<datalist></datalist>

<keygen />

<output></output>

<details></details>

<command />

<ol>
    <li></li>
</ol>

<ul>
    <li></li>
</ul>

<dl>
    <dt></dt>
    <dd></dd>
</dl>

<map name="">
    <area shape="" coords="" href="" alt="" />
</map>

<table>
    <tr>
        <td></td>
    </tr>
</table>

<colgroup>
    <col />
</colgroup>

<tr>
    <td></td>
</tr>

<select name="">
    <option value=""></option>
</select>

<optgroup>
    <option value=""></option>
</optgroup>

<picture>
    <source srcset="" />
    <img src="" alt="" />
</picture>

dwstroy.ru

Emmet LiveStyle — инструмент для удобной front-end разработки / Habr

На днях появился наверное самый удобный инструмент для front-end разработчиков — Emmet LiveStyle. Это плагин для двухстороннего (редактор браузер) редактирования CSS файлов, который может заметно облегчить и ускорить разработку. Восторженные отзывы по всему интернету это подтверждают (комментарии к статье Smashing Magazine и на Хабре).

Главное преимущество Emmet LiveStyle в том, что все изменения вносятся легко и интуитивно, а результат виден «на лету». Это реально ускорят процесс. Рассказывать о плюсах плагина можно долго, но лучше всего работу плагина демонстрирует ролик:

Проект находится в режиме публичной беты. Пока инструмент работает в Google Chrome, Safari и Sublime Text. В будущем планируется поддержка других браузеров.

Возможности

• Результат виден сразу после внесения изменений — никаких сохранений и обновлений страниц.
• Не требуется хранить файлы локально, для редактирования их можно открыт напрямую с FTP.
• Кроссплатформенность.
• Результат можно просматривать одновременно в нескольких окнах, все изменения будут происходить «на лету». Удобно для тестирования адаптивного дизайна.
• Можно редактировать одновременно несколько сайтов, например, десктоп и мобильную версию.
• Легкая установка и работа: достаточно открыть CSS-файл в редакторе и связать его с файлом стилей сайта.

Установка

1. Для Sublime Text 3 установить Package Control.
2. В Sublime Text открыть Command Palette (Ctrl+Shift+P) и выбрать Package Control: Install Package.
3. В списке найти и установить расширение LiveStyle.
4. Установить расширение для Google Chrome.
5. Открыть в Sublime Text CSS-файлы.
6. Открыть в браузере страницу для редактирования
7. Открыть DevTools (Ctrl+Shift+I) и во вкладке LiveStyle связать файлы стилей сайта с открытыми в Sublime Text. Для работы плагина DevTools необходимо держать открытым для каждого окна.

Автор разработки есть на хабре — chikuyonok. Подробности можно почитать на официальном сайте и в статье Smashing Magazine.

habr.com

sublime text 3 настройка

Рассмотрим настройку sublime text 3 для frontend разработки.

Для начала скачаем программу с официального сайта.

Далее запускаем установщик.

После запускаем программу и приступаем к настройке.

Содержание статьи

Первым делам добавляем пакеты.

Нажимаем ctrl+shift+p откроется табличка пишем слово install и выбираем пункт Install Package.

Установка emmet

Вторым делом устанавливаем emmet.

Это плагин, который позволяет ускорить разработку верстки сайта.

Зажимаем ctrl+shift+p заходим в install packege и прописываем emmet, плагин появится ниже устанавливаем.

Продолжаем настройку sublime text 3.

Создаем на рабочем столе файл index.html и открываем его с помощью sublime text.

Пишем восклицательный знак, нажимаем клавишу tab.

Мы увидим, что отработает плагин emmet и появится структура нового документа.

Увеличим шрифт, путем зажатия shift+колесеко мышки.

Создадим div. Пишем .div и tab.

Внутри дива пишем ul>li*5, нажимаем клавишу tab получается структура.

Если у нас собьются в строках li или div, то чтобы их выравнять нажмем горячую клавишу функции reindent.

Клавишу зададим в пункте меню preferebces — key bind

{ «keys»: [«ctrl+shift+f»], «command»: «reindent» },

Пробуем выравнять.

Следующий пакет это AutoFileName.

Этот пакет в sublime text позволит быстро прописать путь до файлов.

При вводе путя быдет высвечиваться подсказка с выбором папки или файла.

Установим sass.

Без плагина sass не будет работать emmet в файлах sass.

Основная работа будет с препроцессором sass.

Установим внешнее оформление для sublime text.

1. Установим OneDarkMaterial-Theme это тема.
2. Установим цветовую схему OneDarkColor-Schema.

Настройка sublime text

Для рабочего места используем заранее созданную конфигурацию.

Открываем Preferences – Settings.

Откроется окно настроек программы.

Копируем код внизу и вставляем в правую часть экрана, сохраняем.

{ «auto_complete»: true, «bold_folder_labels»: true, «color_scheme»: «Packages/One Dark Material — Theme/schemes/OneDark.tmTheme», «fold_buttons»: false, «font_size»: 12, «highlight_line»: true, «indent_guide_options»: [ «draw_normal», «draw_active» ], «line_padding_bottom»: 2, «line_padding_top»: 2, «margin»: 2, «material_theme_compact_panel»: true, «material_theme_compact_sidebar»: true, «material_theme_small_statusbar»: true, «material_theme_small_tab»: true, «show_definitions»: false, «tab_size»: 2, «theme»: «OneDarkMaterial.sublime-theme», «word_wrap»: «false» }

• auto_complete: true, лучше использовать поначалу включенным, это свойство помогает дополнять код в процессе верстки.
• bold_folder_labels: true эта настройка делаем папки побольше когда они помещены сбоку программы.
• fold_buttons: false отключаем кнопки раскрытия и закрытия кода.
• Чтобы подсветить всю строку используем highlight_line: true.
• За расстояния между строками отвечает свойство line_padding_bottom: 2.
• tab_size: 2 размер табов в коде.
• Чтобы строки, которые уходят за границы не переносились на новые выставим word_wrap: false.

Отключаем миникрату сбоку view – hideminimap.

Чтобы убрать или вытащить верхнее меню в sublime text нажимаем клавишу Alt.

sdelatlending.ru