Sublime text 3 плагин package control

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

Класснуть

Плюсануть

Запинить

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

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

По-умолчанию 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.

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

Код пресета для пользовательских настроек (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 на клавиатуре.

Привет, много уже было написано про Sublime Text. В своем блоге я писал про Sublime Text 2. Сейчас Sublime Text 3 уже вышел из альфа версии (альфа — означает — новая и крайне не стабильная версия), и перешел в бету (бета — все еще не стабильная, но уже предназначена для тестирования, после беты обычно идет официальный релиз). И я решил полностью разобраться с Sublime Text 3 (далее в тексте ST3).

Если вы собираетесь установить SublimeText3 то эта самая полная инструкция для вас. Здесь я опишу все что связано с этим редактором, а умеет он действительно многое.

Сперва я удалил из системы ST2 и все его следы. Также удалил node.js и npm который был с ним в паре. Так как я намерен заново — правильно и грамотно настроить компиляцию less, а затем и saas файлов, через sublime. Но об этом позже.

Часть 1. Установка и настройка Sublime Text 3

Скачиваем и устанавливаем Sublime Text 3

Если вы еще не в курсе, Less — это основанный на JavaScript CSS препроцессор. Это код который компилируется в CSS. Существуют разные способы компиляции less в css: Grunt , Guard , и Less.app . Однако возможно вы не хотите, или вам не нужно использовать дополнительные инструменты, и хочется все сделать прямо в редакторе кода. Ниже я привел инструкцию которая подойдет пользователям Windows (я сам делал установку по ней, и также для mac ОС.)

1. Устанавливаем Node.js
2. Устанавливаем NPM (устанавливается вместе с Node.js)
3. Устанавливаем Less Глобально. Открываем Windows консоль и вводим npm install less -gd
4. Установим плагин Less2Css и SublimeOnSaveBuild

Откроем настройки ST3: Preferences → Settings — Default, и в конец допишем строку:

"lesscCommand": "/usr/local/share/npm/bin/lessc"

Откроем любой.less файл и попробуем его собрать. Просто вносим изменения в файл, и жмем Ctrl+S.

Если возникла ошибка: Unable to interpret argument clean-css … Это произошло потому что плагин clean-css был обособлен, и не входит в пакет less. Поэтому его надо установить отдельно. Установим. Заходим в консоль и пишем:

Npm install -g less-plugin-clean-css

SASS — это другой препроцессор для CSS. Набирает популярность, и уже обгоняет less по распространению использования.

• Устанавливаем Ruby
• Запускаем консоль, и ставим Ruby Gem gem install sass
• Устанавливаем плагин Sass для Sublime Text
• Устанавливаем плагин Sass Build для Sublime Text
• Устанавливаем плагин SublimeOnSave для Sublime Text
  (мы же говорили о этом плагине в инструкции выше)

Теперь добавим настройки в Sublime Text Settings – Default:

{ "filename_filter": ".(sass|scss)$", "build_on_save": 1 }

Также не забудьте при открытом.sass файле зайти и выбрать билд систему в Tools → Build System → SASS Compressed Теперь при сохранении.sass файла будет компилироваться.css.

Jade — это препроцессор для написания html кода, и подобно less или sass для css, он ускоряет и упрощает (для опытных верстальщиков) написание html разметки. Как установить и настроить его работу.

• Должен быть установлен node.js с npm (обычно идет в комлпекте с node)
• Заходим в консоль и устанавливаем jade командой npm install jade --global
• В Sublime Text устанавливаем плагин Jade Build
• В Sublime Text открываем.jade файл и выбираем Jade build system
• Если вы выполняете всю инструкцию в этом посте, то в настройках Sublime я дополню строку про Save On Build расширением jade и теперь она будет выглядеть вот так "filename_filter": ".(sass|scss|jade)$",
• Устанавливаем в Sublime плагин Jade

После этих манипуляций происходит компилирование jade файлов.

Если нет подсветки кода Jade, то идем в нижний правый угол ST, и там скорее всего написано Plain Text, кликаем по той надписи, и затем выбираем подсветку Jade. Теперь подсветка будет работать.

В своей работе я использовал много редакторов кода, как простых, начиная от консольного редактора nano в Linux, заканчивая тяжеловесной, но очень хорошей IDE - IntelliJ IDEA от компании JetBrains, но именно Sublime Text заставил обратить на себя внимание и теперь в разработке веб-проектов в основном использую его и вот почему

1. Скорость работы

Sublime Text 3 действительно работает очень быстро даже на старом железе

2. Кроссплатформенность

Редактор Sublime Text работает в операционных системах Linix, Windows, Mac OS

3. Большое количество плагинов для различных задач

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

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

Для того, чтобы установить Sublime Text 3, скачайте exe файл с официального сайта редактора.

Доступны версии для Linux, MacOS и Windows 32 и 64 битной версии. После скачивания, запустите exe файл Sublime Text 3 и следуйте инструкциям установки.

Настройка Sublime Text 3

Одна из особенностей Sublime Text 3 - это большое количество плагинов. Сегодня мы настроим несколько полезных плагинов для веб-разработчиков с помощью удобного менеджера пакетов: Package Control.

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

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

Для того, чтобы установить Package Control, пройдите по ссылке: https://packagecontrol.io/installation и скопируйте python код с сайта и в Sublime Text 3 нажмите сочетании клавиш ctrl+` или View > Show Console, затем вставьте скопированный код и нажмите Enter. Немного подождите и вам выдет окно-предупреждение, что нужно перезапустить редактор Sublime Text 3 для применения изменений.

Нажмите OK и закройте редактор, а затем опять откройте. Если вы все сделали правильно, тогда Package Control вы успешно установили.

Давайте попробуем установить красивую тему к Sublime Text через Package Control.

Установка новой темы из Package Control

Установка дополнений к редактору Sublime Text 3 через Package Control очень простая. Для того, чтобы открыть Package Control и установить новое дополнение для Sublime Text 3, нажмите Preferences - Package Control затем введите install (у вас должно сработать автодополнение), затем нажмите enter и введите название дополнения, в нашем случае это будет красивая тема под названием: spacegray .

После того, как вы установили новую тему, она станет доступна через меню: Preferences - Color Scheme - Theme Spacegray.

После этого у вас должна измениться цветовая схема. Но для того, чтобы применить полностью тему Spacegray, вам нужно зайти: Preferences - Settings User и вставить строки:

{
"theme": "Spacegray.sublime-theme",
"color_scheme": "Packages/Theme - Spacegray/base16-ocean.dark.tmTheme"
}

После этого перезапустите редактор Sublime Text 3, если тема применится некорректно.

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

Плагин Emmet очень полезное дополнение, которое позволяет значительно ускорить процесс разработки сайта, в частности процесс верстки страниц.

Устанавливается легким способом, через Package Contorl: Preferences - Package Control затем введите install (у вас должно сработать автодополнение), затем нажмите enter и введите Emmet, далее нажмите Enter.

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

Например, с помощью Emmet, мы создать шаблон div элемента с классом нажатием всего двух клавиш: точка(.) и tab:

Аналогично, для того чтобы создать шаблон элемента div, но не с классом, а id, введите # и tab и вы увидите:

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

Полезные плагины Sublime Text 3

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

Sublimall

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

DocBlockr

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

ColorPicker

Плагин ColorPicker выполняет функцию color picker(выбор цвета). Это очень удобно, когда вы хотите подобрать цвет или посмотреть цвет в css свойствах элемента

Sublime SFTP

Sublime SFTP позволят подключаться к SSH серверу прямо из Sublime Text. Если вы ранее использовали для подключения к сайту FTP клиент, например FileZilla, теперь вы можете подключиться напрямую.

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

Выводы о Sublime Text 3

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

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

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

В данной статье мы скачаем, установим на windows и русифицируем Sublime Text 3, также активируем его при помощи License Key и установим на него Emmet.

Скачать Sublime Text 3

Скачать Сублайн текст 3 вы можете с оф сайта sublimetext.com, либо с моего яндекс диска (рекомендую, так как именно его я устанавливал, русифицировал и активировал, да и там вы найдете ключи, и русификацию).

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

Установить Сублайн текст 3 очень просто, для этого его достаточно запустить и щелкать по кнопке далее, на этом останавливаться не буду, думаю ни у кого с этим проблем не возникнет.

Русификация Sublime Text 3

Распаковываете архив (SublimeText3RussianMenu.zip ) и копируем папку Default в «c:\Users\Имя_пользователя\AppData\Roaming\Sublime Text 3\Packages\ » (Путь для Windows 7/8/10)

Активация Sublime Text 3

Чтобы активировать Сублайн текст 3 откройте текстовый документ License Key , скопируйте из него один из ключей, далее запустите Сублайн и перейдите во вкладку «Справка » («Help «) - «Ввести лицензию » («Enter license «) вставляем ключ и жмем «Use License »

Установка Emmet на sublime text 3 и добавление в него Package Control.

Запускаем редактор и нажимаем Ctrl+ или «Вид » — «Показать/скрыть консоль » («View » — «Show console «), после чего снизу откроется панелька для ввода, вставьте в нее нижеприведенный код, нажмите «Enter «, немного подождите и перезапустите редактор.

import urllib.request,os,hashlib; h = "df21e130d211cfc94d9b0905775a7c0f" + "1e3d39e33b79698005270310898eea76"; pf = "Package Control.sublime-package"; ipp = sublime.installed_packages_path(); urllib.request.install_opener(urllib.request.build_opener(urllib.request.ProxyHandler())); by = urllib.request.urlopen("http://packagecontrol.io/" + pf.replace(" ", "%20")).read(); dh = hashlib.sha256(by).hexdigest(); print("Error validating download (got %s instead of %s), please try manual install" % (dh, h)) if dh != h else open(os.path.join(ipp, pf), "wb").write(by)

Теперь заходим во вкладку «Опции » — «» или нажимаем сочетание клавиш «Ctrl » + «Shift » + «P «, после чего всплывет окошко в котором выбираем «Install Package » (если не ошибаюсь 6 строка).

После чего всплывет еще окошко, в котором необходимо ввести «Emmet «, появится масса предложений, нажимаем на первое (где просто Emmet ).

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

В трех словах, о том, как работает Эммет

Приведу несколько примеров для Emmet . Допустим нам нужно базовый каркас веб-страницы на html5 , для этого достаточно ввести «!» и нажать «Tab».

Чтобы быстро построить к примеру блок с классом col-sm-6 , необходимо ввести «.col-sm-6 » и нажать «Tab», получим «

Для того чтобы построить вот такую конструкцию:

достаточно ввести вот такую небольшую строчку «.row>.col-md-3*4>lorem » и нажать «Tab «.

Как вы видите Emmet очень крутое дополнение, которое очень ускоряет процесс верстки, главное уметь правильно им пользоваться) Советую почитать документацию.

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

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

