Plugins sublime text 3: 15 прекрасных плагинов для Sublime Text

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

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

Смотреть урок на YouTube

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

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

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

Я — фрилансер! Базовый курс для начинающих

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

• Настройка VS Code для верстки
• Simple Starter — простой стартер для верстки | Материалы урока
• Windows 11: Делаем вкладки в проводнике. Настройка QTTabBar от А до Я
• Хостинг от А до Я: Сайты, базы, домены, SSL, SSH, sFTP, перенос, деплой, секреты, лайфхаки
• Gulp 4 — Актуальное и исчерпывающее руководство для самых маленьких
• Актуальный способ установки и настройки окружения Windows WSL 2 (Windows Subsystem for Linux)

Обзор Sublime Text 3, основные плагины.

Некоторое время назад в качестве альтернативы знаменитому Notepad++, был установлен редактор Sublime Text 3. После работы на нем в течении некоторого времени стало понятно, что он останется основным редактором, Notepad++ отошел на второй план в качестве запасного варианта.

Sublime Text 3 — при первом запуске осталось сразу положительное впечатление, оформление и стили шрифтов.

В редакторе возможно открытие нескольких окон одновременно и разделение экрана как по горизонтали так и по вертикали. Экран делится не только пополам, но и на четыре колонки например, в каждой колонке возможно открыть отдельный файл.

Справа у каждого окна имеется полоса прокрутки в виде карты кода, ее можно убрать в настройках если нет в ней необходимости. Так же можно вывести или убрать панель проектов или открытых файлов — она располагается слева.

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

Самое интересное.

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

Единственное не хватало функционала, но оказалось, что его функционал огромен, к этому текстовому редактору существует множество плагинов которые безгранично расширяют его функционал.

Опишем некоторые плагины, основные.

На официальном сайте и в сообществах этого редактора вы сможете найти плагины которые расширят функционал этого редактора в той сфере в какой нужно вам.

Самый главный плагин — Package control этот плагин устанавливается в первую очередь,  в дальнейшем с помощью него вы сможете устанавливать или удалять все последующие плагины.

Скачивать их не надо, просто набираем название нужного в поиске через Package control. В строке поиска пишем нужный, затем выбираем необходимый. Выбранный плагин автоматически скачивается и установится.

(нажимаем Ctrl+Shift+P, пишем list, жмём enter или выбираем пункт «Package Control: List Packages»)

Второй по популярности плагин Emmet. Этот плагин сильно ускоряет написание кода, для верстальщика это просто чудо. К примеру набрав всего один символ ! и после этого нажав TAB мы получаем такой код:

Плагин Alignment — выравнивает код. Очень удобно когда вы открываете чужой файл и пытаетесь в нем разобраться, выделяем код и жмем ctrl+Alt+A и код стало приятно читать.

Чтоб понять все прелести и удобство данного редактора необходимо его попробовать. Поработать на нем и настроив его под свои нужды вы сразу поймете как он ускоряет работу и удобен.

Так же имеется множество плагинов которые не только расширяют функционал но и меняют внешний вид. Вы сможете придать внешний вид в стиле который вам нравится

Sublime Text 3 — программа условно бесплатная и во время работы иногда выскакивает окно с предложением его купить, но при нажатии ESC окно пропадает и ни как не ограничивает функционал программы.

Разработаны версии как для Windows так и для MacOS и Linux.

Официальный сайт программы www.sublimetext.com

Сайт с русской документацией www.sublimetext.ru

Всем Удачи!

16 июня 2016

плагинов | Документация сообщества Sublime Text

См. также

Справочник по API

Дополнительная информация об API Python.

Справочник по подключаемым модулям

Дополнительная информация о подключаемых модулях.

Этот раздел предназначен для пользователей с навыками программирования.

Sublime Text можно расширить с помощью плагинов Python. Плагины создают функции повторное использование существующих команд или создание новых. Плагины — это логическая сущность, а не физическое.

Предварительные требования

Чтобы писать плагины, вы должны уметь программировать на Python (открывается в новом окне). На момент написания этой статьи Sublime Text использует Python 3.3.

Где хранить плагины

Sublime Text будет искать плагины только в этих местах:

• Установленные пакеты (только . sublime-package )
• Пакеты
• 8
• >
• 88
• 88
• 88
• .

Как следствие, любой плагин, вложенный глубже в Пакеты не будут загружены.

Не рекомендуется хранить плагины непосредственно в Packages . Sublime Text сортирует пакеты предопределенным образом перед их загрузкой, поэтому, если вы сохраните файлы плагинов непосредственно под пакетами

вы можете получить запутанные результаты.

Ваш первый плагин

Давайте напишем "Hello, World!" плагин для Sublime Text:

1. Выберите Инструменты | Разработчик | Новый плагин... в меню.
2. Сохранить в Пакеты/Пользователь/hello_world.py .

Вы только что написали свой первый плагин! Применим:

