Главная›Программы

Sublime Text – прекрасный текстовый редактор для веб-разработчиков

153 комментария

Пишу этот пост под большим впечатлением. Не прошло и недели, как я узнал про замечательный текстовый редактор под названием Sublime Text. Если описать одним словом тот эффект, который он на меня произвел, то это просто: “Вау!“.

Думаю, что настало время сменить старый добрый Rapid PHP, которым я пользовался почти 4 года. Вообще-то я хотел перейти на Notepad++, но, узнав про Sublime Text, оказалось, что последний гораздо лучше.

Sublime Text

Что мне понравилось больше всего

В Sublime Text большое количество полезных возможностей. Но вот что я хотел бы выделить особенно:

  • Приятный, легкий, минималистичный интерфейс.
  • Очень гибко настраивается.

  • Множественное выделение. Вот это просто архиполезнейшая вещь, которую я встречаю впервые. Как она работает – зажимаешь Ctrl и ставишь в нужные места множество курсоров или выделяешь разные участки текста. Теперь при вводе с клавиатуры текст набирается одновременно во всех этих местах.

    Либо еще один наглядный пример. Нужно создать список из нескольких пунктов в виде ссылок. Зажимая колесо мыши, выделяю все пункты (левая часть скриншота, там видно, что в конце каждой выделенной строки стоит свой курсор). Нажимаю заданную горячую клавишу и оппа – тегами обрамляется каждая выделенная строка (правая часть скриншота):

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

  • Возможность создания любых сниппетов и вставки их хоть по горячим клавишами, хоть по буквенным сокращениям (в стиле Zen Coding).
  • Возможность назначения горячих клавиш абсолютно на любое действие.
  • В сниппетах можно задать, где будет находится курсор при вставке, задать плейсхолдеры и переключение в нужные участки сниппета Tab’ом.
  • Наличие миникарты кода для удобного перемещения.
  • Все мои личные настройки хранятся в отдельной папке.
  • Умное комментирование/раскомментирование кода по горячим клавишам.
  • Возможность отображения скрытых символов (пробелы, табы) только при выделении кода.
  • Постоянно растущее сообщество пользователей, которые пишут плагины под любые нужды.

В общем, по функционалу Sublime Text легко заменяет и Rapid PHP, и Notepad++, и даже превосходит их.

Чего не хватает

  • Графического интерфейса для создания цветовых схем. Редактировать xml-файл, чтобы оформить под себя – это крайне неудобно и нудно, отнимает кучу времени.
  • Вставки изображения через проводник Windows. Т.е. указываешь изображение, и программа автоматически подставляет в тег <img> путь к нему, а также ширину и высоту (вот бы кто плагин написал).
  • Добавления слов в словарь для проверки орфографии.
  • Кликабельности ссылок.

Недостатки

  • Время загрузки программы. Если сравнивать Sublime Text, Notepad++ и Rapid PHP, то Notepad++ открывается просто мгновенно, Sublime Text примерно за 1 секунду, а Rapid PHP секунды за 3.
  • Платность. Стоит 59 баксов. С одной стороны не мало для текстового редактора, с другой – она того стоит. Хотя можно пользоваться и вечным триалом (периодически при сохранении файлов выскакивает предложение купить).

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

P.S. Кстати, Sublime Text – это мультиплатформенный аналог редактора TextMate на Mac OS X. Есть версии для Windows, Linux и OS X. Поддерживает цветовые схемы от TextMate.

Смотрите также

Русифицированное меню для Sublime Text 2 и 3

349 комментариев

Решил и я вложить свой небольшой вклад в развитие замечательного текстового редактора Sublime Text (релиз 2-й версии которого, кстати, вышел несколько дней назад). Я сделал русскоязычное меню для тех пользователей, ...

Rapid PHP - добротный текстовый редактор

87 комментариев

Довольно продолжительное время я пользовался текстовым редактором PSpad, о чем уже неоднократно писал на этом блоге. Сначала он был для меня супер-программой, затем после тестирования аналогов стало не хватать некоторых ...

