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

Коротко о редакторе

Sublime Text 2 — кросс-платформенный текстовый редактор с удобным интерфейсом и множеством возможностей. И это не просто слова — этот редактор вобрал в себя самое лучшее, что есть в разных редакторах на разных платформах. В нем есть много возможностей, попользовавшись которыми, перестаешь представлять работу без них. И самое главное — он быстро работает и не задает лишних вопросов. В интерфейсе Sublime Text очень много мелочей, сильно упрощающих жизнь. К примеру, если я открою файл controller/user.php, то на вкладке будет написано просто user.php, но если я одновременно открою controller/user.php и view/user.php, то вкладки будут называться user.php - controller и user.php - view соответственно. Если я закрываю редактор, не сохранив изменения в одном из открытых файлов, Sublime не будет задавать лишних вопросов; он просто восстановит все несохраненные изменения при следующем запуске. Если в ходе разработки нужно переименовать переменную — не нужно колдовать с поиском и заменой, достаточно воспользоваться функцией множественного выделения.

Редактор Sublime Text 2 готов к работе

Установка и настройка редактора

Установка редактора ничем не отличается от установки любой другой программы. А вот настройка достаточно непривычна: вместо диалогового окна настроек нужно редактировать файлы в формате json. Есть два файла настроек: файл настроек по умолчанию и файл пользовательских настроек. Первый файл может меняться по мере обновления редактора, поэтому редактировать его не рекомендуется. Зато в нем можно почитать описание (на английском) и возможные значения каждой настройки. Интересующие настройки можно скопировать в файл пользовательских настроек, после чего менять их уже там. Ниже привожу список самых интересных, на мой взгляд, настроек:

Настройка Тип Описание Возможные значения
"rulers" массив чисел Массив номеров столбцов, в которых будут отображены линейки. Линейки никак не влияют на текст, однако позволяют оценивать длину строки и форматировать ее соответственно  
"translate_tabs_to_spaces" булевое значение Если установить true, вместо табов для форматирования будут использоваться пробелы true или false
"tab_size" число Число пробелов в одном табе  
"highlight_line" булевое значение Если установить в true, строка с курсором будет иметь другой фон, что позволит легко ее найти true или false
"trim_trailing_white_space_on_save" булевое значение Если установить в true, пробелы в конце строк будут удаляться при сохранении файлов true или false
"default_line_ending" строка Определяет стиль переноса строк по умолчанию "system" (стиль текущей ОС), "windows" (CRLF) или "unix" (LF)
"shift_tab_unindent" булевое значение Если установить в true, комбинация shift + tab будет смещать отступ строки влево на один таб, даже если для отступов используются пробелы true или false
"highlight_modified_tabs" булевое значение Если установить в true, вкладки с внесенными изменениями будут выделяться. Это очень удобно при работе с большим количеством вкладок true или false
Файл пользовательских настроек в редакторе

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

Проекты

По умолчанию Sublime Text работает с индивидуальными файлами, однако он также умеет управляться и с проектами, причем такой режим работы имеет ряд существенных преимуществ: есть расширенный поиск по файлам проекта с помощью функции Goto Anything (о ней ниже), каждый проект имеет список открытых файлов, которые закрываются с закрытием проекта и вновь открываются при его повторном открытии.

Редактор в режиме работы с проектом. Левую панель можно скрыть

Чтобы создать проект, достаточно указать папку этого проекта. Для этого в меню выберите пункт Project → Add Folder To Project... и выберите нужную папку. После этого проект нужно сохранить, для этого есть пункт Project → Save Project As...

Функция Goto Anything

Goto Anything — это, пожалуй, одна из самых полезных функций редактора. Она позволяет перейти к любому файлу проекта, просто набрав его название. Тонкость заключается в том, что файл ищется с помощью поиска нечеткого совпадения. Поиск нечеткого совпадения позволяет указывать любые символы из искомой строки, они не должны идти подряд, главное соблюдать правильный порядок символов. Например, вам нужно найти все css файлы из папки styles, для этого достаточно ввести styles/.css и вы получите список таких файлов. Поиск нечеткого совпадения позволяет искать файлы по наиболее уникальным символам в их имени и пути.

