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

Привет, друзья! По многочисленным просьбам обновил руководство по быстрой настройке редактора кода 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 для 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
  • Михаил Русаков

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

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

myrusakov.ru

Sublime Text Plugins  |  Web  |  Google Developers

Language Bahasa Indonesia Deutsch English Español Français Português – Brasil Русский 中文 – 简体 日本語 한국어

developers.google.com

No related posts.