Всем привет!

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

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

1. Итак, для начала скачиваем самую последнюю версию Sublime Text 3, c официального сайта .

2. Что касается установки для Windows, то я думаю проблем у вас быть не должно, в принципе как и в других ОС. Я пользуюсь Linux UbuntuStudio и покажу как быстро, на уровне пользователя установить редактор.

Если у вас ОС 64 битная, то скачиваем пакет DEB соответствующей версии для установки через центр приложений Ubuntu.

Кликаем по скачанному файлу и устанавливает DEB пакет(он должен автоматически открытся в установщике «Центр прилржений»).

Всё готово!

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

1. Возможно понадобится расширение PackageControl . Для его установки откройте конcосль [ Ctrl + ` ] и введите вот этот код (если у вас Sublime Text 3):

Import urllib.request,os,hashlib; h = "2915d1851351e5ee549c20394736b442" + "8bc59f460fa1548d1514676163dafc88"; 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)

В современных версиях дистрибутива, расширение PackageControl уже установлено. Его только нужно включить. Для этого перейдите во вкладку Tools->Install Package Control. Кликаем. Расширение включено. Оно теперь должно появиться во вкладке Preferences.

2. Далее приступаем к установке самого плагина Emment. В редакторе выбираем пункт меню Preferences->Package Contro l или по сочетанию клавиш [ Ctrl + Shift + P ] напишем в появившемся поле install .

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

Кроссплатформенный текстовый редактор.

Краткий гайд для начинающих работать в 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.
   А так же для единообразия работы в команде.

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

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

1. Полноэкранный режим F11 + скрытие панели menu (alt). Позволяет максимально использовать монитор для работы и не отвлекаться на статус панели OS.
2. Запрет переноса строки. Наверное лучшее свойство из перечисленных. Не даёт путаться в pug синтаксисе. Показывает всегда ожидаемый код и вложенность независимо от размера экрана. Горизонтальная прокрутка осуществляется shift + колёсико, (либо тачПанель)
   «word_wrap»: «false»
3. Themes. Ничего не могу сказать по этому поводу. Просто найдите то, что нравится (желательно использовать тёмную схему). Я использую „theme“: „Material-Theme-Darker.sublime-theme“.
4. Подсветка синтаксиса. Ну я думаю тут не должно быть проблем. Если следить, что бы расширение и подсветка совпадали (Pug for Pug, а не Jade for Pug)
5. View → Side Bar → Hide Open Files - Освобождает пространство для дерева проекта. Т.к это поле так и так дублируется вкладками и тремя точками сверху

3. Полезные клавиши "hotkey" :

1. В первом пункте скажем, что пропустим все стандартные сочетания, такие как ctrl(⌘) + Z (⌘ - далее просто ctrl). Отменить, сохранить, повторить, закрыть вкладку, восстановить вкладку, и тд…
2. Пожалуй следующее самое популярное сочетание это:
   crtl + P - Позволяет выполнить поиск по файлам открытого вами проекта. Позволяет избавится от огромного дерева открытых стилей.
3. Следующее по важности:
   ctrl + D - Поиск копий выделенного текста. Идеально подходит для мульти-редактирования. И для поиска дублей. Особенно в больший файлах и больших фрагментов. Для мульти-курсора зажмите ctrl и используйте мышь.
4. ctrl + L - Выделяет всю строку и позволяет удалить её полностью. Хорошо работает совместно с ctrl+D.
5. Поиск… Ну наверное первое это ctrl+F - поиск по файлу. Второе и более важное это поиск в папке по множеству файлов ctrl + shift + F (Можно вызвать кликнув по папке правой кнопкой и выбрать "Find in folder…") Советую не включать в поиск папку «Известного толстячка»
6. ctrl + shift + up/down - Перемещает строку наверх/вниз (меняет их местами). Удобно для работы со стилями и переменными.
7. Теперь небольшой туториал по комбинациям комбинаций клавиш . Вы наверное видели эти комбинации через запятую. Вот и я видел… а теперь я знаю как их использовать. Для этого по очереди нажимаем эти комбинации (можно не отпускать общую мод клавишу)
   Вот полезные из них:
8. ctrl + K, ctrl + 4 - Скрывает все ветки, вложенность которых больше 4. Аналог стрелочки свернуть. (ctrl + K, ctrl + J - разворачивает всё что есть)
9. ctrl + K, ctrl + B - Скрывает/показывает SideBar. (хорошо работает с F12)

Текстовый редактор 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

У начинающих верстальщиков и программистов часто возникают вопросы по поводу текстового редактора Sublime Text 3. Они касаются настройки и установки плагинов. В данной статье мы постарались дать максимум информации по этому поводу.

Как скачать

Просто выберите свою операционную систему и нажмите на нужную ссылку.

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

Запустите полученный файл. При его установке обязательно поставьте галочку Add to explorer context menu. Это нужно для того, чтобы у нас была возможность открывать файлы на нашем компьютере из контекстного меню, которое появляется после нажатия правой кнопкой мыши по нужному документу.

Плагины

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

Package Control

Выделяем код на вкладке SUBLIME TEXT 3, копируем его, переходим в наш редактор, View — Show Console. Вставляем все это в нижнюю длинную строчку и нажимаем Enter. Дожидаемся когда операция по установке завершиться и перезагружаем Sublime Text, т.е. выключаем и заново запускаем.

Теперь для вызова консоли Package Control нам достаточно нажать Ctrl + Shift + P.

Появляется строчка поиска, набираем в ней install, выбираем Install Package.

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

Emmet

Набираем в этой строке Emmet, жмем Enter. Запускается установка. Ждем.

Теперь давайте проверим как все установилось, создайте файл index.html, откройте его правой кнопкой мыши — Open with Sublime Text, введите! и нажмите клавишу Tab. У Вас должна распаковаться первоначальная структура html документа.

Настройка горячих клавиш

Для того чтобы настроить автоматическое выравнивание верстки, DOM дерева, переходим в Preferences — Key Bindings-User. В открывшемся файле между квадратными скобками вставляем наш код:

{ "keys": ["alt+shift+v"], "command": "reindent" }

Сочетание клавиш можете придумать свое. Главное, чтобы оно не совпадала с уже имеющимися в системе горячими клавишами. Проверить можно в файле Preferences — Key Bindings-Default.

Все готово, берем любую кривую html верстку, выделяем ее и жмем alt+shift+v.

Прочие настройки редактора

Стандартные Preferences — Settings-Default. Чтобы их переопределить, делаем свои пользовательские Preferences — Settings-User. Не буду объяснять все, переведите комментарии в Google переводчике и посмотрите какие параметры вам нужно изменять, а какие оставить.

Я бы сделал

"fold_buttons": false,

это отключает кнопки треугольники для сворачивания блоков кода.

"auto_complete": false,

для тех кто использует Emmet и не нуждается в функции Автокомплит.