termosa@web4life.com.ua:~$ touch ~/Sublime Text 2: Magical editor and configure it

Я всегда предпочитал текстовые редакторы IDE-шкам. Пользуясь текстовым редактором ты лучше запоминаешь язык с которым ты работаешь. Они быстро загружаются и не требуют специально отведенного для них рабочего пространства. До не давних пор я пользовался программой Notepad++.  Я пользовался только пятью функциями этого редактора: подсветка синтаксиса, работа с кодировкой (очень просто реализовано, большой выбор кодировок), поиском и заменой текста, подсветкой по всему коду выделенной переменной или имени функции (класса) и вкладками для отдельных файлов и разделением рабочей области на 2 окна.  Меня это вполне устраивало.

Но недавно, читая статью web-разработчика, я столкнулся с предложением в контексте которого упоминалось два текстовых редактора как используемые автором. Это были Notepad++ и Sublime Text 2 о котором сейчас пойдет речь. Я решил, что раз автору нравится Npp, который так сильно нравится мне, то возможно и мне понравится ST2, который так понравился автору. Через минуту я попал с Яндекса на сайт разработчика.  Не смотря на наличие стабильной версий 1.4 я решил скачать build 2126 ST2. Не много осмотревшись на их сайте оказалось что в проекте участвовали разработчики Text Mate. Сам проект предположительно начал свое существование с ноября 2007 года. С самого начала разработчики поставили себе цель создать самый лучший редактор. С альфа … Я вот подумал тут – кому может понадобится все то что я писал до этого? Всё! Поех… http://www.sublimetext.com/2 - скачиваем и устанавливаем. Открываем и видим еще девственный интерфейс программы: Обычный текстовый редактор. Смущает только широкая пустая полоса вверху и не понятный квадратик вверху справа. Пустое поле над окном редактирования – это поле для вкладок. А то что их там сейчас нет – это особенность ST, вкладка появится только после того как вы начнете редактировать содержимое или явно создадите вкладку. На этом этапе рассказа хотел бы отметить то, что ST всегда сохраняет текущее состояние вкладок и редактируемого текста. Так, даже если вы в не сохраненном файле напишите текст и закроете ST измененный текст никуда не пропадет и при следующем открытии редактора Вы сможете продолжить его изменение. Если Вы напишите что-то в поле редактирования, то заметите, что в кубике вверху справа появляется белая линия. Этот кубик – миниатюрное отображение файла, это такая себе замена обыкновенному скролл-бару.

Кодировка

GUI настройщика в этом приложении нет. Так что чтобы установить кодировку для открытия файлов нужно зайти в Preferences -> File Settings – User и дописать туда строку «"fallback_encoding": "UTF-8"». Наименования кодировок можно посмотреть в меню File -> Reopen with Encoding. Через это же меню можно установить кодировку для текущего файла.

Возможности Sublime Text 2

Нажав сочетание клавиш Ctrl + F можно будет увидеть, как внизу, плавно появится консоль для поиска. В опциях поиска можно включить поиск с помощью регулярных выражений, чувствительность регистра, поиск в выделенной области и другое. Но поиск на этом не ограничивается! На самом деле здесь ему уделили особое внимание. Нажав комбинацию клавиш Ctrl + P в верху появится меню в котором можно найти файл из открытых вкладок и папок, класс, или даже строку по её номеру. Список поддерживаемых синтаксисом языков можно посмотреть нажав на нижний правый угол где находится текст «Plain Text», если не открыт файл с известным программе расширением. Давайте остановимся на этом по подробнее. Для начала откройте Project -> Add Folder to Project… и добавьте папку с каким-то проектом. Теперь, добавив папку с проектом в меню «Folders»  (оно должно было появится слева), выберите из меню слева какой нибудь файл и откройте его нажав на него один раз левой кнопкой мыши. Заметьте, что не смотря на то, что файл открылся, во вкладках его все еще нету. Чтобы он появился во вкладках необходимо либо начать редактировать его, либо открывать двойным нажатием из списка. Жмем Ctrl + P и видим знакомое нам меню. Введите туда имя любого файла хранящегося в этом проекте. Нашло? А теперь, после имени файла, поставьте символ двоеточия (:) и введите существующий в этом файле номер строки. В этот момент, в окне редактирования, должен быть открыт вписанный Вами в строку поиска файл на той строке которую Вы написали после двоеточия. Если вместо двоеточия использовать символ собака (@), то вместо строки в файле будет осуществлен поиск по классам. С помощью двоеточия и собаки можно искать и не указав имя файла. В меню редактирования (Edit) и действий с выделением (Selection) Вы можете найти очень много самых различных функций: заключение выделенного текста в комментарий, сортировка строк, создание меток, удаление одинаковых строк, выделение текста совпадающего с выделенным в данный момент, мультивыделение и прочие. Помимо этого в ST2 есть возможность записывать макросы, создавать плагины и сниппеты. Если вы откроете выпадающий список Tools -> Snippets -> HTML, то увидите что разработчики пожадничали на сниппетах. Исправить это можно с помощью плагина Zen Coding.

Магия Zen Coding

Zen Coding – это не зависимый плагин разработанный под множество текстовых редакторов и IDE платформ. В список избранных попал и Sublime Text. Для начала скачайте плагин. Теперь приступим к его установке: 1. Зайдите в директорию %APPDATA%/Sublime Text 2/Packages и скопируйте туда папку Zen Coding. 2. Перезапустите Sublime Text. 3. Создайте HTML файл и откройте его в ST. Визуально ничего не изменилось. Но… Жмем Ctrl + Alt + Enter и видим внизу появившуюся консоль. Пишем в ней: html:xt>div#container>div#header+div#content>ul>li.link*4>a[href="http://web4life.com.ua/" target="_blank"]#link_$>{web4life.com.ua} Желательно писать все самому, так как тогда будет виден процесс формирования и понятен синтаксис.

Сочетания клавиш и сниппеты в Zen Coding и их изменение

• Ctrl + Alt + Enter – Открывает HTML консоль (работает только когда каретка находится в пределах html-кода)
• F1 - Открывает CSS консоль (работает только когда каретка находится в пределах css-кода)
• Ctrl + J - Убирает переносы в родительском теге или в выделеной области
• Ctrl + Shift + T - Выделяет содержимое родительского тега
• Ctrl + Shift + N - Последовательно выделяет родительские теги (каждый раз выделяет тег выше)
• Ctrl + Shift + A - Выделяет имя открывающего и закрывающего тега одновременно (для редактирования)
• Ctrl + Shift + J - Превращает выбранный тег из двойного в одиночный (содержимое пропадает) и наоборот
• Ctrl + , - Передвигает каретку на предыдущую позицию редактирования (содержание тега, атрибут)
• Ctrl + . - Передвигает каретку на следдущую позицию редактирования (содержание тега, атрибут)
• Ctrl + Shift + U - Удаляет тег под кареткой при этом не удаляя его содержимого
• Ctrl + Alt + / - Комментирует родительский тег (селектор, атрибут селектора) или выделеный участок области и разкомментирует его
• Ctrl + Shift + Alt + M - Создает (заменяет) атрибуты width и height для картинки подбирая данные в свойствах рисунка указаного в атрибуте src (для тега img)
• Shift + Alt + W - Обволакивает родительский тег или выделеный участок HTML структурой прописаной в консоли. Если в создаваемом макете закончить тег символом «*», то выбранные элементы распределятся по указанной структуре

Заключение