Всем привет!
В этой статье мы рассмотрим, как нам установить редактор 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 .
Привет, друзья! По многочисленным просьбам обновил руководство по быстрой настройке редактора кода 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 будет установлен, о чём вы получите соответствующее уведомление.
![](https://i1.wp.com/webdesign-master.ru/img/blog/tools/sublime-text-3-setup/2.jpg)
Если вы пользователь MacOS, необходимо нажать на клавиатуре Cmd+Shift+P.
Package Control необходим для того, чтобы вы могли устанавливать дополнения и плагины в Sublime Text 3 из репозитория пакетов.
Установка плагинов в Sublime Text
Далее необходимо установить нужные для работы плагины. Мы рассмотрим установку самых популярных среди верстальщиков плагины, которые значительно упрощают разработку. Вы также можете поэкспериментировать с другими плагинами в Package Control, может быть вам понравятся и другие из огромного количества доступных пакетов.
Для установки плагинов в Sublime Text через Package Control необходимо вызвать меню, как мы это делали ранее: Ctrl+Shift+P. Затем вводим команду "Install Package" и выбираем нужный пакет из списка.
![](https://i0.wp.com/webdesign-master.ru/img/blog/tools/sublime-text-3-setup/3.jpg)
Самые популярные плагины для 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 или можете настроить редактор под себя. В настройках есть два поля - левое с дефолтными настройками и правое с пользовательскими. В дефолтных настройках вы можете увидеть подсказки к каждому свойству и применить его в правой части скопировав и установив своё значение.
![](https://i2.wp.com/webdesign-master.ru/img/blog/tools/sublime-text-3-setup/5.jpg)
Узнать какое свойство за что отвечает довольно просто - все свойства имеют интуитивно понятные наименования на английском языке. Любое свойство из большого обилия доступных настроек можно просто перевести на русский язык и понять, что оно означает.
Для того, чтобы сделать бэкап всех ваших настроек и быстро развернуть Sublime Text на другом рабочем месте, достаточно скопировать папку
"C:\Users\{Ваш пользователь}\AppData\Roaming\Sublime Text 3"
в потаённое резервное место на вашем диске или на флешку, а затем разместить у другого юзера или на другом компьютере в этой-же директории под пользователем.
Также дополнительно на ваше усмотрение можно отключить миникарту справа и скрыть меню. Это можно сделать перейдя в меню View > Hide Minimap и View > Hide Menu. Показать меню можно нажатием клавишы Ctrl на клавиатуре.
У начинающих верстальщиков и программистов часто возникают вопросы по поводу текстового редактора 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 и не нуждается в функции Автокомплит.
Кроссплатформенный текстовый редактор.
Краткий гайд для начинающих работать в sublime и в сфере вёрстки. Тут собрано всё самое необходимое и важное. (По ссылкам найдёте больше, если это нужно)
Будем рассматривать его для Вёрстки на Pug / Less, где нам не нужен огромный функционал отладки. Поэтому именно этот редактор (по моему мнению) побеждает своих конкурентов как в скорости работы так и в функционале.
1. Установка программы и контроль за дополнениями (Package Control)
- Устанавливаем Sublime Text 3. Тут всё просто - качаем и запускаем.
Тут мы можем Скачивать, устанавливать, удалять, просматривать дополнения и т.д.
2. Настройки программы:
- Используем пробелы, вместо табов.
«translate_tabs_to_spaces»: true - Размер таба равен 4 пробела.
«tab_size»: 4Вы спросите зачем?
Что бы случайно не нажать пробел и таб вместе, и не сломать сборку pug.
А так же для единообразия работы в команде. - Строки не должны
заканчиваться пустыми символами .
Для этого используем плагин TrailingSpaces .
- Пожалуй на этом обязательные MustHave настройки заканчиваются. Перейдём к индивидуальным:
- Полноэкранный режим F11 + скрытие панели menu (alt). Позволяет максимально использовать монитор для работы и не отвлекаться на статус панели OS.
- Запрет переноса строки.
Наверное лучшее свойство из перечисленных. Не даёт путаться в pug синтаксисе. Показывает всегда ожидаемый код и вложенность независимо от размера экрана. Горизонтальная прокрутка осуществляется shift + колёсико, (либо тачПанель)
«word_wrap»: «false» - Themes. Ничего не могу сказать по этому поводу. Просто найдите то, что нравится (желательно использовать тёмную схему). Я использую „theme“: „Material-Theme-Darker.sublime-theme“.
- Подсветка синтаксиса. Ну я думаю тут не должно быть проблем. Если следить, что бы расширение и подсветка совпадали (Pug for Pug, а не Jade for Pug)
- View → Side Bar → Hide Open Files - Освобождает пространство для дерева проекта. Т.к это поле так и так дублируется вкладками и тремя точками сверху
3. Полезные клавиши "hotkey" :
- В первом пункте скажем, что пропустим все стандартные сочетания, такие как ctrl(⌘) + Z (⌘ - далее просто ctrl). Отменить, сохранить, повторить, закрыть вкладку, восстановить вкладку, и тд…
- Пожалуй следующее самое популярное сочетание это:
crtl + P - Позволяет выполнить поиск по файлам открытого вами проекта. Позволяет избавится от огромного дерева открытых стилей. - Следующее по важности:
ctrl + D - Поиск копий выделенного текста. Идеально подходит для мульти-редактирования. И для поиска дублей. Особенно в больший файлах и больших фрагментов. Для мульти-курсора зажмите ctrl и используйте мышь. - ctrl + L - Выделяет всю строку и позволяет удалить её полностью. Хорошо работает совместно с ctrl+D.
- Поиск… Ну наверное первое это ctrl+F - поиск по файлу. Второе и более важное это поиск в папке по множеству файлов ctrl + shift + F (Можно вызвать кликнув по папке правой кнопкой и выбрать "Find in folder…") Советую не включать в поиск папку «Известного толстячка»
- ctrl + shift + up/down - Перемещает строку наверх/вниз (меняет их местами). Удобно для работы со стилями и переменными.
- Теперь небольшой туториал по комбинациям комбинаций клавиш
. Вы наверное видели эти комбинации через запятую. Вот и я видел… а теперь я знаю как их использовать. Для этого по очереди нажимаем эти комбинации (можно не отпускать общую мод клавишу)
Вот полезные из них: - ctrl + K, ctrl + 4 - Скрывает все ветки, вложенность которых больше 4. Аналог стрелочки свернуть. (ctrl + K, ctrl + J - разворачивает всё что есть)
- 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