Функция Goto Anything позволяет находить файлы по наиболее уникальным символам в их имени и пути

Помимо поиска по файлам, функция Goto Anything позволяет перейти к произвольной строке либо к произвольному объявлению (актуально для программистов). Для перехода к строке нужно перед номером строки поставить двоеточие. Для перехода к объявлению нужно поставить символ @, после чего ввести строку для поиска объявления. Объявлением может быть селектор в файле css, название метода или функции в файле php или js и т.д.

Но самый главный секрет функции Goto Anything заключается в том, что можно комбинировать поиск файла и строки/объявления в нем. Допустим, мне нужно найти селектор #my-element в файле main.css. Для этого я сначала ввожу имя файла, после чего, если найдено более одного файла, выбираю нужный мне файл из выпадающего списка, ставлю символ @ и дописываю #my-element.

Поиск нужного метода в файле при помощи функции Goto Anything

Для вызова функции Goto Anything достаточно воспользоваться комбинацией клавиш Ctrl + P.

Командная палитра

Допустим, я открыл файл с неправильным расширением и хочу переключить язык подсветки синтаксиса на корректный. Я могу начать искать нужный язык в списке всех языков, а могу воспользоваться командной палитрой. Командная палитра позволяет найти и выполнить почти любую функцию редактора, используя все тот же поиск нечеткого совпадения. Для переключения языка подсветки на php мне достаточно нажать Ctrl + Shift + P и ввести ssph в открывшейся строчке.

Поменять язык подсветки синтаксиса? Нет ничего проще!

Множественное выделение

В процессе написания функции я решил переименовать одну из переменных. Можно воспользоваться функцией поиска и замены, но что если имя переменной встречается и в другом контексте? Не беда, выделяем переменную, нажимаем Ctrl + D, и редактор находит и выделяет фрагмент файла, где переменная встречается вновь. Для пропуска очередного фрагмента достаточно нажать Ctrl + K, затем Ctrl + D. Текущий фрагмент будет пропущен и редактор перейдет к следующему. После того как все необходимые фрагменты выделены, достаточно просто ввести новое имя переменной, и оно будет изменено во всех выделенных фрагментах одновременно. Отменить множественное выделение можно, нажав на Esc.

Переименование переменной одновременно во всех нужных фрагментах кода

Дополнения

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

Package Control

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

Package Control — это дополнение, упрощающее поиск и установку дополнений для Sublime Text. Кроме того, Package Control сам следит и устанавливает обновления для всех дополнений. Установка Package Control осуществляется в два этапа.

Запустите Sublime Text, откройте консоль программы, нажав 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, дождитесь, пока команда выполнится, после чего перезапустите редактор. Все, теперь дополнение установлено и готово к работе. Команды для работы с Package Control автоматически добавляются в Командную Палитру.

Управление дополнениями редактора прямо из командной палитры

Для установки дополнений с помощью Package Control нужно через Командную Палитру вызвать команду Package Control: Install Package и в открывшемся списке найти и выбрать интересующее дополнение. Для корректной работы некоторых дополнений требуется перезапуск редактора.

ZenCoding

ZenCoding — плагин для быстрого написания HTML на основе записи, напоминающей CSS селекторы. Например, строка div#page>div.logo+ul#navigation>li*5>a преобразуется в следующий HTML код:

<div id="page">
        <div class="logo"></div>
        <ul id="navigation">
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
        </ul>
</div>
Рубрика «нефиг делать»: фундамент веб-страницы одной строкой

Подробнее про доступные в ZenCoding селекторы можно почитать, например, здесь. После установки плагина воспользоваться его функционалом можно, нажав Ctrl + Alt + Enter в HTML файле.

SublimeLinter

SublimeLinter проверяет код файла с помощью соответствующей программы. Для работы проверки CSS и JS-файлов необходим Node JS, для проверки PHP-файлов нужен установленный PHP. Если вы используете Windows, не забудьте добавить папку PHP в переменную окружения Path. Node JS будет добавлен в переменную Path автоматически во время установки. По умолчанию проверка файлов осуществляется в фоне во время работы с редактором.

Компонент Popover из пакета Twitter Bootstrap не нравится моему линтеру

Заключение

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