Гаджет для Windows 7+ "Цифровые часы"

4 комментария

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

Комментарии (153)

  1. shift
    12 июня 2012 г. в 10:00

    Саблайм рулит. Пользуюсь уже около полугода, всем доволен кроме отсутствия автокомплита при работе с проектом на PHP, где много ООП.

  2. tr3m0r
    15 июня 2012 г. в 11:42

    Единственный недостаток саблайма – отсутствие возможности расположить поверх всех окон.
    Часто есть необходимость копипастить большое количество табличных данных или вносить мелкие правки и очень неудобно, когда окно «убегает» из поля зрения и его приходится вновь разворачивать.

  3. Faceless
    17 июня 2012 г. в 18:13

    Неплохой редактор, даже очень, но все же Notepad++ лучший в своем роде, да и бесплатность его играет немаловажную роль. Вот только жалко, что Notepad++ в Linux, только под Wine работает.

    1. Асакасинский Василий
      28 июня 2012 г. в 00:08 / ответ на коммент Faceless

      Крайне рекомендую ознакомится с горячими клавишами Sublime, и поработать часов 20 в этом редакторе. Sublime делает Notepad++, как стоячего. Прошу учесть, что я работал в Notepad++, более того, писал для него плагины на Python, знаю что говорю. Sublime чертовски красивый, настраиваемый, позволяет работать чисто на клавиатуре, но при этом его шоткаты гораздо удобнее того же Emacs.
      Просто попробуйте его в работе.
      По этой ссылке — перевод небольшого набора шоткатов под Sublime. Надеюсь пригодится. Удачи!

  4. Виталий
    18 июня 2012 г. в 09:59

    Никак не могу нигде найти, как создать свой сниппет в саблайме. Подскажите, пожалуйста! Приходится извращаться с автозаменой из PuntoSwitcher, которая иногда кривовато работает.

    1. Dimox
      18 июня 2012 г. в 11:09 / ответ на коммент Виталий

      Сниппет можно создать двумя способами:

      1) В папке \Sublime Text\Data\Packages\User\ создаем файл с расширением .sublime-snippet и вставляем в него вот такой код:

      <snippet>
