Sublime Text 3

Команда разработки Sublime Text 3 позаботилась о том, чтобы писать плагины под ST было просто. Когда я писал плагин впервые, я даже не знал синтаксис Python. В общем, поехали!

Мы напишем плагин UnicodeCharacterInsert. который по нажатию горячей клавиши откроет всплывающее окно с таблицей Unicode символов. При выборе символа он будет вставлен в текущую позицию курсора. Таблица символов будет находится во внешнем HTML файле.

Я работаю в OS Ubuntu Linux, учитывайте, что на других OS некоторые моменты могут отличаться.

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

• Events & Idle Watcher. http://www.sublimetext.com/docs/plugin-examples
• API Reference. http://www.sublimetext.com/docs/3/api_reference.html
  
• Commands. http://www.sublimetext.com/docs/3/commands.html
  
• Commands. http://sublimetext.info/docs/en/core/commands.html
  
• EventListener. https://www.sublimetext.com/docs/3/api_reference.html#sublime_plugin.EventListener
  

Открываем редактор Sublime Text и создаем костяк нового плагина: Tools » New Plugin. Сохраняем сгенерированный файл в подкаталоге плагинов

/.config/sublime-text-3/Packages/UnicodeCharacterInsert с именем UnicodeCharacterInsert.py .

* Путь к плагинам в Windows: C:\Documents and Settings\username\Application Data\Sublime Text\Packages.

Переименуйте название класса команды на UnicodeCharacterInsertCommand :

• Окончание Command указывает на то, что это команда.
• Метод run вызывается по умолчанию при запуске плагина.
  
• Аргумент sublime_plugin.TextCommand указывает на тип плагина. Подробнее о типах плагинов Sublime Text .

Для запуска плагина, выполните в консоли Sublime Text следующий код:

Чтобы вызвать панель консоли нажмите: Ctrl +

Этот плагин просто вставит текст "Hello, World!" с начала текущего открытого документа.

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

Чтобы вставить текст после курсора вы можете использовать команду view.run_command("insert") :

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

В каталоге плагина создайте файл Default.sublime-keymap со следующим содержимым:

Теперь команда unicode_character_insert из вашего плагина будет вызываться при нажатии Ctrl + Shift + U + I. проверьте это.

Чтобы показать всплывающее окно с некоторым HTML контентом, в нашем случае это будет набор некоторых Unicode символов, используйте метод view.show_popup(content) :

Параметры метода show_popup :

Код класса UnicodeCharacterInsertCommand (блок import я буду опускать для экономии места):

Всплывающее окно c HTML разметкой

При нажатии на ссылку, в консоль будет выводится значение этой ссылки, текст link value .

Теперь вынесем HTML разметку всплывающего окна во внешний файл unicode-characters.html. который сохраним в каталоге нашего плагина.

Popup-окна в Sublime Text 3 поддерживает лишь небольшой набор HTML тегов, атрибутов и CSS правил. При этом заявленная поддержка правила text-decoration: none у меня не работает.

Получить контент из внешнего файла можно так:

При публикации плагина в репозитории packagecontrol.io мне подсказали, что внешние ресурсы необходимо подгружать методом sublime.load_resource. Этому методу нужно передавать путь к внешнему файлу относительно каталога

Реализуем методы get_characters_html для получения разметки всплывающего окна из файла unicode-characters.html и метод on_choice_symbol. который будет вставлять в документ выбранный Unicode символ и закрывать popup:

В результате у нас получилось вот такое popup-окно с таблицей Unicode символов:

Вид панели с Unicode символами

Создайте файл Default.sublime-commands в каталоге плагина:

Для добавление пунктов в контекстное меню создайте файл Context.sublime-menu в каталоге плагина:

Чтобы добавить пункты в основное меню создайте файл Main.sublime-menu :

