НОВОЕ

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

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:

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

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

Запуск Sublime Text 3

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

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

Install Package Control in Sublime Text 3

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

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

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

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

Install Emmet in Sublime Text 3

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

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

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

Emmet for Sublime 3

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

Emmet

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

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

Emmet html snippets

Как вы видите одним нажатием клавиши у нас сгенерировалась полностью рабочая HTML-разметка. Далее можем сгенерировать мета-тег <H1>. Для этого просто введите h1 и нажмите на клавишу Tab — плагин Emmet сгенерирует открывающий и закрывающий тег:

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

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

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

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

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

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

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

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

Кстати, удалить любое расширение (плагин или тему) в 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 — выведет <div id=»selector»></div>;
  • ul>li*10>a{item$} — выведет 10 тегов <a href=»»>, заключенных в теги li и ul;
  • (div>p)+(span>em)  — выведет одновременно несколько тегов;
  • div.class+div#id — вывод блока div с указанным класом + вывод блока div с указанным идентификатором;
  • div[title=»Hello» myattr=3] — вывод атрибутов;
  • h1{Заголовок} — создаст тег h1 с указанным текстом;
  • Lorem5 — сгенерировать «текст-рыбу» с 5 слов;
  • .class — выведет блок div с указанным классом: <div class=»class»></div>;
  • a:link — <a href=»http://»></a>;
  • a:mail — <a href=»mailto:»></a>;
  • base — <base href=»»>;
  • link — <link rel=»stylesheet» href=»»>;
  • link:css — <link rel=»stylesheet» href=»style.css»>;
  • link:favicon — <link rel=»shortcut icon» type=»image/x-icon» href=»favicon.ico»>;
  • link:rss — <link rel=»alternate» type=»application/rss+xml» title=»RSS» href=»rss.xml»>;
  • meta:utf — выведет мета-тег кодировки html-документа;
  • meta:vp — мета-тег viewport;
  • script:src — <script src=»»></script>;
  • img — <img src=»» alt=»»>;
  • ifr — <iframe src=»» frameborder=»0″></iframe>;
  • emb — <embed src=»» type=»»>;
  • obj — <object data=»» type=»»></object>;
  • form — <form action=»»></form>;
  • input — <input type=»text»>;
  • tarea — <textarea name=»» id=»» cols=»30″ rows=»10″></textarea>;

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

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

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

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

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

Как автоматически отформатировать код

Sublime Text 3 один из тех продвинутых редакторов, которые поддерживают интеграцию линтеров — так-называемых форматтеров кода. Плагин, который я порекомендую — HTML-CSS-JS Prettify. С его помощью вы всегда сможете структурировать свой код и держать его в «чистоте», то есть придерживаться стиля, который часто игнорируется новичками, но ценится в среде профессиональной веб-разработки. Форматтер использует библиотеку Node.js, поэтому предварительно этот компонент нужно установить.

Полезные ссылки

Оценка:
( 2 оценки, среднее 5 из 5 )
Подписка на KRASHENININ.TECH

Получайте регулярные обновления на почту!


Виталий Крашенинин/ автор статьи
Основатель блога, публицист, обзорщик веб-технологий, IT-специалист. Исследователь цифрового мира. Сфокусирован на кибербезопасности, системном администрировании, веб-разработке и SEO.
Не забудьте поделиться материалом в соцсетях:
KRASHENININ.TECH - блог о веб-технологиях, и не только
Подписаться
Уведомление о
guest
0 Комментарий
Встроенные отзывы
Просмотреть все комментарии
0
Есть мысли? Прокомментируй!x
()
x
Читайте ранее:
Установка Hyper-V в Windows 10
Установка Hyper-V в Windows 10

Hyper-V (кодовое название Viridian) - это гипервизор, разработанный компанией Microsoft, который использует технологию виртуализации для создания виртуальных машин (программная версия...

Закрыть