Установка через PPA

Есть пользовательский репозиторий (PPA), в котором всегда доступна самая свежая версия Sublime Text из стабильных. Чтобы подключить его, нужно ввести команду:

sudo add-apt-repository ppa:webupd8team/sublime-text-3

Утилита автоматически импортирует ключи, которые необходимы для сверки целостности пакетов.

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

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

sudo apt install sublime-text-installer

Теперь установленный Sublime Text можно запустить, скомандовав в терминале “subl”, но куда удобнее - через дашборд Gnome 3.

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

sudo apt purge sublime-text-installer

После этого лучше удалить и сам подключенный репозиторий PPA, чтобы избежать потенциальных проблем при установке и обновлении пакетов:

sudo add-apt-repository --remove ppa:webupd8team/sublime-text-3
sudo apt update

Установка через репозиторий производителя

Разработчики текстового редактора недавно создали собственный deb-репозиторий, который можно похожим образом подключить к системе. Этот вариант выглядит более предпочтительным - всё-таки лучше полагаться на самих разработчиков программы, чем на обычных пользователей с их PPA.

Сначала надо дополнительно установить пакет apt-transport-https:

sudo apt install apt-transport-https

Следующий шаг - импортирование ключей:

wget -qO - https://download.sublimetext.com/sublimehq-pub.gpg | sudo apt-key add -

