Быстрая настройка 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 файлах.
• terminus — плагин встроенного терминала Sublime Text.
• W3​CValidators — мощный набор валидаторов для HTML разметки, CSS, SVG и т.д.

Установка внешнего оформления 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 на новом рабочем месте или после переустановки системы. Вы можете использовать данный пресет в вашем редакторе и кастомизировать его при необходимости:

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

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

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

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

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

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

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

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

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

Создание сайта от А до Я. Комплексный курс

Создание современного интернет-магазина от А до Я

Источник

Sublime Text 3 жив. (Настройка и работа)

Sublime Text 3 — кроссплатформенный текстовый редактор.

Краткий гайд для начинающих работать в sublime и в сфере вёрстки. Тут собрано всё самое необходимое и важное. (По ссылкам найдёте больше, если это нужно)

Будем рассматривать его для Вёрстки на Pug / Less, где нам не нужен огромный функционал отладки. Поэтому именно этот редактор (по моему мнению) побеждает своих конкурентов как в скорости работы так и в функционале.

1. Установка программы и контроль за дополнениями (Package Control)

1. Устанавливаем Sublime Text 3. Тут всё просто — качаем и запускаем.

Теперь нажимаем ctrl/⌘+shift+p или в меню (Tool > Command Palette).

Тут мы можем Скачивать, устанавливать, удалять, просматривать дополнения и т.д.

2. Настройки программы:

1. Используем пробелы, вместо табов.
   «translate_tabs_to_spaces»: true
2. Размер таба равен 4 пробела.
   «tab_size»: 4

Вы спросите зачем?
Что бы случайно не нажать пробел и таб вместе, и не сломать сборку pug.
А так же для единообразия работы в команде.

Строки не должны заканчиваться пустыми символами.
Для этого используем плагин TrailingSpaces.

Источник

Настраиваем 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

Источник

Sublime Text 3: установка, настройка, плагины

Sublime Text 3 — проприетарный кроссплатформенный редактор веб-кода, написан на языках программирования C++ и Python разработчиком Джоном Спиннером. Первая альфа-версия вышла в 2011 году. Последняя версия Sublime Text 3 вышла в 2013 году и имеет возможность подсветки синтаксиса для C, C++, C#, CSS, D, Dylan, Erlang, HTML, Groovy, Haskell, Java, JavaScript, LaTeX, Lisp, Lua, Markdown, MATLAB, OCaml, Perl, PHP, Python, R, Ruby, SQL, TCL и XML. Редактор оснащен менеджером пакетов, который позволяет пользователю находить, устанавливать, обновлять и удалять пакеты без перезагрузки программы. В этой статье я расскажу как установить и настроить Sublime Text 3, а также поделюсь некоторыми полезными «фишками».

Особенности веб-редактора Sublime Text

Данный редактор веб-кода я стал использовать относительно недавно, ранее «кодил» в обычном Notepad ++. Но со временем понял, что мне его не достаточно, нужно что-то более профессиональное и в то же время легкое в освоении, где можно будет максимально автоматизировать процесс построения/редактирования кода. Такие «монстры» как ID Php Storm и Visual Studio Code мне почему-то не совсем впечатлили, хотя остаются прекрасными решениями, а вот Sublime Text сразу, как говорится, «лег на душу» и наше знакомство с ним прошло мгновенно. То, что в Notepad++ забирало минуты, в Sublime я делал за секунды.

Преимущества Sublime Text

• Легкий, занимает мало дискового пространства, потребляет мало оперативной памяти, компактный;
• Простой и понятный веб-интерфейс, доступный новичку и полезный опытному пользователю (содержит множество «плюшек»);
• Поддержка различных тем, скинов, расширений, модулей, плагинов;
• Поддержка сниппетов (заготовок) веб-кода;
• Кросплатформенный — поддерживает все современные ОС;
• Поддержка макросов;
• Поддержка автосохранения.

Недостатки Sublime Text

• Платный. Распространяется по коммерческой лицензии — цена 59$.

Установка Sublime Text 3

Скачать можно по ссылке:

После установки, запускаем редактор с помощью меню «Пуск» в ОС Windows:

По умолчанию программа выглядит так:

Установка менеджера пакетов

Первое, что нужно сделать — установить Package Control (Менеджер Пакетов) — специальный репозиторий с различными дополнениями к редактору Sublime Text 3. Для того чтобы установить переходим в меню: Tools -> Install Package Control.

Получаем сообщение, что менеджер пакетов установился успешно, нажимаем «Ок»:

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

