Главная › Телефон › Установка плагины для sublime text 3

Установка плагины для sublime text 3

Привет, много уже было написано про 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 ОС.)

Устанавливаем Node.js
Устанавливаем NPM (устанавливается вместе с Node.js)
Устанавливаем Less Глобально. Открываем Windows консоль и вводим npm install less -gd
Установим плагин 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. Теперь подсветка будет работать.

Автору довелось пользоваться многими текстовыми редакторами и IDE, среди которых были nano, vim, gedit, geany, kate, eclipse… Любой из них имеет как свои преимущества, так и свои недостатки. Речь сегодня пойдёт не о них: о том редакторе, который с первого же дня может завоевать ваше сердце, о Sublime Text.

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

Сразу надо бы оговориться: sublime text 3 не бесплатный продукт. На момент написания поста его стоимость составляла $70. Как мне доводилось слышать, обязательна лишь оплата для пользователей Mac, на Linux и Windows вы можете не оплачивать лицензию и спокойно работать, время от времени наблюдая всплывающее окно с предложением о покупке. Собственно говоря, это практически не мешает.

Где найти и как установить

Как правило в случае с дистрибутивами Linux последняя версия текстового редактора имеется в репозитории. Хотя может возникнуть необходимость подключить помимо основного какой-либо дополнительный репозиторий. Для примера в Gentoo Linux следует подключить оверлей sublime-text и установить редактор:

# layman --add sublime-text # eix-update # emerge -av sublime-text

Для Debain с архитектурой amd64 последовательность команд такова (устанавливаем готовый пакет):

$ wget http://c758482.r82.cf2.rackcdn.com/sublime-text_build-3047_amd64.deb $ sudo dpkg -i sublime-text_build-3047_amd64.deb

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

Пользовательские настройки

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

Preferences --> Settings-User

Допишите по вкусу:

{ "auto_indent" : true , #автоотступ "auto_match_enabled" : true , #автоматически добавлять закрывающую скобку, парную кавычку "bold_folder_labels" : true , #каталоги выделить жирным "open_files_in_new_window" : false , # открывать новые файлы во вкладке # цветовая схема "color_scheme" : "Packages/Color Scheme - Default/Solarized (Light).tmTheme" , "ensure_newline_at_eof_on_save" : true , "font_size" : 11 , #размер шрифта "highlight_line" : true , #выделять строку, на которой находится курсор "ignored_packages" : [ "Vintage" ], "tab_size" : 4 , #настройка отступа "translate_tabs_to_spaces" : true , #перевод табов в пробелы "trim_trailing_white_space_on_save" : true #удалять пробелы и табуляции в конце строк }

Полный перечень команд можно отыскать через пункты меню Preferences -> Settings -> Default и Preferences -> Key Bindings -> Default . Надо только отметить, что у json нет комментариев, поэтому не нужно слепо копировать приведённые выше настройки.

Любопытно и то, что приверженцам vim, к коим себя относит и автор сего поста, можно включить привычные в работе сочетания клавиш, если стандартные по какой-то причине не совсем устраивают. Делается это достаточно просто. Следует исключить из игнорируемых режим Vintage Mode:

"ignored_packages":

Здесь же можно включить автозакрытие скобок:

{ "keys" : [ "(" ], "command" : "insert_snippet" , "args" : { "contents" : "($0)" }, "context" : [ { "key" : "setting.auto_match_enabled" , "operator" : "equal" , "operand" : true }, { "key" : "selection_empty" , "operator" : "equal" , "operand" : true , "match_all" : true }, { "key" : "following_text" , "operator" : "regex_contains" , "operand" : "^(?:\t| |\\)|]|;|\\}|\\\"|$)" , "match_all" : true } ] }

Быстрое выделение текста без использования мыши осуществляем стрелками с зажатой клавишей Shift , что представляется весьма удобным.

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

Откройте в редакторе css -файл, затем Preferences -> Settings - More -> Syntax Specific - User и пропишите:

{ "tab_size" : 4 }

Теперь в коде css отступы будут выровнены по 4 пробела.

Сниппеты

Как любой уважающий себя текстовый редактор, sublime умеет работать с пользовательскими сниппетами. Пример создания нового сниппета через Tools -> New Snippet:

jq source.js

Сохраните сниппет где-нибудь внутри.config/sublime-text-3/Packages/User . Это всё. Теперь в js-файлах появится возможность вставки текста, описанного нами в поле

Плагины

Разумеется, sublime не был бы так привлекателен, если бы не его коллекция плагинов. Для установки и удаления плагинов используется Package Control . Увы, его нет в стандартной поставке. На момент написания поста установка самого Package Control выглядит следующим образом:

Перейдём в директорию, где хранится конфигурация Sublime-Text, клонируем нужный репозиторий:

$ cd .config/sublime-text-3/Packages/ $ git clone https://github.com/wbond/sublime_package_control.git "Package Control" $ cd "Package Control" $ git checkout python3

Откройте редактор и нажмите сочетание клавиш Ctrl+Alt+P , в появившемся меню следует найти "Package Control: Install Package" . Это всё. Отныне вы вольны выбирать и устанавливать нужные вам плагины.

SublimeCodeIntel

Приближает возможности Sublime Text к возможностям IDE. Ставить в первую очередь.

Status Bar Extension

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

Placeholders

Для случаев вставки «рыбы» в код. Помните lorem ipsum?

Зачем слова? Кто однажды попробовал emmet, тот уже не в силах от него отказаться. И как без этого раньше жили верстальщики?

SublemacsPro

Для тех, кто привык к старому доброму Emacs.

Интегрирует систему контроля версий Git и Sublime Text, он реализует в редакторе большинство повседневно используемых команд, таких как diff , status , pull .

И, пожалуй, самое интересное: проверка русской орфографии .

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