Подключение стабильного репозитория:

echo "deb https://download.sublimetext.com/ apt/stable/" | sudo tee /etc/apt/sources.list.d/sublime-text.list

И стандартная процедура обновления кэша пакетов и установки приложения:

sudo apt update
sudo apt install sublime-text

Для удаления достаточно скомандовать:

sudo apt purge sublime-text

Но нужно также удалить из системы подключенный репозиторий разработчиков. Сделать это придётся вручную. Первый способ - открыть Центр приложений и зайти в его настройки.

В открывшемся окне перейти на вкладку “Другое ПО”, выбрать нужный (точнее, ненужный) репозиторий и нажать кнопку “Удалить”.

Второй способ - удалить созданный ранее файл:

sudo rm /etc/apt/sources.list.d/sublime-text.list

Заключительный шаг любого из этих двух способов - обновление кэша пакетов:

Установка через Snap

В последних версиях Ubuntu появилась “изкоробочная” поддержка системы Snap - замены привычных deb-репозиториев, избавленная от традиционного линуксового “ада зависимостей”. Через Snap можно легко установить Sublime Text 3 всего одной командой:

sudo snap install sublime-text-3 --classic --candidate

После чего в дашборде появится иконка последней стабильной сборки текстового редактора.

Удалить его так же легко, достаточно одной команды:

