Здравствуйте дорогие читатели блога Site on! Сегодня я хочу рассказать вам о редакторе кода, в котором создавался данный блог и которым я до сих пор пользуюсь – это Sublime Text 2. Это будет повествовательная статья, в которой я поделюсь своими впечатлениями от использования Sublime Text 2 (бесплатный) в сравнении с PHPDesigner 8 (платный), а также подробно расскажу об установки и настройке этого редактора и его плагинов.
Sublime Text 2 – это вторая версия кроссплатформенного редактора исходных кодов Sublime Text. Кроссплатформенность означает, что неважно какая у вас операционная система: Windows, Linux или что-либо ещё, он будет работать везде. Программа является бесплатной, однако примерно раз в один час, при сохранении файла будет вылезать окошко с просьбой купить данный продукт. Ах да, ещё в названии окна с Сублаймом будет написано UNREGISTERED, на этом разница «бесплатной» и «платной» версий заканчиваются.
Ещё пару слов о «бесплатности» программы. Вообще на сайте написано, что скачать программу и проверить её работоспособность мы можем и бесплатно, но потом должны заплатить за её лицензию. Однако там также написано, что срок, в течение которого мы должны это сделать, НЕ ограничен. Так что можно ни о чём не волноваться и пользоваться на здоровье.
Эта статья будет слегка нетрадиционной, потому что я хочу начать с моментов, которые меня совсем не радуют в этом редакторе, а уже после мы поговорим о достоинствах.
Перед тем как начать пользоваться Sublime Text 2 я использовал PHPDesigner 8 (платный редактор), в котором меня устраивало абсолютно всё, до того момента как он перестал быть стабильным: начались случаи, когда при редактировании и сохранении файлов через встроенный ФТП что-то шло не так и сохранение зависало. В результате половина файла оказалась стёртой. Это было большой неожиданностью и неприятностью. После этого я дал ему второй шанс, работая к тому времени уже на другом хостинге (вдруг дело в самом хостинге и его FTP?), но нет, случай повторился, после чего я навсегда отказался от PHPDesigner, однако советую вам его опробовать. Вполне вероятно, что у вас может и не случится такой неприятности, главное не забывайте делать резервные копии ;)
В свою очередь я начал искать ему достойную замену. Обязательными критериями для меня было наличие функции работы напрямую с FTP (как в PHPDesigner , без FTP клиентов типа FileZilla), а также «лёгкость» и подсветка синтаксиса на чёрном фоне (в PHPDesigner можно было отдельно скачать подсветку для тёмной темы оформления, она была просто ВАУ :) ). В общем, решил я попробовать Sublime Text 2, хотя в нём и не было «встроенного» FTP, но это можно исправить бесплатным плагином, о котором я подробно расскажу дальше.
Что первым бросилось мне в глаза? Сильно уступающая подсветка PHPDesigner’у. В PHPDesigner была реализована контрастная подсветка в зависимости от того, на какой части кода (PHP, JS, HTML) находится в данный момент фокус, все остальные языки при этом затемнялись, подсвечивался лишь редактируемый.
Ну да ладно, это хоть и очень удобно, но не всем же иметь такую прелесть :) Однако стандартная подсветка Sublime Text 2, лично для меня, уступает даже Notepad++, в котором подсветка явно нагляднее и все ключевые моменты выделены гораздо заметней. Если покопаться, то думаю можно переделать подсветку, но у меня не возникло желания на подобную возню, в целом она сгодится.
Второе, с чем мне пришлось мириться, это невзрачная подсветка вкладки, в которой произошли изменения, но ещё не были сохранены. У Sublime , в отличие от PHPDesigner (где название такой вкладки становилось ярко красным), разница в окне, где не было никаких изменений и в окне, где было редактирование файла - лишь в маленьком сером крестике, который изменится с крестика на такой же серый кружочек. Когда работаешь на недостаточно контрастных мониторах, либо когда на экран попадает свет это абсолютно не заметно и не понятно, сохранял ты изменения или нет. После работы с PHPDesigner это правда было очень неудобным для меня, так как из-за отсутствия какого-либо уведомления, я попросту забывал сохранять изменения. Как оказалось, эту проблему можно решить всего одной строчкой в настройках редактора. Теперь название вкладки с изменениями становится ярко-оранжевым. Как это сделать я напишу в самом конце статьи.
Было:
Стало:
И третье, это немного не стандартное решение по работе с ФТП, вам всё равно придётся скачивать файлы себе на компьютер и редактировать их у себя на компьютере…, но в этом есть и свои плюсы.
Несмотря на то, что я до сих пор считаю PHPDesigner 8 лучше, Sublime Text 2 имеет множество преимуществ. Среди них приятный общий дизайн, плавные анимации, в том числе при работе с файлами и папками ftp, более быстрая загрузка. Также в Sublime Text есть много интересных фишек при работе с кодом, которые отсутствуют в PHPDesigner, некоторые из них встретятся в списке ниже.
Копирование строк. Для копирования строки целиком в Sublime Text 2 вам достаточно кликнуть левой кнопкой мыши по строке и нажать Ctrl + C. Вам не нужно обводить всю строку, чтобы скопировать её целиком, просто одинарный клик.
Вертикальное выделение текста. Чтобы выделить текст по вертикали достаточно зажать Shift и правой кнопкой мыши (пкм) выделить необходимый фрагмент.
Вы можете печатать в нескольких местах одновременно! Допустим, вначале вы верстали макет своего сайта без закрывающегося тега </p>, а потом решили, что так делать всё-таки не хорошо, и теперь вам нужно в десяти разных местах дописать закрывающийся тег параграфа. Но вам не нужно делать это 10 раз, вы можете написать этот тег в 10 разных местах одновременно! Для этого нужно кликнуть левой кнопкой мыши в необходимых местах при этом зажав Ctrl, после чего можете приступать к редактированию и наблюдать, как вы печатаете сразу в 10 местах!
Мультивыбор для быстрого редактирования переменных. Вы можете быстро найти все упоминания переменной на странице, чтобы переименовать её или стереть. Для этого кликните по нужной переменной (или выделите нужный участок текста) и используйте Ctrl + D для выбора следующего вхождения этой переменной. Другими словами, если переменная встречается 3 раза на странице, вы должны сделать клик левой кнопкой мыши (лкм) по ней, а затем трижды нажать Ctrl + D.
Интеллектуальная расстановка кавычек и скобочек. Если вы написали слово или фразу, а только потом вспомнили, что его (её) нужно заключить в кавычки или скобочки, вы можете просто выделить этот участок и единожды нажать клавишу нужной скобочки или кавычки. Они сами появятся в начале и в конце выделенного фрагмента.
Аналогично можно применять и комментирование. Для того чтобы быстро закомментировать нужную часть кода: выделите её курсором и нажмите Ctrl + Shift + / Точно также вы можете и снимать комментарии!
Также в Сублайме, как и полагается всем достойным редакторам, присутствует автозамена по регулярным выражениям, которая вызывается с помощью комбинации клавиш Ctrl + H
Поиск по функциям. Просто нажмите Ctrl + R и вы увидите список всех встречающихся функций на странице, из которого можете моментально перейти к нужной.
Я перечислил далеко не все возможности Sublime Text 2 , а лишь те, которыми успел попользоваться сам. Ещё среди достоинств Сублайма нужно отметить быстрый и удобный поиск по файлам и папкам, возможность нечёткого поиска, большое количество бесплатных плагинов и ещё довольно много полезных вещей.
Для установки Sublime Text 2 на ваш компьютер перейдите на официальный сайт кликнув здесь и нажмите кнопочку Download for [ваша платформа].
Как вы могли заметить на скриншоте, сайт автоматически подберёт вам версию Сублайма наиболее подходящую под вашу платформу, но если он вдруг ошибётся, вы можете исправить его вручную. В моём случае инсталлятор для 64-разрядной Windows весит 6,3 мб и называется Sublime Text 2.0.1 x64 Setup.exe. Далее вы запускаете скаченный файл и устанавливаете Сублайм Текст 2 как самую обычную программу. По окончанию установки нажимаем финиш:
Далее запускаем наш ярлык или заходим в папку с редактором и запускаем sublime_text.exe. Теперь мы должны установить Package Control, чтобы у нас появилась возможность устанавливать плагины прямо из интерфейса редактора. Для этого жмём Ctrl + ~ (тильда, Ё) и вставляем в появившуюся форму следующий код:
import urllib2,os; 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())); open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read()); print('Please restart Sublime Text to finish installation')
Жмём Enter после чего в этом же окошке нам напишет «Please restart Sublime Text to finish installation», нужно перезагрузить Сублайм, что мы собственно и сделаем. Вот и всё, теперь мы можем устанавливать любой понравившийся нам плагин для Sublime Text 2.
Теперь мы наконец-то сможем установить такой важный плагин, как 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: у вас всегда есть актуальная резервная копия вашего сайта на компьютере; в отличие от работы напрямую с ФТП, не приходится ждать «подгрузки» каждой папки, ведь папки то у нас на компьютере. Между прочим, мне действительно очень нравится данный плюс, несмотря на неудобства скачивания сайтов себе на компьютер.
В заключительной части, как и обещал, поделюсь с вами тем, что лично мне создавало большие неудобства после работы с платным редактором PHPDesigner 8 – я имею ввиду подсветку вкладки, в которой произошли не сохраненные изменения. Все что вам необходимо сделать, это зайти в Preferences / Settings – User и проследить, чтобы у вас была такая строка:
"highlight_modified_tabs": true
Всего то на всего, а сколько приятного :) Вот и подошёл к концу мой обзор, теперь вы знаете о таком замечательном редакторе как Sublime Text 2 и уж точно вооружены и готовы к написанию собственных веб-проектов. В следующей статье я сделаю «обзор» и поделюсь своими впечатлениями от работы с платным редактором кодов PHPDesigner 8, а на сегодня всё, спасибо за внимание и до встречи в новых статьях!
Пожалуйста, прокомментируйте, как Вам моя статья?