Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development
Code

Sublime Text 2 хитрости и советы (обновлено)

by
Difficulty:IntermediateLength:LongLanguages:

Russian (Pусский) translation by Anton Lisovsky (you can also view the original English article)

Sublime Text 2 один из самых быстрых и потрясающих редакторов кода, которые нам доводилось видеть в течении долгого времени! Связанно это с неравнодушным, отзывчивым сообществом и огромным количеством доступных плагинов. Сегодня, я покажу вам некоторые советы и хитрости, которые мне нравятся.

На данный момент Sublime Text 2 доступен на большинстве платформ, включая: OS X, Linux и Windows.


1 - Новейшие Версии

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

Скачать дев версию Sublime 2 можно здесь.


2 - Поставьте иконку получше

Обновлено: вот иконка получше.

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

Чтобы её добавить, необходимо заменить существующий файл "Sublime Text 2.icns" на новый. На Mac, откройте Sublime 2 в папке Applications/, затем нажмите правой кнопкой мыши и найдите "View Package Contents". Далее, откройте Contents/Resources, и перетащите новую иконку, тем самым переписав уже существующую.

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


3 - Работа с Command Palette

Также как в TextMate, мы можем использовать command palette Sublime, открыв её через меню инструментов или нажав Shift + Command + P, на Mac. Если вы хотите открыть страницу Preferences или добавить сниппет, всё это можно сделать здесь.

Access the command palette

4 - Невероятно быстрое переключение между файлами

File Switching

Нажмите Control или Command + P, напишите имя файла, который планируете открыть с помощью (fuzzy finder), и, даже не нажимая Enter, вы немедленно перенесётесь к этому файлу. В то время, как Vim и приложения подобные PeepOpen предлагают похожий функционал, они не так быстры, как реализация в Sublime.


5 - Как мы работали без Multi-Selection?

Редакторы такие как TextMate обладают возможностью вертикального выделения, что довольно здорово. Но, с мулти-выделением, у вас будет множество курсоров на одной странице. Данная функция может частично заменить использование регулярных выражений, также как продвинутый поиск и замену. Возможно, понять поможет визуальная демонстрация...

Для активации мулти-выделения, у вас есть несколько опций:

  • Нажмите Alt или Command и затем нажмите в каждом месте где требуется наличие курсора.
  • Выберете блок строчек и нажмите Shift + Command + L.
  • Разместите курсор на определённом слове и нажмите Control/Command + D, для выделения дополнительных слов.
  • В качестве альтернативы, добавьте дополнительные курсоры для  всех вхождений слов и нажмите Alt+F3 на Windows, или Ctrl+Command+G на Mac. Отлично!!

6 - Гайды индентации

Обновлено: данная возможность теперь преустановлена в Sublime Text 2.

Это довольно небольшая функция, но мне всегда нравилось, как Notepad++ на Windows отображает гайды индентации; страницу при этом гораздо легче форматировать и упрощает навигацию. Sublime Text 2 предоставляет такую возможность, с помощью плагина созданного Nikolaus Wittenstein.

Indent Guides

Для интеграции данного плагина:

  • Скачайте
  • Переименуйте папку в "Indent Guides" и переместите её в каталог Packages. На Mac, путь будет представлять из себя Application Support/Sublime Text 2/Packages

7 - Package Control