Плагин Unicode Character Insert конфликтует с Colortip (https://github.com/jbrooksuk/Colortip). Просто имейте в виду..

#sublime text 3, #ST3, #st3 create plugin manual

january 2016 категория: Linux

Настраиваем под себя Sublime Text 3

В который раз думаю кому понадобилась эта куча посленовогодних выходных. На четвертый день холодов уже не знаешь чем ещё себя развлечь. Вот перенести бы их на майские праздники или на лето. не все же проводят эти дни в пьяном угаре под Кисель-ТВ.

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

Плагины привносят дополнительный функционал редактору и могут быть невероятно полезными. Устанавливать и работать с ними гораздо проще если воспользоваться специальным расширением Package Control .

Устанавливается он очень просто. Мне больше нравится делать через консоль Sublime Text console. Перейти в неё можно комбинаций клавиш Ctrl + ` либо через меню View > Show Console menu.

Для Sublime Text 3 скопируйте в командную строку консоли следующий код на Python:

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)

Код для Sublime Text 2:

import urllib2,os,hashlib; h = '2915d1851351e5ee549c20394736b442' + '8bc59f460fa1548d1514676163dafc88'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler()) ); by = urllib2.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); open( os.path.join( ipp, pf), 'wb' ).write(by) if dh == h else None; print('Error validating download (got %s instead of %s), please try manual install' % (dh, h) if dh != h else 'Please restart Sublime Text to finish installation')

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

Теперь для установки расширений достаточно вызвать Package Control комбинацией клавиш Ctrl + Shift + P в Windows или Cmd + Shift + P на Mac.

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

Последние пару недель периодически возникают проблемы с чтением пакетов при установке через Package Control. При попытке вызвать Install Package выдается ошибка: package control there are no packages available for installation. Связана она с невозможностью прочитать репозиторий, но автор обещал решить эту проблему.

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

Sublime Text позволяет сочетать различные темы и цветовые схемы. Именно так настроено у меня - в качестве цветовой схеме подсветки синтаксиса установлена Solarized (Dark) а остальное оформление вкладок и иконок взято из темы Spacegray.

Наверное самый известный проект Solarized доступен и для Sublime Text. Этот проект позиционируется как "аккуратные и точные цвета для машин и людей" и использует большое количество положений из теории цвета.

Очень популярная тема. Привлекает внимание невероятно минималистичным плоским интерфейсом и уникальными цветами. Цветовое решение подсветки синтаксиса не уступает схеме Solarized (лично мне для глаз приятнее всё-таки Solarized).

Еще одна тема для поклонников плоского дизайна.

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

• Комментатор 126 » Я играл в Dying Light, Skyrim, Saints Row Gat out of hell и другие игры. В один момент у меня на диске с играми осталось мало места и игры начали.
• dre@mer » Ну критическая температура там 105 градусов. тут ведь как от самой термопасты зависит, так и от того сколько её нанесли, чем тоньше и равномернее тем лучше. Фактически она должна заполнять.

• Тимоха » Доброго! Не силен в компьютерных технологиях, но руки и мозги есть. Имею роутер ZyXel Omni II к нему подключен инет. По шнуркам идёт подключение к двум приставкам IP TV. Остальное.
• dre@mer » Видимо имелся в виду всё-таки коммутатор, а не коммуникатор. Да, c DIR-300 должно работать, хотя слово "деление" тут тоже не уместно - Wi-Fi и ethernet (витая пара) это всего лишь.
• Тимоха » dre@mer! Спасибо за ответ. С терминами может и напутал, но смысл Вы поняли правильно. Подскажи ещё такой вопрос. Если к DIR 300 подходит витая пара от основного роутера Зикселя.
• dre@mer » Конечно можно использовать как коммутатор и не надо никакой второй сети Wi-Fi поднимать - зачем такой огород городить? Тогда это уже не повторитель, а просто вторая сеть.

• Аноним » У меня после запуска этой программы удалилось 3/4 содержимого компьютера и уже никак не восстановить. Я в шоке, плачу.

• artyut » СПАСИБО! Все работает.

• Вячеслав » не могу зайти в игры для знакомства и фильмы эротического характера

• Андрей » Добрый день ,нужна помощь, монитор samsung 193 P. при включении горит постоянно синий индикатор ,но нет изображения, блок питания внешний. разобрал блок питания кондеры целые. предохранитель не.

• Еленка » Ерунда какая-то ничего там не появляется при F11 - только то, что было пропадает. (((

• фанат APPLE » Дождались! Презентация уже сегодня. Тоже очень жду новые apple watch :)

• Сергей » Была та же проблема, ОС - Vista. Всё так сделал. Помогло! Спасибо автору.

• Аноним » Не чего не помогает

• Сергей » Помогло, спасибо.

© Админ в маленьком городе, 2016
Работает на MaxSite CMS | Время: 0.0508 | SQL: 15 | Память: 2.61MB

Установка и настройка Sublime Text 3

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

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

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

Идем на сайт Sublime Text в раздел Download, и скачиваем последнюю версию ST3, не забудьте соблюсти разрядность 64 бит, или обычную (x86) для вашей версии операционной системы. Скачали, устанавливаем. После установки запускаем — проверяем что он работает.

Открываем Preferences > Key Bindings — Default
И вверху файла добавляем строку:

Здесь указано что горячие клавиши будут alt+shift+f, и по нажатию будет происходить команда реиндент.

Возможные проблемы с настройками в Sublime Text

Если возникает проблема с сохранением или редактированием файла, то необходимо создать файл — который указан в ошибке. В моем случае это файл: C:UsersAdminAppDataRoamingSublime Text 3PackagesDefaultDefault (Windows).sublime-keymap Я создал его и сохранил по указанном пути. Теперь Preferences > Key Bindings — Default можно редактировать.

Есть аналогичная проблема с командой Preferences > Settings — Default, при открытии настроек их невозможно редактировать. Необходимо открыть, Нажать Ctrl+S, затем закрыть вкладку с настройками и открыть заново. После этого в C:UsersAdminAppDataRoamingSublime Text 3PackagesDefault должен появится файл с настройками — Preferences.sublime-settings — и настройки можно будет редактировать и сохранять.

Идем на сайт Package Control для ST3, и устанавливаем его. Package Control (PC) необходим для того чтобы расширять функциональность нашего редактора различными плагинами.

На сайте PC копируем код для ST3, в ST3 запускаем консоль (Ctrl +

) и вставляем код с сайта, жмем Enter и ждем успешной установки. После обязательно перезапускам ST3.

Проверим работу PC. Жмем Ctrl+Shift+P и набираем Package Control — Install Package. Уже набрав первые буквы — нужная строка будет автоматически подсвечена.

Sublime Text 3 — Package Control — установка плагинов

Далее я сменю стандартную тему оформления и подсветки кода на Material Design. Она тоже относится к темным темам, но имеет более яркую подсветку кода, и с ней более комфртно и приятно работать при длительном написании кода.

Идем на сайт темы Material Design и жмем кнопкe install. Происходит переход на сайт PC для ST3, понимаем что тема доступна как плагин. В ST3 запускаем Ctrl+Shift+P, выбираем install package, после ищем нужную нам тему, я набираю Material Theme и нахожу ее. Жму Enter и устанавливаю.

Sublime Text 3 — Package Control — установка темы Material Design

После этого иду в меню Preferences, и выбираю установленную тему.

Sublime Text 3 — Package Control — установка темы Material Design

Также после этого, рекомендуется зайти в настройки ST3, и дописать следующие конфиги:

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

Sublime Text 3 — тема Material Design

Я установил следующие основные плагины:

• Emmet (ускорение написания html и css)
• Hayaku (ускоение написание css)
• LESS (syntax highlighting — подсветка кода less)
• Prefixr (префиксы для CSS)
• Placeholders (Lorem Ipsum наполнители для html файлов)

• SFTP — плагин для работы с FTP
• SideBarEnhancement расширяет возможность сайт бара
• SyncedSideBar синхронизирует SideBar с открытыми файлами по клику на них
• AdvancedNewFile создаём новые файлы и папки при помощи горячих клавиш
• BracketHighlighter подсвечивает открытие/закрытие любого фрагмента в коде
• jQuery набор сниппетов для jquery
• AutoFileName автозаполнение путей к подключаемым файлам
• CSSсomb делает код красивым
• Gist сохранение отдельных участков кода на github прямо во время редактирования

Если вы еще не в курсе, 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, и в конец допишем строку:

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

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

Опять пробуем сохранить .less файл. Произошел билд less файла, и рядом с style.less файлом у меня появился готовый минифицированный style.css

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

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

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

Также не забудьте при открытом .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. Теперь подсветка будет работать.

https://scotch.io/bar-talk/the-complete-visual-guide-to-sublime-text-3-plugins-part-1
https://scotch.io/bar-talk/the-complete-visual-guide-to-sublime-text-3-plugins-part-2
http://mutian.github.io/Sublime-Jade-Build/
http://webdesign-master.ru/blog/tools/525.html

Поделиться в Facebook

Плагины sublime text 3

15 декабря, 2014, обновлено 10 августа, 2016

• Package Control — Package Control =);
• ApacheConf.tmLanguage — Apache Conf Syntax Highlighting - подсветка синтаксиса .htaccess;
• AutoFileName — выпадающие списки для быстрого выбора и ввода пути к файлу в img[src] link[href]…;
• FuzzyFilePath — выпадающие списки файлов с почти нечетким поиском;
• CSS Extended Completions — выпадающие списки существующих стилей (нужно дабавить в кэш CSS файлы или всю папку по ПКМ в «сайдбаре» и наслаждаться);
• CSS Format — упаковывает CSS или наоборот в удобочитаемый;
• Emmet — обязательный плагин не нуждается в комментариях;
• PyV8 — необходим для работы плагина Emmet, устанавливается самостоятельно при установке Emmet ;
• Emmet CSS snippets — пока и без этого неплохо снипится все;
• StringUtilities — HTML сущности в символы, наоборот и другие полезности;
• Bootstrap 3 Snippets — A sublime plugin complete with Bootstrap 3 snippets;
• Gist ;
• Git – плагин для работы с Git через ST;
• GitGutter — подсветка изменений в файле;
• Modific – тоже что и Git?Gutter;
• Goto-CSS-Declaration — переход к классу в css файл;
• Sublime-HTMLPrettify — оформление отступами, стоит вместе со следующим плагином, друг другу не мешают;
• CodeFormatter — понятно для чего, немного по вкусу настроить и все;
• SFTP — передача файлов через SSH, так что всё в порядке;
• SideBarEnhancements — расширение функционала левого меню;
• MoveTab — перемещение вкладок по горячей клавише;
• SublimeCodeIntel — смотреть настройки, лишнее убрать: например HTML - с ним легко справляются другие плагины;
• Tag — закрывать тэг по /, отступы (автоматическая расстановка отступов просто ужасная) использую из-за отличной работы с атрибутами тегов;
• View In Browser — открыть файл в браузере;
• sublime-yii-snippets (Yii Framework Snippets);
• SideBarGit — прекрасный плагин для работы с Git через ST (кому то может не понравиться что через мышь);
• rsub — править удаленные файлы через ssh;
• livestyle-sublime — рабочий плагин, но мне не очень нужен;
• BracketHighlighter — подсветка парных скобок и тегов, и без него подсвечивается вроде как;
• Sublime Terminal – открывает терминал, текущий путь терминала такой же как и у редактируемого в Sublime Text файле;
• DocBlockr – документирование /** Tab .

Настройки в файле C:\Users\maksim\AppData\Roaming\Sublime Text 3\Packages\User\Terminal.sublime-settings. для терминала MINGW32 поставляемого c «Домашней страницы проекта Git »:

Желаемого можно добиться по разному, ещё прокатывает вот так (без параметров):

А для терминала поставляемого вместе с Cygwin:

Плагин имеет недостаток, под виндой не определяет коренвую папку проекта и после печати слэша img src="http://www.zlatov.net/" в выпадающем списке представлены список имен жестких дисков C:/, D:/…

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

Вместо данного плагина рекомендуют использовать FuzzyFilePath, FuzzyFilePath неплох, но своеобразен, оставил пока оба плагина.

win + r → cmd → git --exec-path → добавляем путь к Переменные среды → Системные переменные → Path.

После этого добавляем плагин через PackageControl.

Парсил yii2 минуты три, хотя SSD…

Плагины для Sublime Text 3

Если вы задумали порадовать меня небольшим подарком (не может быть! ) — вот список моих мещанских мечт.

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

С тех пор мои интересы немного изменились, и экспериментам с воркфлоу я начал предпочитать написание кода. Воркфлоу, соответствующим образом скатился в сторону здорового функционализма. В последнее время активных изменений там практически не происходит — в основном, обновления касаются сниппетов и подсветки языков. Остальное, видимо, мне в самый раз приходится.

В Mac OS открыть любой файл или директорию из консоли в sublime можно так:

Для большего комфорта лучше использовать консольную утилиту, которая идет вкупе с Sublime Text. Устанавливается она так:

Кроме того, я сразу добавляю пару строк в .zshrc :

Практически во всех редакторах, с которыми я работаю, я использую тему Birds of Paradise. Sublime не стал исключением, благо он умеет импортировать темы из TextMate.

Для линтинга JavaScript я использую jshint. Для того, чтобы заставить его работать в sublime text 3. я использую комбинацию из двух плагинов:

Мой .jshintrc выглядит так (в основном я пишу под nodejs) :

Описание опций можно узнать здесь .

Кроме jshint-линтера можно присмотреться и к паре других: jscs и csslint .

CSScomb — утилита для сортировки CSS-правил в селекторах не по алфавиту, но по здравому смыслу, объединяя правила в логические группы. Последние полгода я пишу на stylus, поэтому черной завистью завидую тем, кто может пользоваться CSScomb и жду, жду, жду, жду…

Для интеграции с git мне хватает GitGutter — этот плагин отмечает еще незакомиченные изменения в файле соответствующими значками на полях.

Для всего остального я использую консоль и пайпы. К примеру, посмотреть diff всего коммита можно, набрав в терминале git diff | s. так что мне вполне хватает такой минималистичной интеграции.

Emmet — набор удобных сниппетов для html и css. Так, к примеру, лаконичное html:5>ul>li.item-$*5>span.title+span.author легким нажатием на tab превращается в…

Я часто пишу todo-комментарии в коде, вроде такого: /* TODO: переписать на промисы */. TodoReview умеет находить все подобные коментарии в проекте и выводить их в виде списка, чтобы можно было избавляться от технического долга систематически, а не просто в очередной раз случайно наткнувшисть на оставленное замечание.

SideBarEnhancements учит не особенно-то и сговорчивый сайдбар sublime text’а адекватному взаимодействию с файлами: копированию, вставке, удалению, и тд.

• WordCount — счетчик слов и символов в документе. Меленькая полезная штука для оценки размера переводов и статей.
• autoFilename — удобный автокомплит путей к файлам.
• sublime-node-require — удобная утилита для написания require() -конструкций в NodeJS. Предлагает список из всех установленных в проекте модулей, автоматически подставляя правильные пути к ним.
• Ну и куча всяких библиотек сниппетов и подсветок: stylus, mocha, jade, html5, less, handlebars, ect… Ссылки давать не буду, потому что они элементарно находятся поиском.

На этом, кажется, все. Подписывайтесь на РСС. Всем добра и штурмовиков .

Sublime Text 3 - удобный редактор кода для веб-разработчиков

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

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

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

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

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

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

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

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

Установка дополнений к редактору 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 очень полезное дополнение, которое позволяет значительно ускорить процесс разработки сайта, в частности процесс верстки страниц.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Доступ к закрытому разделу сайта