<content><![CDATA[
содержимое сниппета
]]></content>
<tabTrigger>триггер</tabTrigger>
<scope>source.css</scope>
<description>описание сниппета для себя</description>
</snippet>

      триггер – это сокращение, по которому будем вставлять сниппет. Т.е. вставка сниппета происходит по схеме: пишем триггер + нажимаем Tab.

      <scope>source.css</scope> – эта строка указывает, в рамках какого языка будет действовать триггер. Здесь указано, что в CSS-файлах. Если нужно, к примеру, в JS-файлах, тогда в этой строке поменять css на js. Если же нужно, чтобы работало везде, тогда удалить эту строку.

      Если в коде сниппета встречается символ $, то его нужно экранировать, т.е писать вот так: \$.

      2) Сниппеты также можно вставлять горячими клавишами. Тогда в файл Default (Windows).sublime-keymap (если работаем на Винде) добавить строку следующего вида:

      { "keys": ["ctrl+alt+1"], "command": "insert_snippet", "args": {"contents": "<h1>${SELECTION}${1}</h1>" } },

      Думаю, тут объяснять ничего не нужно.

      1. Виталий
        20 июня 2012 г. в 22:43 / ответ на коммент Dimox

        Dimox, огромное спасибо! Такой классный редактор – и такой был облом со сниппетами! Ничего подобного, в плане инструкций, не мог найти, только косвенные указания. Про расширение файла – для меня открытие. Я все пытался через Preferences – User Default, ясень пень, ничего не вышло.
        Спасибо!

        1. Dimox
          20 июня 2012 г. в 23:10 / ответ на коммент Виталий

          Пожалуйста! Инструкции есть, но они все на английском, по ним я и разбирался.

  5. mihdan
    18 июня 2012 г. в 23:53

    Основные параметры конфигурации на русском

  6. Admirus
    30 июня 2012 г. в 09:39

    Действительно очень удобный редактор. Хотя порой к старым превыкаешь сильно

  7. ПафНутиЙ
    10 июля 2012 г. в 15:18

    Осваиваю и с каждым кликом мне этот редактор всё больше и больше нравится.
    Установил Poackgage Manager – теперь вообще одно наслаждение пользоваться редактором.
    Смущает лишь не совсем удобное закрытие фигурных скобок в css, но для css я всё же не планирую использовать sublime, для css его не хватает. А вот html и php – очень порадовало, особенно мультиввод совместно с ZenCoding (кстати удобнее сделан чем в np++ и TopStyle). И что ещё более ценно – нормально работает punto switcher при мультивводе и табуляция – что вообще поднимает удобство набивки множества одинаковых текстов на небывалую высоту!
    Кстати (немного не в тему но.) для русификации меню после установки плагинов достаточно поменять текст

     "caption": "Preferences",

    в файле ИМЯПЛАГИНА.sublime-menu на

     "caption": "Опции",

    правда после обновления плагина наверняка отвалится, если логически подумать)))

    1. Dimox
      10 июля 2012 г. в 16:18 / ответ на коммент ПафНутиЙ

      Хм, непонятно, что тебя не устраивает в работе с CSS, у меня все прекрасно, никаких затруднений не испытываю.

  8. ПафНутиЙ
    10 июля 2012 г. в 17:11

    вот так код (по умолчанию) выглядит в саблайме.
    а вот так в TopStyle
    Я использую “ступенчатую” структуру css-кода и для этого в саблайме придётся делать лишние телодвижения, но это можно впринципе настроить и в снипетах.
    Однако в саблайме невозможно нормально управлять цветами и нет быстрого перехода к имени класса (это видно на панельке слева). Причём в topstyle можно делать свои наборы цветов, он автоматом показывает нормальную палитру с выбором разных наборов самих палитр, показывает похожие цвета и т.д. Ctrl+клик на ссылки (например ссылку на картинку фона) откроет её в просмотрщике. и самое главное – есть небольшое окошко для визуализации внешнего вида редактируемого класса. плюс ко всему Prefixr, встроеный в программу по умолчанию – можно писать чистый css3 а потом просто автоматически добавить свойства с префиксами.
    В тоже время в саблайме мне очень понравилось автозавершение, очень понравилось….

    1. Dimox
      10 июля 2012 г. в 17:19 / ответ на коммент ПафНутиЙ

      Ясно теперь. У нас с тобой совершенно разный подход к верстке.

      1. ПафНутиЙ
        10 июля 2012 г. в 17:26 / ответ на коммент Dimox

        Да. Но это касается скорее css. В html думаю подходы схожи у всех, кто этим занимается постоянно)) и однозначно я пересяду на саблайм.
        P.S. Вот сейчас обнаружил что при мультивыделении если закрыть (нечаяно нажал Ctrl+Shift+W), а потом открыть программу – позиции всех курсоров сохраняются…. КРУТО!

        1. Dimox
          10 июля 2012 г. в 17:38 / ответ на коммент ПафНутиЙ

          Да, вот таких неожиданных приятный мелочей в саблайме немало, что очень и очень радует. Добро пожаловать в сообщество Sublime Text! =)

    2. mihdan
      10 июля 2012 г. в 18:03 / ответ на коммент ПафНутиЙ

      В Sublime Text 2 есть Prefixr

      1. ПафНутиЙ
        12 июля 2012 г. в 14:11 / ответ на коммент mihdan

        В Sublime Text 2 есть Prefixr

        спасибо. поставил. вроде так же работает.

        Вопрос с более продвинутым пользователям. Можно ли назначать действия клавиш.
        хочу сделать, чтобы в css закрывающая скобка ставилась с табуляцией. написал в .sublime-keymap

        [
{ "keys": ["{"], "command": "insert_snippet", "args": {"contents": "{\n\t$0\n\t}"}, "context":
		[
			{ "key": "setting.auto_match_enabled", "operator": "equal", "operand": true },
			{ "key": "selection_empty", "operator": "equal", "operand": true, "match_all": true },
			{ "key": "following_text", "operator": "regex_contains", "operand": "^(?:\t| |\\)|]|\\}|$)", "match_all": true }
		]
	}
]

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

        1. ПафНутиЙ
          12 июля 2012 г. в 21:36 / ответ на коммент ПафНутиЙ

          Разобрался с назначением клавиш для отдельного синтаксиса (CSS)
          получилось вот такое содержимое файла пользовательских хоткеев:

          [
{ "keys": ["{"], "command": "insert_snippet", "args": {"contents": "{\n\t$0\n\t}"}, "context":
		[
			{ "key": "setting.auto_match_enabled", "operator": "equal", "operand": true },
			{ "key": "selection_empty", "operator": "equal", "operand": true, "match_all": true },
			{ "key": "selector", "operator": "equal", "operand": "source.css - meta.selector.css", "match_all": true },
			{ "key": "following_text", "operator": "regex_contains", "operand": "^(?:\t| |\\)|]|\\}|$)", "match_all": true }
		]
	}
]

          Ключевая строка:

          { "key": "selector", "operator": "equal", "operand": "source.css - meta.selector.css", "match_all": true },

          не знаю как и почему, но работает как надо )

  9. Александр
    15 июля 2012 г. в 14:26

    Очень понравилась Ваша статья! Скажите, пожалуйста, возможно ли в ST 2 реализовать горизонтальную прокрутку? Просто если длинный код не удобно, когда он разбивается на две строки.

    1. Dimox
      15 июля 2012 г. в 15:37 / ответ на коммент Александр

      Конечно можно. В настройках есть опция:

       "word_wrap": "auto",

      вместо auto нужно указать false.

      1. Александр
        15 июля 2012 г. в 16:05 / ответ на коммент Dimox

        Когда я нажал сохранить, выдал следующее:
        http://www.imageup.ru/img205/992325/bezymyannyjj.png

        1. Dimox
          15 июля 2012 г. в 17:21 / ответ на коммент Александр

          В файле используется определенный синтаксис, значит вы его нарушили. Попробуйте поменять "auto" (т.е. вместе с кавычками) на false.

          1. Александр
            15 июля 2012 г. в 17:23 / ответ на коммент Dimox

            Спасибо за ответ, но решение крылось в другом – надо было снять атрибут Только чтение с папки, где хранятся эти настройки.

  10. Евгений
    3 ноября 2012 г. в 22:24

    Автор, комментаторы, подскажите, что можно придумать с фолдингом? У саблайма он мягко говоря довольно примитивный. Свернуть участок HTML-кода если нарушена табуляция иерархии внутри просто невозможно. Нужно обязательно чтобы дочернее содержимое не выдавалось вперед, иначе сворачиваться будет часть содержимого.

    И главный вопрос, в ST2 разве нет клавиатурного сочетания для перемещения от открывающей части HTML-тега к закрывающей при положении курсора на этих частях тега? Ведь если имеется очень увесистый тег-родитель, занимающий два экрана, не скроллить же визуально определяя конец? Если нет сочетания клавиш (по крайней мере я не нашел такового), может имеется какой-то плагин? Который в отличие от BracketHighlighter умеет видеть теги ниже видимых на экране. Он тупо не видит, что происходит дальше экрана, и подсвечивает закрывающую скобку открывающей части тега, как закрывающую часть :)

  11. Евгений
    3 ноября 2012 г. в 22:32

    К редыдущему комментарию, про BracketHighlighter я наврал, на самом деле видит. Т.е. сочетания для выделения тега и содержимого тега работают. Перебивалось саблаймом его сочетание клавиш alt+down и alt+up :) Вопрос про фолдинг остается открытым.

    1. Dimox
      4 ноября 2012 г. в 11:30 / ответ на коммент Евгений

      С фолдингом ничем не могу помочь, к сожалению. Никогда им не пользовался.

      Спасибо за подсказку по переходу по тегу! Очень не хватало этой возможности. BracketHighlighter у меня давно установлен, а про эти горячие клавиши и не знал =)

  12. Seojazz
    4 ноября 2012 г. в 21:27

    Dimox, спасибо за обзор и перевод менюшки, редактор действительно крутецкий!
    Такой вопрос, никак не могу добиться такого автокомплита в CSS – http://img.ii4.ru/images/2012/11/04/285248_kiss_67kb.png
    у меня, почему-то просто свойство выводит – http://img.ii4.ru/images/2012/11/04/285249_kiss_7kb.png
    Подскажи, пожалуйста, если знаешь в чём причина.
    Спасибо.

    1. Dimox
      5 ноября 2012 г. в 10:40 / ответ на коммент Seojazz

      Скорее всего нужно установить какой-то набор CSS-сниппетов.

      1. Seojazz
        24 ноября 2012 г. в 14:44 / ответ на коммент Dimox

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

        1. Dimox
          24 ноября 2012 г. в 18:42 / ответ на коммент Seojazz

          В панели поиска нажми на 4-ю кнопку слева (стрелка влево) “Reverse direction”. Это оно и есть.

          1. Seojazz
            24 ноября 2012 г. в 21:12 / ответ на коммент Dimox

            Оказывается, всё как всегда лежит на поверхности ) Спасибо!

            1. Евгений
              25 ноября 2012 г. в 02:02 / ответ на коммент Seojazz

              И кстати, перемещаться вверх по найденному можно Shift+F3 вниз, соответственно Enter

  13. Евгений
    5 ноября 2012 г. в 18:48

    Поделитесь пожалуйста файлами .aff и .dic для проверки орфографии. Не могу найти адекватные.

    1. Dimox
      5 ноября 2012 г. в 20:07 / ответ на коммент Евгений

      Пожалуйста – http://narod.ru/disk/63354066001.f171c10eb8dc4096b06a6808b58dd546/Russian.zip.html

      Тут английский вместе с русским.

      1. Евгений
        5 ноября 2012 г. в 20:58 / ответ на коммент Dimox

        Спасибо :)

      2. андрей
        12 ноября 2012 г. в 22:27 / ответ на коммент Dimox

        Здравствуйте !
        Подскажите, как закрепить Sublime поверх остальных окон ? Никак не могу это сделать (((

  14. Евгений
    14 ноября 2012 г. в 01:27

    Никто не в курсе, можно ли разукрасить вот эту штучку http://clip2net.com/clip/m150515/1352841978-clip-18kb.png?
    Никак не могу найти где она определена.

    1. Dimox
      14 ноября 2012 г. в 12:06 / ответ на коммент Евгений

      Для имени тега:

      		<dict>
			<key>name</key>
			<string>Tag name</string>
			<key>scope</key>
			<string>entity.name.tag</string>
			<key>settings</key>
			<dict>
				<key>foreground</key>
				<string>#EA0000</string>
			</dict>
		</dict>

      Для угловых скобок:

      		<dict>
			<key>name</key>
			<string>Tag start/end</string>
			<key>scope</key>
			<string>punctuation.definition.tag.html, punctuation.definition.tag.begin, punctuation.definition.tag.end</string>
			<key>settings</key>
			<dict>
				<key>foreground</key>
				<string>#EA0000</string>
			</dict>
		</dict>
      1. Евгений
        14 ноября 2012 г. в 23:40 / ответ на коммент Dimox

        Я про подчеркивание пунктирное, под названием тега, когда курсор находится на теге, хочется чтобы только название тега подчеркивалось, поэтому я в BracketHighlighter отключил выделение тега, там он подчеркивается весь, с атрибутами.

        1. Dimox
          15 ноября 2012 г. в 01:00 / ответ на коммент Евгений

          Его, по-моему, никак не поменять.

  15. Евгений
    15 ноября 2012 г. в 01:27

    Кстати еще вопрос, есть ли вменяемый и свежий набор сниппетов для jQuery? Через Package Control либо несколько штук ставятся, либо какой-то пак, но устанавливается с ошибкой и через точку написанные в нем плагины табится и в автокомплите всплывать отказываются)

    1. Dimox
      15 ноября 2012 г. в 10:40 / ответ на коммент Евгений

      Я использую этот – https://github.com/SublimeText/jQuery
      Других не знаю.

      1. Евгений
        15 ноября 2012 г. в 15:16 / ответ на коммент Dimox

        Спасибо, но как им пользоваться? :)
        Распаковал в Packages, но эффекта никакого, доступны только из палитры команд по поиску «jQuery», в автокомплите ничегошеньки :(

        1. Dimox
          15 ноября 2012 г. в 16:14 / ответ на коммент Евгений

          Например, набираю код $('div').click, жму Tab, в результате получается код:

          $('div').click(function(event) {
	// Act on the event
});

          Т.е. эти сниппеты работают для jQuery-методов типа .click и т.п.

          1. Евгений
            15 ноября 2012 г. в 16:34 / ответ на коммент Dimox

            Ага, вон оно что, так работает да. Смущало что в автокомплите не появляется по мере набора. Наверное дело все в том что триггер с точкой впереди у сниппетов.

            1. Dimox
              15 ноября 2012 г. в 19:48 / ответ на коммент Евгений

              Мне тоже не хватает автокомплита.

          2. Евгений
            15 ноября 2012 г. в 16:57 / ответ на коммент Dimox

            А еще они бывает перебиваются всплывшим автокомплитом, если символы в методе совпадают, к примеру с названием класса-узла в том же js-файле приходится жать искейп. Неудобно, блин :)

  16. New
    3 апреля 2014 г. в 11:38

    В Notepad++ есть плагин позволяющий открывать версии новые из бекупчика и сравнивать разные версии 1 и того же скрипта (Compare). Весьма полезная штука)
    есть ли какой-либо аналог в ST3?

    1. Dimox
      3 апреля 2014 г. в 11:56 / ответ на коммент New

      Вроде бы этот подходит. Либо еще можно тут посмотреть.

  17. Deimos
    1 июля 2014 г. в 19:31

    Dimox, поделесь пожалуйста своей цветовой схемой, ту которую ты выкладывал ранее удалили =(
    Заранее спасибо!

    1. Dimox
      1 июля 2014 г. в 21:06 / ответ на коммент Deimos

      Пожалуйста – https://yadi.sk/d/3fJ4F9niVhk2N

  18. Алексей
    11 августа 2017 г. в 09:09

    Dimox, в Notepad++ есть такие функции как удалить пробелы в начале и конце строки, и удаление пустых строк. А в Sublime Text такое есть не в курсе?
    Просто сколько рыл, ничего подобного не нашел, а так как редактор использую ещё и для редактирования статей, их очень не хватает.

    1. Dimox
      11 августа 2017 г. в 16:11 / ответ на коммент Алексей

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

  19. влас
    8 марта 2022 г. в 16:38

    Здравствуйте. Как в Sublime Text заменить РАЗНЫЕ куски текста на одинаковый?
    Например: есть тысяча страниц с div в котором тысяча разных текстов

    надо заменить содержимое этого div на одинаковый текст

    то есть в поле FIND разный текст хотелось бы заменять например звёздочкой. Типа
    div class=”one”> *(найдётся любой текст в этом диве)

  20. влас
    8 марта 2022 г. в 16:44

    если для этого нужно т.н. “регулярное выражение”, то не нашел символа, заменяющего всё.

Ваш комментарий

Жирный текст

Ссылка

Цитата

Внутристрочный код

CSS-код

HTML-код

JavaScript-код

PHP-код

© 2006–2024 Dimox.name. Все права защищены. Перепечатка запрещена.