Мегафон

Установка тем sublime text 3

Всем привет!

В этой статье мы рассмотрим, как нам установить редактор 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 будет установлен, о чём вы получите соответствующее уведомление.


Если вы пользователь 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 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)

  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