Sublime text 2 что это
Заметка: активирована адаптивная версия сайта, которая автоматически подстраивается под небольшой размер Вашего браузера и скрывает некоторые детали сайта для удобства чтения. Приятного просмотра!
Sublime Text 2 – это вторая версия кроссплатформенного редактора исходных кодов Sublime Text. Кроссплатформенность означает, что неважно какая у вас операционная система: Windows, Linux или что-либо ещё, он будет работать везде. Программа является бесплатной, однако примерно раз в один час, при сохранении файла будет вылезать окошко с просьбой купить данный продукт. Ах да, ещё в названии окна с Сублаймом будет написано UNREGISTERED, на этом разница «бесплатной» и «платной» версий заканчиваются.
Ещё пару слов о «бесплатности» программы. Вообще на сайте написано, что скачать программу и проверить её работоспособность мы можем и бесплатно, но потом должны заплатить за её лицензию. Однако там также написано, что срок, в течение которого мы должны это сделать, НЕ ограничен. Так что можно ни о чём не волноваться и пользоваться на здоровье.
Эта статья будет слегка нетрадиционной, потому что я хочу начать с моментов, которые меня совсем не радуют в этом редакторе, а уже после мы поговорим о достоинствах.
Sublime Text 2: установка плагина SFTP
Теперь мы наконец-то сможем установить такой важный плагин, как SFTP, который поможет нам редактировать файлы, лежащие прямо на FTP хостинг провайдера (а не на локальном компьютере). Кстати говоря, здесь тоже не всё так просто как хотелось бы, нам всё же придётся скачать наш сайт с ФТП и разместить его у себя на компьютере, но с помощью этого плагина при редактировании файлов у себя на компьютере они автоматически будут загружаться по FTP на сервер вашего сайта. Так что в принципе суть та же, разве что у вас всегда будет копия вашего сайта на компьютере. В PHPDesigner, между прочим, таких танцев с бубном нет, там работа с FTP сразу встроена и скачивать сайт себе на компьютер не нужно.
Тем не менее, устанавливать плагины в Сублайме очень удобно, делается это всё с помощью уже настроенного нами Package Control. Заходим во вкладку Preferences и в самом низу выпадающего списка выбираем Package Control.
Далее в появившемся окне жмём на Install Package:
После чего пишем название нужного нам плагина, в нашем случае это SFTP. Выбираем из списка SFTP плагинов тот, который называется просто SFTP и устанавливаем его. Далее нам потребуется создать отдельную папку для каждого сайта, который вы хотите редактировать с помощью Sublime Text 2 и его плагина SFTP. Название папки может быть каким угодно, скачиваем в эту папку желательно весь наш сайт (в принципе, можно скачивать только те файлы и папки в которых они находятся, которые вы собираетесь редактировать), затем перетягиваем эту папку прямо в Сублайм, у нас должна появиться левая колонка, которая специально предназначена для наших проектов. Далее жмём правой кнопкой мыши по папке - SFTP/FTP - Map to remote…
У нас открылся файл конфигурации, в котором нужно заполнить настройки подключения к нашему ФТП, а также выставьте в строке "upload_on_save": true, чтобы при сохранении изменений на вашем компьютере файл автоматически изменялся и на ФТП. Ещё нужно изменить значение с sftp на обычное ftp. И не забудьте раскомментировать и заполнить 18 и 19 строки:
remote_path – адрес папки, к которой вы хотите присоединиться, можете оставить просто слеш (/), чтобы иметь доступ ко всем файлам и папкам вашего сайта. Эту настройку удобно использовать, если вы, к примеру, скачивали не весь сайт, а только ту папку, с которой собираетесь работать.
Вроде бы по установке плагина всё рассказал, точно также устанавливается любой другой плагин. Да, ещё один момент, я говорил, что вам придётся скачивать файлы себе на компьютер и в этом даже есть свои плюсы. Лично я насчитал их 2: у вас всегда есть актуальная резервная копия вашего сайта на компьютере; в отличие от работы напрямую с ФТП, не приходится ждать «подгрузки» каждой папки, ведь папки то у нас на компьютере. Между прочим, мне действительно очень нравится данный плюс, несмотря на неудобства скачивания сайтов себе на компьютер.
Live reload и поддержка CSS-препроцессоров
Здесь всё довольно неоднозначно. С одной стороны, есть поддержка live reload и watch/build system с помощью плагинов (первое у меня так и не заработало), а есть несколько отдельных программ, которые, помимо live reload, умеют следить и компилировать файлы всевозможных препроцессоров. При этом функционал у них (в плане возможностей, предоставляемых GUI), совсем разный, а еще разная стоимость. Кто-то умеет всё вплоть до оптимизации изображений, а кто-то не умеет и половины, зато бесплатно. В целом же всё сводится к тому, чтобы подобрать для себя оптимальный вариант, в чем я и постараюсь вам помочь ниже.
Преимущества Sublime Text 2 vs. PHPDesigner 8
Несмотря на то, что я до сих пор считаю PHPDesigner 8 лучше, Sublime Text 2 имеет множество преимуществ. Среди них приятный общий дизайн, плавные анимации, в том числе при работе с файлами и папками ftp, более быстрая загрузка. Также в Sublime Text есть много интересных фишек при работе с кодом, которые отсутствуют в PHPDesigner, некоторые из них встретятся в списке ниже.
Копирование строк. Для копирования строки целиком в Sublime Text 2 вам достаточно кликнуть левой кнопкой мыши по строке и нажать Ctrl + C. Вам не нужно обводить всю строку, чтобы скопировать её целиком, просто одинарный клик.
Вертикальное выделение текста. Чтобы выделить текст по вертикали достаточно зажать Shift и правой кнопкой мыши (пкм) выделить необходимый фрагмент.
Вы можете печатать в нескольких местах одновременно! Допустим, вначале вы верстали макет своего сайта без закрывающегося тега
, а потом решили, что так делать всё-таки не хорошо, и теперь вам нужно в десяти разных местах дописать закрывающийся тег параграфа. Но вам не нужно делать это 10 раз, вы можете написать этот тег в 10 разных местах одновременно! Для этого нужно кликнуть левой кнопкой мыши в необходимых местах при этом зажав Ctrl, после чего можете приступать к редактированию и наблюдать, как вы печатаете сразу в 10 местах!
Мультивыбор для быстрого редактирования переменных. Вы можете быстро найти все упоминания переменной на странице, чтобы переименовать её или стереть. Для этого кликните по нужной переменной (или выделите нужный участок текста) и используйте Ctrl + D для выбора следующего вхождения этой переменной. Другими словами, если переменная встречается 3 раза на странице, вы должны сделать клик левой кнопкой мыши (лкм) по ней, а затем трижды нажать Ctrl + D.
Интеллектуальная расстановка кавычек и скобочек. Если вы написали слово или фразу, а только потом вспомнили, что его (её) нужно заключить в кавычки или скобочки, вы можете просто выделить этот участок и единожды нажать клавишу нужной скобочки или кавычки. Они сами появятся в начале и в конце выделенного фрагмента.
Аналогично можно применять и комментирование. Для того чтобы быстро закомментировать нужную часть кода: выделите её курсором и нажмите Ctrl + Shift + / Точно также вы можете и снимать комментарии!
Также в Сублайме, как и полагается всем достойным редакторам, присутствует автозамена по регулярным выражениям, которая вызывается с помощью комбинации клавиш Ctrl + H
Поиск по функциям. Просто нажмите Ctrl + R и вы увидите список всех встречающихся функций на странице, из которого можете моментально перейти к нужной.
Я перечислил далеко не все возможности Sublime Text 2 , а лишь те, которыми успел попользоваться сам. Ещё среди достоинств Сублайма нужно отметить быстрый и удобный поиск по файлам и папкам, возможность нечёткого поиска, большое количество бесплатных плагинов и ещё довольно много полезных вещей.
Заключение
Если вы обладатель системы Mac или Linux, то однозначно используйте именно этот редактор. Если же вы обладатель Windows, то у вас есть выбор: использовать Sublime Text 2 или Notepad++. Второй редактор тоже очень хорош, но он значительно уступает Sublime Text, так что я советую и пользователям этой системы использовать именно его.
Надеюсь, что эта статья была вам полезна и вы сделаете правильный выбор.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Она выглядит вот так:
Дополнительные плагины
Clipboard History
Возможно, этот функционал лучше иметь во всей ОС, но мне хватает его в редакторе. Плагин запоминает историю буфера обмена, благодаря чему вы можете вставить не только последний скопированный фрагмент, но и любой из предыдущих.
EncodingHelper
Помимо прочего, отобржает кодировку открытого файла в строке статуса. В общем-то это единственная причина, по которой я установил этот плагин, но у него есть и другие возможности, например, он умеет предупреждать о том, что файл, открытый в неправильной кодировке, может быть поврежден.
Placeholders
Часто ли вам приходится вставлять в код рыбы? Всем любителям lorem ipsum этот набор сниппетов однозначно пригодится. Кроме простого текста, умеет вставлять параграфы, списки, картинки и т. д.
Theme — Soda
Это моя субъективная рекомендация обладателям Mac OS X. Тема Soda оформляет интерфейс Sublime Text 2 в нативном стиле. Есть две цветовые вариации — Light и Dark, а также поддержка Retina-дисплеев. Впрочем, тема доступна для трех ОС.
Плагины
Здесь описываются плагины, которые пригодятся вам, если вы не хотите использовать какие-то сторонние программы, а предпочитаете обойтись одним Sublime Text 2.
Автоматическая компиляция
Начать лучше не с непосредственного добавления тех или иных build systems в редактор, а с плагина SublimeOnSaveBuild. Всё, что он делает, заключается в автоматическом запуске Build (в меню это Tools > Build) для выбранной вами Build System в момент сохранения файла.
Что же касается добавления Build Systems, здесь всё аналогично поддержки синтаксиса, выбирайте нужное: LESS-build, SASS Build (и, конечно, Compass).
Live reload
С этим в плане плагинов к Sublime Text 2 не так радужно, точнее есть только один LiveReload (не путать с программой ниже), который у меня благополучно не работает. Точнее не работает расширение для Chrome (расширение для Safari не тестировал, а поддержки других браузеров нет), ну и в целом он уже давно не обновлялся. Возможно, кто-нибудь знает, как его готовить и подскажет в комментариях, но лично мне было лень разбираться подробнее, поэтому я пришел к использованию отдельной программы для «живого просмотра» и компиляции.
Установка Sublime Text 2
Для установки Sublime Text 2 на ваш компьютер перейдите на официальный сайт кликнув здесь и нажмите кнопочку Download for [ваша платформа].
Плагины
Отдельные программы
Как такового отношения к Sublime Text 2 эти программы не имеют, но так как с помощью плагинов реализовывается не всё, многие предпочтут использовать отдельное ПО для некоторых функций.
LiveReload
Возможности
LiveReload, во-первых и как следует из названия, умеет следить за изменениями файлов и обновлять их в браузере, а во-вторых, автоматически компилировать если и не всё, то многое: LESS, SASS, Compass, Stylus, CoffeeScript, IcedCoffeeScript, Eco, SLIM, HAML, Jade. Для самого live reload необходимо установить прилагающееся расширение в браузер, есть версии для Safari, Chrome и Firefox.
Кроссплатформенность
В целом программа для Mac OS X. Есть версия для Windows, но сегодня она представляет из себя pre-alpha версию. Для Linux предлагается использовать guard-livereload.
Цена
Версия для Mac OS X стоит $9.99 в App Store, есть и бесплатный триал. Версии для Linux и Windows бесплатны.
CodeKit
Возможности
Эта программа предоставляет самые широкие возможности и, в общем-то, самый удобный и функциональный GUI. Умеет live reload без расширений для браузера, автоматически компилировать Less, Sass, Stylus, Jade, Haml, Slim, CoffeeScript, Javascript и Compass; объединять и минифицировать скрипты, оптимизировать изображения и т. д.
Кроссплатформенность
Её нет, программа только для Mac OS X.
Цена
$25. Есть бесплатный триал.
Scout
Возможности
В отличие от других программ, Scout умеет только компилировать SASS и Compass, зато в его GUI можно задать Output Modes, и он бесплатен.
Кроссплатформенность
Есть версии для Windows и Mac OS X, на этот раз версия для Windows полноценная. Для Linux, к сожалению, версии нет.
Цена
Бесплатно.
Лично я остановил свой выбор на LiveReload, несмотря на то, что CodeKit более функционален. Частично я заменил эту функциональность плагинами к Sublime Text 2 (всё-таки эта статья о Sublime), а остальное мне и не нужно (есть веб-сервисы или просто не пользуюсь).
Думаю, многим будет интересно узнать о других вариантах «среды front-end разработки на базе Sublime Text 2», так что предлагаю поделиться своими подборками плагинов в комментариях.
UPD. Live edit с помощью плагина к самому SublimeText 2 организовать все-таки можно: используйте описанный в посте плагин совместо с расширением для браузера от программы LiveReload. Также есть сведения, что dev-версия плагина работает лучше. Таким образом, можно весьма полноценно обойтись без утановки дополнительного софта, т. е. только плагинами.
В комментариях упоминалось, что я не написал про плагины VCS и SFTP. Дело в том, что это нужно либо не всем, либо разное (кому-то Git, кому-то SVN, кому-то ничего не надо). Ну а так как все плагины названы в честь самих технологий, поддержку которых они добавляют, найти их не составит труда при необходимости.
Привет всем и сегодня я хочу рассказать вам о текстовом редакторе Sublime Text 2.
Sublime Text 2 - продвинутый текстовый редактор для разработчиков. У него, конечно же, есть подсветка синтаксиса, мультиредактирование и много чего другого.
Установка Package Control в Sublime Text 2
Далее запускаем наш ярлык или заходим в папку с редактором и запускаем sublime_text.exe. Теперь мы должны установить Package Control, чтобы у нас появилась возможность устанавливать плагины прямо из интерфейса редактора. Для этого жмём Ctrl + ~ (тильда, Ё) и вставляем в появившуюся форму следующий код:
Жмём Enter после чего в этом же окошке нам напишет «Please restart Sublime Text to finish installation», нужно перезагрузить Сублайм, что мы собственно и сделаем. Вот и всё, теперь мы можем устанавливать любой понравившийся нам плагин для Sublime Text 2.
Почему Sublime Text 2?
Теперь поговорим о том, чем он лучше других.
Во-первых, он очень красивый. В нем правильно подобрана цветовая схема, шрифт, цвет и вообще все сделано так, чтобы программисту было приятно в нем работать.
Во-вторых, он очень шустрый. Откликается мгновенно.
В-третьих, есть много мелких, но очень полезных фишек, как мини-карта документа, сайдбар, где выводятся все ваши файлы проекта, полноэкранный режим и т.д.
В-четвертвых, есть мультиредактирование. Это очень полезная вещь. Вы можете зажать alt и выделить любые места в документе, не отрывая мышки, и потом редактировать их все сразу одновременно. Плюс ко всему, эта функция работает намного лучше, чем например в Notepad++ и других редакторах.
В-пятых, он поддерживает огромное количество горячих клавиш, благодаря которым вы сможете работать с документом не используя мышку вообще.
В-шестых, для этого редактора написано огромное количество плагинов, скачав которые вы сможете еще больше облегчить себе работу, а, чтобы вам было легче их находить и скачивать, есть package control. Вы вызываете его, вводите название плагина и нажимаете "установить". Буквально через 5 секунд плагин уже установлен и готов к работе.
И последний аргумент - все настройки хранятся в json файлах. Вы можете зайти туда и легко настроить редактор под себя.
Я рассказал основные его достоинства, но далеко не все. На самом деле, этот редактор можно приравнять к полноценной IDE и одной статьи, чтобы описать все его достоинства, не хватит.
Поддержка синтаксиса
Для начала забудем о сложностях и просто сделаем подсветку синтаксиса для нужных нам препроцессоров. Для каждого есть свой плагин, так что всё, что требуется сделать, это выбрать нужное: LESS, SASS и SCSS, Stylus (здесь еще и build system в комплекте).
Недостатки Sublime Text 2 vs. PHPDesigner 8
Перед тем как начать пользоваться Sublime Text 2 я использовал PHPDesigner 8 (платный редактор), в котором меня устраивало абсолютно всё, до того момента как он перестал быть стабильным: начались случаи, когда при редактировании и сохранении файлов через встроенный ФТП что-то шло не так и сохранение зависало. В результате половина файла оказалась стёртой. Это было большой неожиданностью и неприятностью. После этого я дал ему второй шанс, работая к тому времени уже на другом хостинге (вдруг дело в самом хостинге и его FTP?), но нет, случай повторился, после чего я навсегда отказался от PHPDesigner, однако советую вам его опробовать. Вполне вероятно, что у вас может и не случится такой неприятности, главное не забывайте делать резервные копии ;)
Что первым бросилось мне в глаза? Сильно уступающая подсветка PHPDesigner’у. В PHPDesigner была реализована контрастная подсветка в зависимости от того, на какой части кода (PHP, JS, HTML) находится в данный момент фокус, все остальные языки при этом затемнялись, подсвечивался лишь редактируемый.
Ну да ладно, это хоть и очень удобно, но не всем же иметь такую прелесть :) Однако стандартная подсветка Sublime Text 2, лично для меня, уступает даже Notepad++, в котором подсветка явно нагляднее и все ключевые моменты выделены гораздо заметней. Если покопаться, то думаю можно переделать подсветку, но у меня не возникло желания на подобную возню, в целом она сгодится.
Второе, с чем мне пришлось мириться, это невзрачная подсветка вкладки, в которой произошли изменения, но ещё не были сохранены. У Sublime , в отличие от PHPDesigner (где название такой вкладки становилось ярко красным), разница в окне, где не было никаких изменений и в окне, где было редактирование файла - лишь в маленьком сером крестике, который изменится с крестика на такой же серый кружочек. Когда работаешь на недостаточно контрастных мониторах, либо когда на экран попадает свет это абсолютно не заметно и не понятно, сохранял ты изменения или нет. После работы с PHPDesigner это правда было очень неудобным для меня, так как из-за отсутствия какого-либо уведомления, я попросту забывал сохранять изменения. Как оказалось, эту проблему можно решить всего одной строчкой в настройках редактора. Теперь название вкладки с изменениями становится ярко-оранжевым. Как это сделать я напишу в самом конце статьи.
И третье, это немного не стандартное решение по работе с ФТП, вам всё равно придётся скачивать файлы себе на компьютер и редактировать их у себя на компьютере…, но в этом есть и свои плюсы.
Наглядная подсветка вкладок в Сублайм Текст 2
В заключительной части, как и обещал, поделюсь с вами тем, что лично мне создавало большие неудобства после работы с платным редактором PHPDesigner 8 – я имею ввиду подсветку вкладки, в которой произошли не сохраненные изменения. Все что вам необходимо сделать, это зайти в Preferences / Settings – User и проследить, чтобы у вас была такая строка:
Всего то на всего, а сколько приятного :) Вот и подошёл к концу мой обзор, теперь вы знаете о таком замечательном редакторе как Sublime Text 2 и уж точно вооружены и готовы к написанию собственных веб-проектов. В следующей статье я сделаю «обзор» и поделюсь своими впечатлениями от работы с платным редактором кодов PHPDesigner 8, а на сегодня всё, спасибо за внимание и до встречи в новых статьях!
Недавно открыв для себя Sublime Text 2, я удивился тому, как можно было придумать настолько эффективный инструмент. Тот кто избалован всяческими IDE, обычно не видит никаких достоинств, кроме красивой подсветки кода (хотя именно это меня изначально и привлекло).
Я не стану рассуждать на сколько хорош этот редактор и расписывать весь его функционал — на хабре по этой теме уже есть множество топиков. Я лишь хочу показать как можно сделать из него тот инструмент, за который не жалко тех 59$, которые хотят за него разработчики.
Плагины
Главное преимущество Sublime Text 2 перед остальным зоопарком редакторов и IDE для меня — это возможность писать свои плагины. При этом не нужно изучать тонны литературы, как например если вы собрались писать плагин для Eclipse или Geany. Плагины пишутся на Python и на сайте проекта есть API Reference, которого мне было вполне достаточно для того чтобы начать расширять редактор под свои нужды.
Еще мне очень понравилось то, что в редакторе есть удобная консоль python, которую можно использовать для отладки своего плагина.
Хотелки
Попытаюсь сформулировать некоторые из возможностей, которые мне были очень нужны и готовых решений я не нашел.
Создание бэкапов
Я занимаюсь разработкой на php и работаю с множеством проектов одновременно. Так уж повелось, что система контроля версий у нас по множеству причин не прижилась, поэтому мне был жизненно необходим удобный механизм создания бэкапов.
До Sublime я использовал Geany и в нем была достаточно удобная надстройка, позволяющая делать резервные копии редактируемых файлов в выбранную директорию. Единственный минус данной надстройки был в том, что бэкапы создавались каждый раз при сохранении. Чего-то подобного мне и хотелось в Sublime, но чтобы бэкапы создавались по запросу (например при нажатии горячих клавиш). Справедливости ради отмечу, что среди готовых решений есть подобный плагин AutomaticBackups, но мы напишем свой велосипед. Ради забавы.
Сравнение файлов
Когда работаешь над проектом не один, то бывает необходимо посмотреть те измения, которые внес другой программист (или сравнить файл с ftp с локальной копией). Обычно в данном случае я открывал meld, выбирал там нужные файлики и смотрел разницу. Хотелось данную фунцию тоже возложить на редактор. Представлял я это так: открываю два файла в редакторе, располагаю вкладки одна за другой, нажимаю горячую клавишу и открывается meld с выбранным файлом и с файлом, вкладка которого в редакторе идет следующей. Мне показалось это очень удобным.
Список всех открытых файлов
По специфике работы, мне часто требуется составить список редактированных файлов (да, вот она жизнь без svn). Хотелось бы получать список открытых файлов тоже по нажатию горячей клавишы.
Приступим к работе
Я описал тот небольшой минимум фич, которые мне были необходимы для комфортного перехода на Sublime.
Далее я покажу как писались плагины для моих нужд и на сколько это было просто. Отмечу то, что писал я все под Ubuntu и как оно делается в Windows я даже не представляю.
Плагин Backup
Приступим. Открываем редактор, в меню выбираем Tools->New Plugin… Открывается вкладка с заготовочкой вида:
Нам необходимо правильно назвать класс нашего плагина и сохранить его с правильным именем. Имя класса должно начинаться с большой буквы, если название состоит из нескольких слов, то слова не должны иметь разделителя и каждое новое слово должно начинаться с заглавной буквы. Заканчиваться имя класса должно обязательно на слово Command. Имя файла должно быть написано маленькими буквами и если название плагина состоит из нескольких слов, то слова должны иметь разделитель _
Я получил вот такой скрипт и сохранил его в предложенной директории ~/.config/sublime-text-2/Packages/User/ с именем backup.py:
- Получить имя файла, который открыт в текущей вкладке;
- Создать в директории хранения бэкапов директорию с текущей датой (будем разделять бэкапы по дням);
- Создать в директории с текущей датой дерево директорий до нашего файла (покажу на примере);
- Скопировать файл в эту директории с префиксом текущего времени;
- Известить пользователя о том, что бэкап был создан.
У view есть нужная нам функция file_name(), которая и вернет путь до открытого файла. Для того чтобы начать отлаживать наш плагин нужно сделать привязку к какой-нибудь горячей клавише. Для этого откроем в меню Preferences->Key Bindings — User и напишем там бинд комманды backup например к клавише F7:
Теперь приводим наш плагин к виду:
Сохраняем файл, открываем консоль Python (ctrl+`) и жмем F7. В консоль выведется полный путь до файла.
Дальнейшие действия уже не требует разбирательств с API и я выкладываю полный код плагина:
Теперь создаем директорию, например ~/backup/, прописываем полный путь в плагине, далее открывем SideBar (меню View->SideBar->show). Теперь выбираем File->OpenFolder и открываем нашу папку backup. Теперь у нас всегда слева открыта папка с бэкапами. Нажимаем в любой момент времени F7 и видим как слева появляются бэкапы. Вот как оно выглядит у меня:
Плагин Diff
- Получаем путь до файла в активной вкладке;
- Проверяем есть ли у нас вкладка правее текущей;
- Получаем имя файла из второй вкладки;
- Запускаем meld и передаем ему имена двух файлов;
В массиве вкладки упорядочены в том порядке, как мы их видим в редакторе. У каждого view есть свой уникальный id. Тогда для получения вкладки, следующей за активной нам нужно найти номер активного view и взять следующий по номеру. У меня получился такой код:
Для работы этого плагина нужно иметь установленную программу meld. Если Вы используете Ubuntu, то ее можно установить выполнив комманду:
Далее нам нужно привязать действие diff к какой-либо горячей клавише. Для этого откроем в меню Preferences->Key Bindings — User и напишем там бинд комманды например к клавише F2:
Открываем два файла, переходим в первый открытый файл и нажимаем F2. Открывается программа meld, в которой сравниваются два открытых файлика. Превосходно!
Список открытых файлов
Я не буду описывать поэтапно создание этого плагина. Принцип работы, думаю, легко понять из кода:
Не забудьте только привязать его к нажатию горячей клавиши, например ctrl+shift+f:
Теперь нажимаем сочетание клавиш, которые мы выбрали и в новой вкладке видим список открытых файлов.
Заключение
В данной статье я хотел показать то, насколько гибко можно настроить и расширить редактор Sublime Text 2. Надеюсь после прочтения у Вас тоже появится интерес и желание сделать что-то свое, ведь это так просто.
Я не силен в программировании на Python, поэтому могу ошибаться в терминах, типа массив это или список. Возможно, что-то можно было сделать проще или иначе.
Пару месяцев назад я случайно наткнулся на массу положительных отзывов о текстовом редакторе Sublime Text 2. Попробовав его в деле, я не разочаровался. Теперь это мой основной рабочий инструмент.
Sublime Text 2 — это платный текстовый редактор, написанный на C++, который:
- Работает в Linux, OS X и Windows
- Обладает приличной скоростью работы
- Приятным интерфейсом (включая всевозможные анимации)
- Гибко настраиваем (правда, не в GUI, а в json-конфигах)
- Имеет множество плагинов, число которых растёт как на дрожжах
- Поддерживает VIM-режим
- Использует fuzzy-поиск
Вопрос цены
Редактор условно-бесплатный или «условно-платный» :) Стоит 59 $ за лицензию (если брать сразу много — есть скидка), но им можно пользоваться и бесплатно. В бесплатном режиме раз в пару часов выскакивает диалоговое окно с предложением редактор приобрести, а также в заголовке окна капсом написано UNREGISTERED. Насколько я знаю, других отличий нет.
Интерфейс
Одно из первых впечатлений о программе — она красива из коробки. Правильно подобранные шрифты, цветовая схема, плавные анимации (их здесь больше, чем в большинстве текстовых редакторов и IDE). Всё это имеет смысл, т.к. в итоге радует глаз и не отвлекает внимания. До тех пор, пока редактор не перегружен плагинами, он обладает весьма быстрым откликом, от чего я успел отвыкнуть, используя NetBeans.
Первое что бросается в глаза — отсутствие какой-либо панели инструментов. Также я пока не встретил ни одного диалогового окна, кроме стандартных окон сохранения/открытия файла. Вместо диалоговых окон используются «слои». Символы пробела и tab-а отображаются только при выделении текста, но в настройках можно задать режим «всегда».
Справа по борту расположена карта кода. Своеобразный аналог прокрутке страницы в виде pixel-карты, которая представляет из себя сжатый до ~100px по горизонтали код текущего файла (включая подсветку синтаксиса). Помогает в ориентировании по файлу, а также упрощает прокрутку страницы, т.к. действует аналогично scrollbar-у. Сложно наверняка сказать «киллер-фича» это или очередная «свистелка», но в течение всего времени использования у меня так и не возникло желания убрать её.
Доступны полноэкранный режим (F11) и "Distraction Free Mode" (Shift + F11). С первым, я думаю, всё понятно, а вот второй мне был в новинку. Этот режим представляет из себя полноэкранный режим с собственными настройками. Впервые перейдя в него вам доступны лишь сам редактор кода, да строка меню. В ней (во ->View) можно включить/отключить всё нужное/лишнее. Удобный режим для глубокого погружения в работу.
Режим вертикального выделения является одной из самых важных функций для продвинутых текстовых редакторов. И sublime не исключение. В Linux-версии он активируется правой кнопки мыши при зажатом шифте. Очень удобно при быстрых правках разного рода списков, разметки и не только. Стоит отметить, что ST2 умеет искать и заменять по регулярным выражениям, без чего было бы сложно рассматривать его всерьёз.
Также стоило бы отметить — горизонтальный scroll. Если на вашей мыши его нет, воспользуйтесь shift + вертикальный scroll. Как оказалось — очень удобно. В статус панели, помимо ошибок и текущей позиции курсора, доступны переключатели текущего синтаксиса файла и размера tab-а.
Иконки-кнопки для раскрытия/сворачивания регионов кода (функции, блоки, теги и т.д.) несколько не очевидны. Дело в том, что хоть они и расположены, как и должны, слева от строки кода, но, по-умолчанию, отображаются лишь по наведению мыши (это настраивается). Доступны для множества структур, в частности очень порадовала возможность «сворачивания» SCSS-селекторов.
Fuzzy поиск
Одна из самых разрекламированных функций редактора — нечёткий поиск. Он позволяет найти «modules/gallery/view/gallery/page.jade» вбив лишь «gapaja». Сказать, что это экономит время — всё равно, что ничего не сказать. В 99% случаев я открываю файлы или нахожу нужную мне функцию по вот таким вот обрывкам, напоминающим какой-то восточно-азиатский диалект :) Из коробки доступны:
- Ctrl + P — поиск по файлам проекта
- Ctrl + R — поиск по функциям (по template-ам в XSLT, селекторам в CSS/SCSS и т.д.)
- Ctrl + Shift + P — поиск по меню (а туда попадают, в том числе, и новые функции из плагинов, т.е. не обязательно запоминать горячие клавиши для редко-используемых возможностей)
- Ctrl + ; — поиск по словам. Например, вбив dbr, можно найти, где же вы забыли убрать служебный debugger в js-файле
- Ctrl + G — номер строки (не fuzzy-поиск, но, я думаю, здесь ему самое место)
Этот список может быть расширен плагинами. О паре таких я расскажу чуть ниже.
Конфигурирование
Все настройки осуществляются через правку json-конфигов. Изменения вступают в силу сразу же после сохранения файла. Большая часть настроек, которые вам могут попасться (будь то сам редактор или же его плагины) разделены на 2 части — default и user. Т.е. конечному пользователю следует изменять именно user-конфиги, которые по-умолчанию, как правило, пусты.
Базовые настройки редактора вы можете увидеть выбрав в меню Preferences -> Settings-Default. Пробегусь по самым ключевым:
Горячие клавиши
Горячие клавиши изменяются по тому же принципу, что и все остальные настройки, и точно также вступают в силу сразу же после сохранения конфига. В случае какой-либо ошибки, вроде неправильной комбинации клавиш, вы можете узнать подробности в консоли (Ctrl + `). Там вообще можно найти много полезных данных. Обратите внимание на картинку справа — это ссылка на подробную карту горячих клавиш (случайно нашёл в сети).
Думаю сильно углубляться в настройки гор.клавиш нет смысла, т.к. они интуитивное понятны. К примеру, следующий «бинд»:
Запускает макрос Delete Line при нажатии Control + E. А этот:
Выполняет команду fuzzy_file_nav (доп. плагин), с аргументами. Возможно вам поможет мой конфиг гор.клавиш. Мышь тоже можно настроить — для этого существуют .mousemap. К сожалению, мне не удалось найти хоть сколько-нибудь подробной документации об этих файлах.
Работа с проектами
Если пользоваться редактором вместо IDE, то довольно сложно обойтись без проектов. Изначально вы работаете над проектом «default», и для того чтобы создать новый нужно выбрать в меню «Project -> Save project as». Вам предложат указать путь для конфиг-файла проекта. После создания проекта следует прикрепить к нему рабочие директории (чаще всего она одна, но можно указать и несколько). Для этого выберите «Project -> Add folder to project», после чего она появится на панели слева (при условии, что вы её включили). С этого момента у вас заработает fuzzy поиск по проекту (Ctrl + P).
Перейдём к его настройке (Project -> Edit project). В нём вы найдёте подцепленные директории. Чтобы исключить из них лишнее, добавьте folder_exclude_patterns: [ "path_1", "path_2", . ] и file_exclude_patterns: [ "*.md",… ]. Изменения, как обычно, вступят в силу сразу после сохранения. Теперь поиск в файлах и fuzzy-поиск по именам файлов будут игнорировать лишнее, а древо файлов слева несколько поредеет. В этом же конфиг-файле могут быть заданы настройки для некоторых плагинов. Например — xdebug. Более подробную информацию вы можете получить здесь.
Переключение между проектами очень быстрое, что привело меня в восторг после NetBeans. По умолчанию — Ctrl + Alt + P. Редактор запоминает список открытых файлов, активную вкладку, позицию курсора и скролла. Также можно открыть новое окно (не вкладку, Ctrl + Shift + N) редактора и задать там другой проект.
Плагины
Ни один текстовый редактор такого уровня не может обойтись без плагинов. Установить плагин можно просто скопировав его в под-директорию User. Самый простой путь найти её — Preferences -> Browse packages. У вас откроется файловый менеджер в каталоге установленных плагинов. Как видите их достаточно много :) Однако есть более простой и правильный путь (для большинства ситуаций) — использование PackageControl. О нём чуть ниже.
Основной язык написания плагинов — python. Наверное, поэтому их так много. Если вас интересует эта тема, возможно, вам пригодится эта статья.
PackageControl
Его установка весьма не очевидна. Сначала переходим на страницу плагина. Жмём зелёную кнопку install и попадаем на страницу с подробной инструкцией по установке. На момент написания статьи она состоит из копирования куска python-кода в консоль редактора (Ctrl + `) и нажатие на клавишу enter. Вы спросите — что за страшные шаманства? Не переживайте, на этом сюрпризы закончились. Дальше всё пойдёт как по маслу (при условии, что PackageControl нормально установился). Я надеюсь, разработчики добавят его в базовую сборку.
Вызвать «слой» PackageControl можно из меню Preferences -> Package Control. Но проще ctrl + shift +p, а дальше набрать необходимую команду. К примеру, для доступа к «Install Package» мне хватило трёх символов — «ins» в fuzzy поиске. Как же я раньше без него жил? :) Сам модуль предельно очевиден, посему, полагаю, нет смысла расписывать его подробно. Отмечу лишь, что некоторые плагины располагают своими собственными конфигами или гор.клавишами. В этом случае быстрый доступ к этим настройкам можно получить, используя меню Preferences -> Packages settings -> %plugin_name%.
Небольшая подборка плагинов
Aligment — позволяет отформатировать конфиги/массивы/что-угодно так, чтобы значения располагались на одном уровне по горизонтали. Не сильно удобная штука, но лучше чем ничего. Для начала следует установить курсоры перед каждым значением, а затем нажать «Ctrl + Alt + A» (в Linux-версии).
FuzzyFileNav — Позволяет, используя нечёткий поиск, открыть файл вне проекта, бегая по файловой структуре. Не так круто как в Ctrl + P, но, лично мне, куда удобнее, чем в стандартном диалоговом окне ОС.
FileHistory — fuzzy поиск по недавно открытым/закрытым файлам. Использовал до того, как нашёл GotoOpenFile.
GotoOpenFile — копия режима Ctrl + P, но применительно только к открытым файлам.
JsMinifier — позволяет упаковать выделенный (или весь код текущего файла) javascript. Плагин использует Google Closure Compiler и UglifyJS. Если ничего не произошло — смотрите в statusbar, скорее всего javascript-код не валиден.
PhpDoc — простой помощник для заполнения PhpDoc. Пользоваться так: пишем /**[tab]. Уже внутри — [собака]var[tab], [собака]return[tab] и т.д. Автоматически определять типы и имена переменных и прочие полезные штуки не умеет, но зато вставляет * при переводе каретки :)
GotoTab — позволяет переключать вкладки по нажатию Ctrl + [цифры]. Довольно удобная штука.
SublimeLinter — проверка синтаксиса на лету (или как настроите). Умеет готовить — CoffeeScript, CSS, Java, JavaScript, Objective-J, Perl, PHP, Python, Ruby. Использует уже готовые инструменты. К примеру, для JavaScript-а предлагает выбор между JsLint, jsHint и gjslint. jsHint, который стоит по умолчанию, не просто проверяет синтаксис, я навязывает вам свой true-coding-style, что частично можно настроить в конфиге. Мне этого не хватило, т.к. библиотека оказалась не столь гибкой, как бы хотелось, посему пришлось применять хирургические методы :) Также стоит отметить, что SublimeLinter способен заставить ваш редактор — подвисать. В таком случае — покопайтесь в настройках, он достаточно гибко настраивается.
Tag — библиотека, предоставляющая удобные средства для работы с XML. Использую для приведения XML к читаемому виду. Конечно, на этом его возможности не ограничиваются. К примеру, набрав «div» и нажав ctrl + shift + "," я получаю с курсором внутри.
XDebug — отладчик xdebug. Не очень удобный. Отладка в NetBeans куда удобнее. Однако для простых задач — может пригодиться. Пользователям *buntu обязательно следует прочесть раздел «Troubleshooting» на странице плагина.
LastEdit — глючный аналог ctrl + q в Netbeans. Перемещает курсор в места недавних изменений. Очень удобная штука, но, к сожалению, часто не срабатывает. Если вас интересует эта функция, возможно, вам стоит попробовать и этот плагин.
Более полный список доступен здесь. Но далеко не все плагины, которые мне попадались — в нём есть.
Подсветка синтаксиса из коробки достаточно обширна. Однако для nginx и apache2 конфигов, SCSS и Jade мне потребовалось установить плагины. Если для используемого вами языка такого плагина не нашлось, попробуйте портировать подсветку из TextMate, благо очень многие вещи из него поддерживаются как нативные.
Snippets
Snippet-ы — это заранее заготовленные куски кода, с расставленными в них якорями. Т.е. вместо того, чтобы писать
tabTrigger — строка, которую потребуется набрать и нажать tab (полностью набирать не обязательно, т.к. Snippet-ы попадают в autocomplete). После активации курсор перемещается к $1 и выделяет «name», следующее нажатие tab выделит source, который будет изменяться сразу в 3 местах. По окончанию работы snippet-а вы попадёте в $0. Чтобы прекратить его работу досрочно — нужно нажать Esc. В отличии от Netbeans, я смог задать все нужные мне Snippet-ы без проблем с «упрыгиванием» курсора в начало файла, мешанины из отступов и прочего непонятного поведения (если читатель хочет назвать меня «криворуким», могу привести пример такого поведения :) ). Scope — определяет тип файлов, в которых snippet будет задействован, а description вы увидите в autocomplete.
Более подробную информацию можно найти здесь. Возможно, вам поможет моя подборка.
Макросы
Макросы и в Африке — макросы. Начать запись можно через Tools -> Record macro, остановить — там же. По окончанию его следует сохранить (Tools -> Save macro) в Packages/User директорию. Открыв итоговый файл, вы увидите json-массив со списком произведённых действий. Задать макросу горячую клавишу можно используя следующий синтаксис: < "keys": ["alt+1"], "command": "run_macro_file", "args": >.
Layouts
О том, что в ST2 есть слои, я узнал совсем недавно, увидев screenshot на lor-е. Слои позволяют поделить окно редактора на несколько частей (2, 3, сеткой и т.д.). Это очень удобно, когда что-то пишешь в один файл, опираясь на содержимое второго. Но с моим 19" «квадратным» монитором эта возможность выглядит не очень привлекательной. К сожалению, нельзя открыть в разных слоях разные проекты. Также стоит отметить, что панель открытых файлов (которая слева), после включения режима нескольких слоёв, делится на несколько групп.
Заключение
Sublime Text 2 — отличный выбор для программиста или администратора. Для рядового пользователя, на мой взгляд, больше подошёл бы редактор без json-конфигов и с более очевидным GUI.
Важно понимать ST2 — текстовый редактор, а не IDE, хотя, используя сторонние плагины, его можно несколько приблизить к этому статусу. Правда, мне так и не удалось завести умный autocomplete.
А этом обзоре было много критики в сторону NetBeans, но я бы хотел отметить, что эта IDE мне нравится, и я до сих пор ей пользуюсь, хотя и крайне редко (к примеру, для отладки nodeJS или PHP-xDebug). Мне очень не хватает в ST2 столь же удобного средства для «патчинга» файлов, просмотра предыдущих версий, документации и разного рода вкусных штук, присущих IDE, вроде перехода к определению функции при нажатии ctrl + left_click, даже если файл находится чёрт знает где. Однако ST2 дал мне куда большую лёгкость и удобство при решении рядовых задач.
К сожалению, я не смог описать в этой статье всего, о чём меня попросили. Виной тому — отсутствие времени, а местами опыта. Однако, я возлагаю большие надежды на комментарии снизу. Уверен, в них будет много интересного.
Ни для одного опытного программиста или верстальщика не секрет, что настроенная под себя среда разработки (не в смысле IDE, а в более общем) — жизненная необходимость. Было время, когда я делал очередную верстку в практически голом Notepad++ на единственном мониторе, поочередно открывая Photoshop, браузер и редактор. Сегодня, в эпоху «автоматизации всего», мне сложно представить, как вообще можно было так работать.
Sublime Text 2 — популярный расширяемый кроссплатформенный текстовый редактор, для которого написано множество плагинов если и не на все случаи жизни, то на многие. В этом посте я попытаюсь рассказать как из этого конструктора сложить удобный инструмент front-end разработчика для работы с HTML, CSS и JavaScript. Небольшой дисклеймер: я работаю на Mac OS X, поэтому в каких-то «кроссплатформенных моментах» могу что-нибудь не договорить, но постараюсь представить полную информацию. И еще: на истину в последней инстанции не претендую и жду ваши варианты.
- Основные плагины — в этом разделе речь пойдет о том, что, на мой взгляд, должно быть установлено в большинстве случаев, в общем must have.
- Дополнительные плагины — просто полезные расширения; здесь я представлю то, что понравилось мне, но этот список в каждом конкретном случае может специализироваться под ваши задачи и предпочтения, поэтому смотрите на аналоги, ищите новое, в общем кастомизируйте.
Комментарии ( 13 ):
Недавно на него перешел(еще до статьи), редактор очень понравился, код можно писать вечно. Редактор класс! Еще хочу сказать, если вы уберете верхнее меню, вернуть его можно нажатием alt и снова выбрать вид->показать/скрыть меню
Я этим редактором стал пользоваться несколько месяцев назад. Очень понравился. До этого пользовался adobe dreamweaver cs6. Очень понравился темный фон, не так сильно глаза режет. Хоть и подсказки кода хуже чем dreamweaver. А в остальном он удобен хоть и нет официальной русской версии.
Да, темный фон как то подчеркивает серьезность дела)
Да он самый лучший редактор на мой взгляд. Пользуюусь с ним уже полтора года! Когда первый раз увидел - понял это редактор мечты словно люубовь с первого взгляда )))
Редактор класний, крім того рекомендую phpDesigner(він платний, але ключ вільно гуляє по мережі)
Да редактор отличный, кстати уже вышла 3 версия, я как раз неё и руссификатор меню скачал. Супер
Михаил, можно ли сделать небольшой видео обзор по основным функциям, плагинам и работе с данным редактором?
Ваше пожелание учтено. Вполне возможно, что сделаем.
Здесь есть функция копирования как в Notepad++ : 'Ctrl + D'?
Да, только она работает с сочетанием клавиш Ctrl+Shift+D или Cmd+Shift+D На Mac OS.
Это IDE только под WEB или поддерживает и другие языки??
Введение
Для того чтобы комфортно устанавливать, удалять и обновлять плагины используется Sublime Package Control, его установка очень проста и описана на этой странице. Практически все плагины, которые могут вам понадобиться, есть в Package Control, поэтому их удобно искать здесь. Я не советую игнорировать этот плагин и ставить что-то вручную, разве что у вас будет на это особенная причина. Можно сказать, что Package Control сейчас стандарт де-факто для Sublime Text 2.
Все представленные плагины размещаются на GitHub, практически у всех есть readme, которое лучше читать. Описывать все тонкости здесь не имеет смысла, ведь всё меняется, поэтому в этой статье я буду давать небольшое описание, а подробности прекрасно описывают сами авторы плагинов.
Основные плагины
ZenCoding
ZenCoding вряд ли нуждается в комментариях, не так ли? Начатый в 2008 году pepelsbey, этот «ускоритель написания кода» сэкономил страшное количество времени разработчиков. С тех пор реализован в виде плагинов для многих редакторов и IDE.
Не так давно у плагина ZenCoding появился наследник — Emmet. Как подсказали в комментариях, он уже достаточно стабильный, чтобы его использовать.
SublimeLinter
Этот плагин добавляет поддержку lint для многих языков, в том числе HTML, CSS и JavaScript. Для лучшей работы установите node.js, подробнее об этом читайте в readme на GitHub. Вообще, это один из плагинов, readme к которым лучше читать полностью.
SublimeCodeIntel
Приближает возможности Sublime Text 2 к возможностям IDE, добавляя «code intelligence» и «умный autocomplete», в частности добавляет возможность быстрого перехода к объявлению, autocomplete для import'ов и отображение информации о функции в статусной строке.
Alignment
Этот плагин от автора Sublime Package Control делает простым выравнивание многострочных и множественных выделенных участков кода.
CSSComb
О CSSComb подробно можно прочитать на хабре. Этот полезный инструмент причешет ваш CSS, расположив свойства в заданном порядке и разбив их на группы.
HTML5 и jQuery
Это наборы сниппетов тегов HTML5 и методов jQuery, полный список которых можно посмотреть в Tools > Snippets.
Minifier
Minifier умеет минифицировать JavaScript (Google Closure Compiler или UglifyJS) и CSS (Reducisaurus). Весь плагин заключается в двух комбинациях клавиш, одна сохраняет результат в текущем файле, а вторая в отдельном с именем name.min.ext.
SideBarEnhancement
Как понятно из названия, добавляет некоторые полезные улучшения в сайдбар, например, пункт контекстного меню сайдбара «Open with. », позволяющий открыть файл в сторонней программе.
Читайте также: