Sublime Text - редактор кода, в который нельзя не влюбиться

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

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

Комментарии (151)
  1. 1
    @

    Дим, а ты пробовал TopStyle 5 ? Прога пока в бетаверсии, но там уже много интересного, разве что нет мультивыделения.
    Я поставил ещё ZenCoding — так вообще замечательно.
    Правда js не удобно писать, нет внятного функционала по автозавершению, автозакрытию и т.п.
    Собсно программа ориентирована на CSS и тут равных ей я ещё не видел? хотя бы взять полную поддержку css3 и html5 синтаксиса (имею ввиду автозавершение и т.п.) Там даже встроенный генератор text-shadow и image-map есть )

    • 2

      Ранее видел упоминания о нем, но не пробовал. Sublime Text меня пока устраивает. А ZenCoding я вообще не люблю.

      • 3
        @

        А почему zenCoding не любишь? удобно же…
        (bg: = background:, bt: = border-top: и т.д. и т.п.)

        • 4

          Потому что мне не нравится его синтаксис. У меня свой zenCoding, сделал так, как мне удобно.

          Вот так он у меня выглядит в исходниках:

          { "trigger": "ba", "contents": "background:${1:} url(i/$2) ${3:no-repeat};" },
          { "trigger": "bgc", "contents": "background-color: #$1;" },
          { "trigger": "bg", "contents": "background: #$1;" },
          { "trigger": "bgi", "contents": "background-image: url(i/$1);" },
          { "trigger": "bgn", "contents": "background: none;" },
          { "trigger": "bp", "contents": "background-position: $1;" },
          
          { "trigger": "bo", "contents": "border: ${2:1}px solid #$1;" },
          { "trigger": "bn", "contents": "border: none;" },
          { "trigger": "bt", "contents": "border-top: ${2:1}px solid #$1;" },
          { "trigger": "bb", "contents": "border-bottom: ${2:1}px solid #$1;" },
          { "trigger": "bl", "contents": "border-left: ${2:1}px solid #$1;" },
          { "trigger": "br", "contents": "border-right: ${2:1}px solid #$1;" },
          
          { "trigger": "bc", "contents": "border-color: #$1;" },
          { "trigger": "btc", "contents": "border-top-color: #$1;" },
          { "trigger": "bbc", "contents": "border-bottom-color: #$1;" },
          { "trigger": "blc", "contents": "border-left-color: #$1;" },
          { "trigger": "brc", "contents": "border-right-color: #$1;" },
          { "trigger": "bcol", "contents": "border-collapse: collapse;" },
          
        • 5

          Ну что ж, все-таки я поставил Zen Coding. Отключил автозаполнение, однако нашел в нем ряд функций, которых очень не хватало (например, автоподстановка ширины и высоты изображения в теге img).

          Теперь будет еще приятнее работать в Саблайме =)

          • 6
            @

            мне больше всего нравится что можно писать вот такие конструкции: ul>li*5>a>span Незнаю как в саблайме, но в np++ можно было сразу задавать и id и классы и т.п. атрибуты.

            Вот так он у меня выглядит в исходниках:

            почти тот же zencoding.
            Сейчас попробовал саблайм, в целом не впечатлило, но оч понравилось наличие в комплекте любимой цветовой схемы solarized и мультивыделение, ну и скорость запуска радует (по крайней мере портабельная версия моментально запускается).
            Возможно нужно просто настроить программу как надо, но т.к. с английским у меня туговато, да и np++ устраивает вполне (после того, как я доточил схему solarized под него) у меня TopStyle и np++ одинаково сейчас выглядят, удобно, когда одновременно оба редактора используются.

            • 7

              мне больше всего нравится что можно писать вот такие конструкции: ul>li*5>a>span

              А мне как раз это в первую очередь и не нравится в Зенкодинге. Но если эту конструкцию применять к выделенному тексту, то это удобно.

              Незнаю как в саблайме, но в np++ можно было сразу задавать и id и классы и т.п. атрибуты.

              Тоже можно.

            • 8
              @

              в np++ можно было сразу задавать и id и классы и т.п. атрибуты

              Что-то я не понял, как это можно сделать, а хочется… :(

              • 9
                @

                Не совсем понял предыдущего комментатора, про задание id и class, что здесь имеется ввиду?
                Zen Coding в Sublime Text 2 великолепно справляется с подобными конструкциями:

                div.some-class-$#some-id-$*5>a[href="#"]

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

                 <div class="some-class-1" id="some-id-1"><a href="#"></a></div>
                	<div class="some-class-2" id="some-id-2"><a href="#"></a></div>
                	<div class="some-class-3" id="some-id-3"><a href="#"></a></div>
                	<div class="some-class-4" id="some-id-4"><a href="#"></a></div>
                	<div class="some-class-5" id="some-id-5"><a href="#"></a></div>
  2. 13
    vlad
    @

    ковыряю sublime. Интересно, zencoding тут слегка не так работает, как в NP++, но тоже можно првыкнуть. Жаль, пока не нашел, как открыть один и тот же файл в двух окнах(layout) одновременно (NP++ умеет это делать в режиме копии), плюс нехвататет синих меток из NP++? которые можно ставить рядом с номером строки, а потом по F2 быстро скакать по ним туда-сюда по всему документу.

  3. 15
    vlad
    @

    -это я про bookmarks в NP++

    • 16
      Евгений
      @

      В этом редакторе существуют Закладки (Bokmarks) пункт меню Goto
      Можно как устанавливать\убирать их неограниченное количество (ctrl+F2), так и передвигаться по ним вверх (shift+F2) или вниз (по умолчанию не сочетание клавиш не назначено) , а также удалять все (ctrl+shift+F2), ставить курсор сразу на все (Alt+F2), причем на каждой строке курсор поставиться именно в то место где он был, до того.

      Еще существуют так называемые метки (marks) Edit->Mark. Думаю далее с ними разберетесь.

      Лейауты (несколько файлов в окне) можно менять здесь View->Layout, думаю семь вариантов + на каждый сочетание клавиш вас должно устроить ;)

      И да, все сочетания клавиш, можно подгонять под себя ;)

  4. 23
    @

    И еще, скорее вопрос риторический, т.к. даже в официальной документации, которая невероятно скудна по Sublime Text 2, нельзя найти хотябы списочка этих scope, к примеру при создании сниппетов, можно указывать scope, т.е. контекст в котором они действуют, к примеру

    <scope>source.python</scope>

    этот сниппет будет действовать только в коде на python как я понял. Тот же source указывается в файлах темы, для обозначения подсвечиваемых элементов. Эх, если бы хотябы списочком автор написал это все) Интересно как вообще темы делают, или у меня не оттуда руки, чтобы в исходниках проги найти все эти scope определения?) Возможно :)

    • 24

      найти хотябы списочка этих scope

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

      Интересно как вообще темы делают

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

  5. 26
    @

    Я чего-то недопонимаю или один сниппет = один файл с расширением

    .sublime-snippet

    ? Если я хочу много и сразу и чтобы все в одном месте? :)

    • 27
      @

      Поспешил я с вопросом) Если нужно много сниппетов в одном, юзаем Completions, расширение .sublime-completions http://sublimetext.info/docs/en/extensibility/completions.html Только, как я понял, эти дополнения должны быть только в одну строку? Т.к. эти строчки добавляются в стандартный механизм автокомплита?

      И насчет Scopes, в документации говорится о том, что идея позаимствована от TextMate, который на маках, и отправляет нас на сайт TextMate, в раздел мануала, где также есть мануал по созданию тем для TextMate, которые подходят кстати и для Sublime

      • 28

        Только, как я понял, эти дополнения должны быть только в одну строку?

        Да, вот пример:

        { "trigger": "sec", "contents": "<div class=\"section\">\n\t<h3>$1</h3>\n\t$2\n</div><!-- .section -->" },

        Я сделал следующим образом. Если сниппеты небольшие, то размещаю их в один файл .sublime-completions, если же они большие, то каждый из них размещаю в отдельный файл .sublime-snippet.

        Со scopes я вообще не заморачиваюсь, и просто не указываю его, т.е. мои сниппеты работают везде.

  6. 29
    @

    Я все еще не успокоился :) Возможно я останусь без ответа, но все же.

    Я пишу CSS в подобном иерархическом виде:

    ul.custom-list {
    	padding:0;
    	margin:10px 0 10px 20px;
    	}
    	ul.custom-list li {
    		padding: 0 0 2px 15px;
    		list-style-type: none;
    		background: url("images/list-bullet.gif") 0 8px no-repeat;
    		display:block;
    		}

    Для этого у меня закрывающая скобка табиться должна. В Eclipse я справился с этим, да и убыстрил создание скобок с помощью сниппета.

    Тоже самое сделал и в Sublime, но, в этом редакторе для сниппетов существует одна фишка, если вы развернули сниппет будь он с плейсхолдерами или без, последний таб всегда приходится на перенос курсора перед самым последним символом сниппета. Что в моем случае с заданием скобок никак не допустимо, так как я, развернув сниппет со скобками сразу же начинаю набирать в нем аббревиатуры Zen Coding или свои CSS-сниппеты. Но, вместо того, чтобы по табу сниппет разворачивался — курсор ставиться вконец сниппета-скобок, за закрывающую скобку.

    Решение есть, но оно медленное. Сбросить фокус с предыдущего сниппета конечно помогает Esc-клавиша, но это сильно тормозит набор. Может есть какая-то настроечка, чтобы курсор не табился в конец сниппета после его набора?

    • 30

      Так можно же задать в сниппете, где будет стоять курсор после вставки.

      • 31
        @

        Конечно можно, я так и делаю)

        <snippet>
        	<content><![CDATA[
        {
        	${1:}
        	}
        ]]></content>
        	<description>CSS brackets</description>
        	<tabTrigger>br</tabTrigger>
        </snippet>

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

        http://clip2net.com/clip/m0/1336220777-clip-4kb.jpg

        вот, к примеру, я развернул сниппет со скобками и тут же написал аббревиатуру следующего, но сейчас елси нажму таб, курсор прыгнет на место после закрывающей скобки, вот здесь в строке состояния хорош видно, что предыдущий сниппет со скобками все еще ждет второго нажатия http://clip2net.com/clip/m0/1336220889-clip-7kb.jpg

        • 32
          @

          Решил проблему) Оказывается я невнимательно читал доки) http://sublimetext.info/docs/en/extensibility/snippets.html

          If you want to control where the exit point should be, use the $0 mark.

          Т.е. в моем случае со скобками нужно было вот так написать:

          <snippet>
          	<content><![CDATA[
          {
          	$0
          	}
          ]]></content>
          	<description>CSS brackets</description>
          	<tabTrigger>br</tabTrigger>
          </snippet>

          $0 не даст курсору перескочить в конец сниппета, всегда означает последний таб, если необходим плейсхолдер вот так тоже сработает ${0:какой_то_текст}

        • 34

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

          Настройки, связанной с этим, по-моему нет. Тут нужен специалист, разбирающийся в питоне.

  7. 35
    @

    Кто-нибудь знает как в Саблаймовском редакторе настроить Zen Coding, чтобы он не ставил пробел после двоеточия в CSS-свойствах?

  8. 36
    @

    Вот сейчас только обнаружил (случайно. Слетели конфиги np++ — полез в настройки и нашел)? что в np++ оказывается тоже есть мульти-редактирование )).

  9. 39

    Интересный редактор.
    Здесь находится ежедневно обновляемая тестовая версия http://www.sublimetext.com/dev (официальный сайт).

  10. 44
    Андрей

    А как же Edit+ ? Тоже очень удобный! Рекомендую! Пользуюсь уже лет 7!

  11. 45
    Василий

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

  12. 47
    @

    А я вот все на Notepad+ сижу, привык, даже статьи в нем пишу, хотя проверка орфографии довольно кривая и я ее так и не смог настроить.
    Из плюсов нравится фичи по работе с кодом:
    1. сортировка линий по 1 букве в алфавитном порядке
    2. удаление лишних пробелов
    3. удаление переносов строк
    2. вырезка всего html кода (остается лишь голый текст)
    4. JSmin позволяет сжать и минимизировать любой JS код скрипта, и не только…
    5. Про подсветку начальных и конечных тегов я уже не говорю, она мне кажется в любом редакторе кода должна быть по умолчанию

    Есть ли выше перечисленные функции в сублиме?
    А вообще еще хотел бы еще иметь в редакторе тулзу для конвертации изображений в base 64, а то достало постоянно все это делать онлайн.

    Кстати я сейчас на своем блоге в очередной дцатый раз дизайн переделываю, все-таки решил вернуться на html5 и пару идей у тебя решил позаимствовать (в том числе семейство шрифта, цветовую схему и оформление заголовков), надеюсь ты не обидишься, да и в футере написано что только перепечатка запрещена ведь… :)
    Или ссылку из футера надо: «оформление ссылок и заголовков by dimox.name»? :)

    • 48

      1. Если я правильно понял, то сортировка есть.
      2. Если речь про пробелы в конце строк, то есть опция «удаление этих пробелов при сохранении файла».
      3. Не знаю. Не понимаю, в чем тут суть. Наверное, это то же самое, что 2-й пункт.
      4,5,6. Есть (через плагин).

      А вообще еще хотел бы еще иметь в редакторе тулзу для конвертации изображений в base 64, а то достало постоянно все это делать онлайн.

      Согласен, мне тоже не хватает.

      надеюсь ты не обидишься

      Не обижусь, если не будет передирания дизайна.

      • 49
        @

        Ну смотря как понимать это «передирание», к примеру стиль заголовков css3й содрал как есть, очень уж понравилось как у тебя они смотрятся, тебе поможет если одну циферку цвету изменю? Думаю нет. Че еще стыбрил, дай подумать, о шапку в басе64, правда пришлось все равно ее переделывать с другой высотой и по новой перекодировать, но цвет получился похожим, так, что можешь все-равно подумать, что содрано у тебя.
        А так, че еще с бедного вебмастера возьмешь, нечего… свобода слова…
        Ах да цвет ссылок и шрифт — самое главное, из-за чего и пошла вся карусель, ну я обычно идеи беру только у лучших, мой прежний вариант — стиль Гоогле, так что в этом плане, можешь даже немножко приподнять нос. Только немножко я сказал! А не так как ты сейчас, выше монитора :)
        Доработаю тему, все равно сошлюсь на ваш блог Дима, он очень многое мне напомнил, про то, что я знал, но в своей погоне за трафиком совсем забыл…

  13. 51
    Илья Игоревич

    Всё равно Notepad++ остается кумиром для меня.

  14. 52
    @

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

  15. 53
    tr3m0r

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

  16. 54

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

    • 55

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

  17. 56

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

    • 57

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

      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>" } },

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

  18. 60

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

  19. 61

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

  20. 62
    @

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

     "caption": "Preferences",

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

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

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

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