Шаг описанный в части (#6) немного утомителен, не правда-ли? Вместо этого можно установить замечательный Sublime Package Control, который упрощает весь процесс.

Для установки "Package Control" откройте Sublime и нажмите Control + `. Далее, вставьте следующий кусок кода в консоль.

Не беспокойтесь, в случае если не понимаете код выше; просто скопируйте и вставьте!

Console

Ну и наконец, перезапустите Sublime Text и откройте Preferences -> Package Settings. В случае успешной установки, вы увидите Package Control в списке.

С установленным Package Contrl, процесс добавления новых плагинов и функционала, становится невероятно простым!

Для проверки примера, обратите внимание на следующий пункт в списке.


8 - Выравнивание

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

...процесс может быть автоматизирован, с помощью плагина Sublime Alignment. Вместо скачивания и установки в ручную, давайте используем Package Control (метод, который разобрали в части #7).

  • Нажмите Shift + Command + P
  • Напишите "Insteall", для вызова опции "Package Control: Install Package" , и нажмите Enter
  • Найдите "Alignment" и нажмите Enter для установки.
  • На этом всё; нажмите Shift + Command + A для авто-выравнивания.
Auto-align

Данный процесс может быть использован для установки всех плагинов, которые нам потребуются, к примеру Zen Coding.


9 - Фанат Vim

Я огромный фанат Vim. Количество полезных функций, которые он предоставляет просто невероятно. Факт того, что я перешёл на Sublime Text 2, должен говорить сам за себя!

Если вы используете дев версию Sublime Text (часть #2), можно активировать Vintage мод, который предоставляет функционал команд Vi, которые мы знаем и любим -- ну хорошо, некоторые из нас любят. Остальные их ненавидят! :)

Для активации Vintage мода, откройте Preferences/Global Settings - Default. Как только файл открыт, обратите внимание на часть в самом низу и измените "ignored_packages": ["Vintage"] на "ignored_packages": []. Далее, перезагрузите Sublime, нажмите Escape и вуаля: командный режим Vi!

Блочный курсор

Можно заметить, что в командном режиме, сложно различить курсор (особенно когда используются закладки). Не раз я замечал, что мне приходится искать место где курсор расположен.

Хоть это и не самое лучше решение, плагин под названием "SublimeBlockCursor" призван помочь с данной проблемой.

Обратите внимание: несмотря на то что в описании, говорится что SublimeBlockCursor может быть установлен, через Package Control, я не смог найти его. Вместо этого, я скопировал плагин вручную, в каталог Packages.


10 - Distraction Free Editing

Иногда нам требуется отфильтровать лишнее в нашем коде. Используйте "Distraction Free Mode" для оптимизации данного процесса. Данная опция доступна в View меню. Выберете "Enter Distraction Free Mode" или используйте горячую клавишу на Mac Control + Shift + Command + F.

Distraction Free Mode

11 - Вы всё ещё можете использовать Bundl'ы TextMate

Slim

Сниппеты и темы TextMate можно легко портировать в Sublime Text. Вам всего лишь следует переместить их в директорию Packages -- не трогая при этом файлы с расширением .thumbnail, Sublime распознает перенесённые файлы.  Это значит что весь каталог TextMate тем будет работать в Sublime!

К примеру я работаю с замечательным шаблонизатором Slim и мне требуется подсветка синтаксиса для него. Fred Wu создал bundle для TextMate, но вдруг, он отлично работает в Sublime Text! Если вам интересно можете скачать этот bundle здесь; в него включена подсветка синтаксиса, также как и сниппеты.


12 - Кастомные темы

Тема по умолчанию в Sublime Text выглядит превосходно, но я предпочитаю кастомную светлую и темную тему, Soda, создана Ian Hill.

Soda Theme

Установка

Взято со страницы на Github...

"Если вы пользуетесь git, лучший способ установить тему и поддерживать её в актуальном состоянии, склонировать репозиторий сразу в директорию Packages, в место где хранятся настройки (settings) Sublime Text 2.

Используя Git

Откройте директорию Packages, Sublime Text 2 и склонируйте репозиторий темы, с помощью следующей команды:

Скачать вручную

  • Скачайте файлы используя опцию .zip на Github.
  • Разархивируйте zip и переименуйте папку в Theme - Soda
  • Скопируйте папку в директорию - Sublime Text 2 Packages

Активация темы

Для конфигурации Sublime Text 2, чтобы он использовал тему:

  • Откройте файл настроек Preferences в Sublime Text 2: Sublime Text 2 -> Preferences -> User Global Settings
  • Добавьте (или обновите) вхождение, отвечающее за настройки темы: "theme": "SodaLight.sublime-theme" или "theme": "Soda Dark.sublime-theme"

Пример глобальных настроек пользователя (User Global Settings)


13 - Поиск и навигация по странице

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

Функции

Нужен быстрый способ навигации по определённым функциям?

Function Crawling

Нажмите Control/Command + r для открытия всплывающего окна, которое позволяет выполнить о чём мы говорили ранее (обратите внимание на символ @)! Даже лучше, поиск представляет из себя fuzzy search, который особенно полезен для больших классов.

HTML

Что если вы хотите перейти к определённой части кода HTML страницы - допустим, к div с классом container. Нажмите Control/Command + p, затем #, и вы сразу увидите древо документа.

Перейти к строке под определённым номером

Для быстрого перехода к определённому номеру строки на странице, нажмите Control + g. Вы можете заметить, опять же, как откроется всплывающее окно (которое мы видели при нажатии Control/Command + p), после чего добавляется символ :. Адаптация Vim.

Это значит, что в дополнение к Control + g, вы можете нажать Control/Command + p, после чего :НОМЕР_СТРОКИ.


14 - Доступ к удалённым файлам

Nettuts Fetch

Давайте предположим, что вы поклонник Normalize.css. Возможно вы скачали его и сохранили, как сниппет, или сохранили таблицу стилей на диске, в папке assets. В этом случае в следующем проекте, вам всего лишь нужно скопировать и вставить его.

Единственная проблема, данного метода - также как и многих других, в случае, если прошло несколько месяцев, скорее всего что файл (в нашем случае Normalize.css) был обновлён разработчиком. Так что вы либо будете использовать устаревшую версию Normalize, или снова вернётесь на GitHub страницу и скачаете актуальную копию. Всё это выглядит не совсем оптимально.

Созданный Weslly Honorato, Nettuts+, Fetch решение наших проблем. Он может быть установлен через Package Control.

Использование

Вам понадобится лишь две команды для работы с Fetch. Сперва, нам нужно сохранить ссылки файлов. Опять же, откройте всплывающее окно для команд и найдите "Fetch.". Далее "Manage Remote Files".

Manage Remote Files

Что здорово в Sublime Text 2 - конфигурация невероятно проста. Для добавления ссылок на необходимые файлы, нам достаточно создать объект, следующим образом (не волнуйтесь: он будет добавлен, после установки):

Тем самым, для скачивания последней версии jQuery (в случае если вас не устраивает CDN):

Узнайте больше об использовании Nettuts+ Fetch.


15 - плагин Prefixr

Созданный Will Bond (создатель Package Control, Nettuts+ Prefixr плагин позволяет вам автоматически добавить вендорные префиксы CSS3 для всей таблицы стилей. Тем самым, вам никогда не придётся посещать веб-сайт, самостоятельно; всего навсего нужно будет написать команду:

...будет сконвертирован в:

Использование

После установки (через Package Control) выберете таблицу стилей (или один блок кода), нажмите ctrl+alt+x на Windows и Linux, или cmd+ctrl+x на OS X, и код будет автоматически обработан веб-сервисом Prefixr.


16 - Запуск Sublime из терминала

Sublime Text 2 включает инструменты командной строки, subl, для работы с файлами из командной строки.

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

Пока ~/bin указан в вашем пути (PATH), всё должно работать!

Чтобы узнать больше, изучите данные инструкции.


17 - Автоматическое форматирование HTML

Немного странно, но возможность автоматического форматирование HTML не включена в билд Sublime Text по умолчанию. Плагин Tag, по мимо всего прочего, предоставляет решение, однако, в связи с небольшими просчётами - работа с HTML комментариями, плагин может подвести.

Плагин Tag может быть установлен с помощью Package Control.

Для теста авто-форматирования, возьмём следующий HTML:

...в результате мы получим:

Выглядит хуже чем прежде. После моего теста, он неправильно размещает тег body, не ставит его на отдельную строку, и странно работает с HTML комментариями. Пока данная проблема не будет исправлена (или появится нативное решение), лучше вручную выбирать блок HTML и форматировать его, нежели целую страницу.

200$ будет заплачено первому разработчику плагинов для Sublime Text, который создаст и отправит хорошо работающий "Nettuts+ HTML Formatter".


18 - Создание плагина

Если вы ищите приключений, исследуйте сообщество разработчиков плагинов к Sublime Text и начните вносить свой вклад. У нас есть потрясающий туториал, касательно процесса разработки ST плагина, здесь на Nettuts+. Обратите на него внимание, если вам интересно!


Заключение

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

Если вы хотите узнать больше, ознакомьтесь с Snippeter, менеджер сниппетов кода, ускоряющий процесс программирования, сохраняющий сниппеты онлайн и позволяющий без проблем их найти, воспользовавшись встроенным поиском. Также вы можете экспортировать код в качестве Sublime Text сниппетов (c помощью tabTrigger).

Snippeter
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.