sudo snap remove sublime-text-3

Установка пакета вручную

Можно просто скачать deb-пакет Sublime Text 3 и установить его кликом - т.е. использовать тот же метод, что уже десятилетиями используется в Windows для установки приложений. Чтобы скачать deb-пакет, надо зайти на и кликнуть там по ссылке загрузки.

После этого надо найти скачанный deb-пакет в папке “Загрузки” домашнего каталога и кликнуть по нему мышью. Откроется утилита установки пакетов Центра приложений. Для установки надо нажать кнопку “Установить” и подождать.

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

sudo apt purge sublime-text

Использование без установки

Ну и напоследок: совсем необязательно устанавливать программу, чтобы пользоваться ею. Можно просто скачать тарболл Sublime Text 3, распаковать его в удобное место, и запускать прямо оттуда.

Для этого надо зайти на официального сайта проекта, и кликнуть по выделенной ссылке. Браузер скачает архив tar.bz2 в папку “Загрузки” домашнего каталога.

Этот архив надо распаковать в текущую папку.

Потом войти в появившуюся папку и перенести каталог “sublime_text_3” в любое удобное место - например, в папку apps в домашнем каталоге (такую папку нужно предварительно создать). Теперь, чтобы запустить текстовый редактор, достаточно кликнуть по исполняемому файлу “sublime_text”.

Преимущество этого способа - нет необходимости возиться с репозиториями и пакетным менеджером. Для удаления программы достаточно удалить папку “sublime_text_3”. Но есть и минусы:

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

Поэтому в Linux так устойчива традиция устанавливать приложения только через менеджер пакетов, и лучше от этой традиции не отступать без крайней на то необходимости.

Ещё на сайте:

Как установить Sublime Text 3 в Ubuntu обновлено: Март 29, 2018 автором: alex ferman