Далее установим плагин Emmet — позволяет ускорить написание веб-кода за счет того, что он умеет генерировать HTML-разметку. Переходим в Preferences -> Package Control:

Далее введите install и выберите Package control: Install package:

Далее напишите Emmet и выберите пункт Emmet for Sublime Text 3:

Получаем сообщение, что Emmet установился успешно:

Давайте попробуем проверить как работает плагин Emmet. Создадим файл index.html и сгенерируем разметку: зажмите клавишу Shift и введите восклицательный знак.

Появится сниппет разметки HTML-документа. Нажмите клавишу Tab, чтобы применить его:

Как вы видите одним нажатием клавиши у нас сгенерировалась полностью рабочая HTML-разметка. Далее можем сгенерировать мета-тег

. Для этого просто введите h1 и нажмите на клавишу Tab — плагин Emmet сгенерирует открывающий и закрывающий тег:

И подобным образом можно генерировать любые другие html-теги.

Установка темы

Теперь попробуем установить тему оформления и подсветки синтаксиса для редактора Sublime Text 3. Я буду использовать простую тему Spacegray Monokai.

Установка проходит стандартно через Менеджер пакетов (Ctrl+Alt+P): Preferences -> Package Control -> Install-> Monokai — Spacegray:

Чтобы применить тему переходим в меню Preferences -> Color Scheme и выбираем цветовую тему:

Кстати, удалить любое расширение (плагин или тему) в Sublime Text 3 также легко, как и установить — в Менеджере пакетов достаточно прописать Remove package и выбрать необходимое расширение.

Горячие клавиши Sublime Text 3

• Ctrl + Shift + P — вызов менеджера пакетов;
• Ctrl + ` — открыть консоль;
• F11 — полноэкранный режим;
• F9 — сортирует все строки в алфавитном порядке;
• F6 — проверка правописания;
• Shift + F11 — свободный полноэкранный режим;
• Ctrl+K + Ctrl+B — вывести/спрятать боковую панель;
• Ctrl + G — перейти к строке по номеру;
• Ctrl + R — перейти к символу;
• Ctrl + « — перейти к классу;
• Ctrl + I — поиск на лету;
• Ctrl + H — поиск и замена;
• Ctrl + / — закомментировать/раскомментировать текущую строку;
• Ctrl + Shift + / — добавить комментарий;
• Ctrl +Shift + J — выделить блок;
• Ctrl + L — выделение целой строки;
• Ctrl + Z — отмена последних действий, шаг назад;
• Ctrl + T — быстрое перемещение по файлам;
• Сtrl + N — создать новую вкладку (файл);
• Alt + . — закрыть незакрытый тег;
• Ctrl+K + Ctrl+Space — установить метку;
• Ctrl+K + Ctrl+W — удалить метку;
• Ctrl+K + Ctrl+G — удалить все метки;
• Ctrl+K + Ctrl+U — трансформирует выделенный текст в верхний регистр;
• Ctrl+K + Ctrl+L — трансформирует выделенный текст в нижний регистр;
• Ctrl + Shift + A — выделить содержимое html-тега;
• Ctrl + Shift + D — продублировать строку вниз;
• Ctrl + Shift + N — создать новое окно;
• Ctrl + Shift + W — закрыть текущее окно;
• Ctrl + Shift + V — вставить с отступом;
• Ctrl + Shift + [ — свернуть код;
• Ctrl + Shift + ] — развернуть код;
• Ctrl + O — открыть файл;
• Ctrl + Shift + T — открыть последний закрытый файл;
• Ctrl + C — копировать;
• CTRL + V — вставить;
• CTRL + X — вырезать;
• Ctrl + S — сохранить текущий файл;
• Ctrl + Shift + S — вызвать окно «Сохранить как»;
• Ctrl + + — увеличить размер шрифта в редакторе;
• Ctrl + — — уменьшить размер шрифта в редакторе;
• Ctrl + q — записать макрос;
• Ctrl + Shift + q — воспроизвести макрос;
• Ctrl + Alt + Shift + P — отобразить название контекста, в котором находится курсор;

Горячие клавиши плагина Emmet

• Shift + ! — сгенерировать разметку html-документа;
• ul>li*5 — выведет 5 тегов li, заключенных в тег ul;
• #selector — выведет

Как добавить просмотр кодировки

Переходим в меню Preferences -> Settings и добавляем строку: «show_encoding»: true.

Можно также просмотреть текущую кодировку в консоли с помощью команды: view.encoding().

Сохранить файл в указанной кодировке: File -> Save with encoding.

Также существует специальный плагин для работы с разными кодировками — EncodingHelper.

Источник