1. Создайте новый буфер ( Ctrl   N ).
2. Откройте консоль Python ( Ctrl   ` ).
3. Введите: view.run_command("example") и нажмите Enter.

Вы должны увидеть текст "Hello, World!" во вновь созданном буфере.

Анализ вашего первого плагина

Плагин, созданный в предыдущем разделе, должен выглядеть примерно так:

Оба модуля sublime и sublime_plugin предоставляются возвышенный текст; они не являются частью стандартной библиотеки Python.

Как мы упоминали ранее, плагины повторно используют или создают команд . Команды важный строительный блок в Sublime Text. Это просто классы Python которые можно вызывать аналогичным образом из разных средств Sublime Text, например API плагинов, файлы меню, макросы и т. д.

Команды Sublime Text происходят из *Класс команд определен в sublime_plugin (подробнее об этом позже).

Остальная часть кода в нашем примере связана с деталями TextCommand или с помощью API.

Мы обсудим эти темы в следующих разделах.

Прежде чем двигаться дальше, мы посмотрим, как мы вызвали новую команду: сначала мы открыли консоль Python, а затем вызвали view.run_command() . Это довольно неудобный способ вызова команд, но это часто полезно, когда вы находитесь на этапе разработки плагина. За теперь имейте в виду, что ваши команды могут быть доступны через привязки клавиш и другими способами, как и другие команды.

Условные обозначения для имен команд

Возможно, вы заметили, что наша команда называется ExampleCommand , но мы вместо этого передал строку example в вызов API. это необходимо потому что Sublime Text стандартизирует имена команд, удаляя команду суффикс, разбивая подслова из PhrasesLikeThis символами подчеркивания и переводя их в нижний регистр, например: фраз_like_this .

Новые команды должны иметь тот же шаблон именования.

Типы команд

Вы можете создать следующие типы команд:

• Windo выбрать подходящий вид команды.

  Общие черты команд

  Все команды должны реализовать метод .run() для работы. Кроме того, они могут получить произвольное количество параметров ключевого слова.

  Примечание. Параметры команд должны быть действительными значениями JSON из-за того, как ST сериализует их внутри.

  Оконные команды

  Оконные команды работают на уровне окна. Это не значит, что вы не можете управлять видами из оконных команд, а не тем, что вам не нужны виды в чтобы команды окна были доступны. Например, встроенная команда new_file определяется как WindowCommand , поэтому он работает даже при отсутствии просмотра открыт. Требование существования представления в этом случае не имело бы смысла.

  Экземпляры команды Window имеют атрибут .window , указывающий на окно экземпляр, который их создал.

  Метод .run() оконной команды не требует позиционного параметр.

  Оконные команды могут направлять текстовые команды в активное представление своего окна.

  Текстовые команды

  Текстовые команды работают на уровне представления, поэтому для их существования требуется представление чтобы быть доступным.

  Экземпляры текстовых команд имеют .view атрибут, указывающий на экземпляр представления что создало их.

  Для метода текстовых команд .run() требуется экземпляр edit как его первый позиционный аргумент.

  Текстовые команды и

  редактирование Объект

  Объект редактирования группирует изменения в представлении, так что отмена и макросы работают разумно.

  Примечание: В отличие от более старых версий, Sublime Text 3 не поддерживает программные управление объектами редактирования. API отвечает за управление их жизненным циклом. Создатели плагинов должны убедиться, что все операции по изменению происходят внутри .run метод новых текстовых команд. Для вызова существующих команд вы можете использовать view. run_command(, ) или аналогичные вызовы API.

  Реагирование на события

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

  Другой пример подключаемого модуля: подача списка завершений

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

  Примечание

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

  Изучение API

  Справочник по API задокументирован на https://www.sublimetext.com/docs/api_reference.html (открывается в новом окне).

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

  В частности, Packages/Default содержит множество примеров недокументированные команды и вызовы API. Обратите внимание, что сначала вам нужно будет извлечь его содержимое в папку, если вы хотите взглянуть на код внутри - PackageResourceViewer (открывается в новом окне) помогает в этом.

  10 лучших плагинов Sublime Text для разработчиков | от IssueHunt | IssueHunt

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

  Emmet — это плагин, который использует фрагменты кода для быстрого создания HTML и CSS.
  Повышает эффективность разработчика и рабочий процесс CSS и HTML.
  Emmet предоставляет пользователям возможность добавлять новые фрагменты и расширять возможности emmet.
  Этот плагин полностью написан на javascript.

  Этот подключаемый модуль предоставляет основу для анализа кода.
  Пусть вас не смущает слово «линтинг».
  «Линтинг» — это слово, используемое для программы, которая помечает подозрительные и непереносимые конструкции, которые, скорее всего, являются ошибками в программе.
  SublimeLinter и соответствующие плагины для линтера устанавливаются с помощью управления пакетами, о котором мы уже упоминали, — это еще один плагин, используемый для установки и обновления.

  Этот плагин используется для подсветки синтаксиса файлов SASS и SCSS.
  Слово SASS означает Syntactically Awesome StyleSheets.
  Этот подключаемый модуль очень полезен для улучшения написания кода на CSS.

  Babel — это подключаемый модуль, предоставляющий языковые определения для ES6+ JavaScript с расширениями синтаксиса React JSX.
  Этот плагин не поддерживает Sublime text 2 или более ранние версии, вместо этого он поддерживает только Sublime Text 3.
  Babel основан на Benvie/JavaScriptNext.tmLanguage .

  GhostText очень полезный и экономящий время плагин.

  С помощью GhostText вы можете связать Sublime Text с текстовыми областями в браузере, что означает, что всякий раз, когда вы вводите что-то в возвышенном текстовом редакторе, оно мгновенно обновляется в браузере.

  Это реально экономит время, так как вам не нужно заходить в браузер и обновлять его, чтобы отразить изменения в браузере кода, который вы только что набрали.

  Git — одно из самых популярных программ управления версиями. (ВКС).
  Этот подключаемый модуль позволяет выполнять команды Git из текстового редактора.
  С git вам не нужно будет сохранять текстовый файл, а затем переходить к терминалу для запуска команд.
  Это сэкономит вам много времени и повысит вашу эффективность в долгосрочной перспективе.

  Этот плагин полезен, когда вы хотите открыть терминал, который находится в каталоге, в котором находится ваш текущий файл.
  Также открывает терминал в папке проекта, содержащей текущий редактируемый файл.

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