Sublime Text - редактор кода, в который нельзя не влюбиться
![Sublime Text — прекрасный текстовый редактор для веб-разработчиков](https://dimox.name/wp-content/themes/dimox.name/cache/0f/4f9bb2c9b39740f_150x100.png)
Пишу этот пост под большим впечатлением. Не прошло и недели, как я узнал про замечательный текстовый редактор под названием Sublime Text. Если описать одним словом тот эффект, который он на меня произвел, то это просто: "Вау!". Думаю, что настало время сменить старый добрый Rapid PHP, ...
Комментарии (153)
Дим, а ты пробовал TopStyle 5? Прога пока в бетаверсии, но там уже много интересного, разве что нет мультивыделения.и т. п. и т. п. ) Там даже встроенный генератор text-shadow и image-map есть)
Я поставил ещё ZenCoding — так вообще замечательно.
Правда js не удобно писать, нет внятного функционала по автозавершению, автозакрытию
Собсно программа ориентирована на CSS и тут равных ей я ещё не видел? хотя бы взять полную поддержку css3 и html5 синтаксиса (имею ввиду автозавершение
Ранее видел упоминания о нем, но не пробовал. Sublime Text меня пока устраивает. А ZenCoding я вообще не люблю.
А почему zenCoding не любишь? удобно же…и т. д. и т. п. )
(bg: = background, bt: = border-top:
Потому что мне не нравится его синтаксис. У меня свой zenCoding, сделал так, как мне удобно.
Вот так он у меня выглядит в исходниках:
Ну что ж, все-таки я поставил Zen Coding. Отключил автозаполнение, однако нашел в нем ряд функций, которых очень не хватало (например, автоподстановка ширины и высоты изображения в теге
img
).Теперь будет еще приятнее работать в Саблайме =)
мне больше всего нравится что можно писать вот такие конструкции: ul>li*5>a>span Незнаю как в саблайме, но в np++ можно было сразу задавать и id и классыи т. п. атрибуты.
почти тот же zencoding.
Сейчас попробовал саблайм, в целом не впечатлило, но оч понравилось наличие в комплекте любимой цветовой схемы solarized и мультивыделение, ну и скорость запуска радует (по крайней мере портабельная версия моментально запускается).
Возможно нужно просто настроить программу как надо, но т.к. с английским у меня туговато, да и np++ устраивает вполне (после того, как я доточил схему solarized под него) у меня TopStyle и np++ одинаково сейчас выглядят, удобно, когда одновременно оба редактора используются.
А мне как раз это в первую очередь и не нравится в Зенкодинге. Но если эту конструкцию применять к выделенному тексту, то это удобно.
Тоже можно.
Что-то я не понял, как это можно сделать, а хочется… :(
Не совсем понял предыдущего комментатора, про задание id и class, что здесь имеется ввиду?
Zen Coding в Sublime Text 2 великолепно справляется с подобными конструкциями:
в результате получим:
dimox.name/sublime-text-editor-for-code/?cp=2#comment-14 745
я этот комментарий и имел ввиду, я так и не понял о каких айди и классах идет речь.
Zen Coding в Sublime Text 2 прекрасно развернет и эту конструкцию:
Это я и имел ввиду.
ZenCoding для разных редакторов имеет разный функционал отсюда и был вопрос.
в TopStyle такая конструкция не обрабатывается например.
А вообще все эти штуковины типа zencoding — для тех, кто постоянно верстает, причём чаще одно и тоже действие приходится выполнять много раз. Тот кто редко занимается вёрсткой — лишь потратит время на изучение/заучивание этих всех сокращений)
ковыряю sublime. Интересно, zencoding тут слегка не так работает, как в NP++, но тоже можно првыкнуть. Жаль, пока не нашел, как открыть один и тот же файл в двух окнах (layout) одновременно (NP++ умеет это делать в режиме копии), плюс нехвататет синих меток из NP++? которые можно ставить рядом с номером строки, а потом по F2 быстро скакать по ним туда-сюда по всему документу.
Насчет одного и того же файла, в нескольких табах, в Sublime это тоже возможно. Команда меню File→New View into File ;)
-это я про bookmarks в NP++
В этом редакторе существуют Закладки (Bokmarks) пункт меню Goto
Можно как устанавливать\убирать их неограниченное количество (ctrl+F2), так и передвигаться по ним вверх (shift+F2) или вниз (по умолчанию не сочетание клавиш не назначено), а также удалять все (ctrl+shift+F2), ставить курсор сразу на все (Alt+F2), причем на каждой строке курсор поставиться именно в то место где он был, до того.
Еще существуют так называемые метки (marks) Edit→Mark. Думаю далее с ними разберетесь.
Лейауты (несколько файлов в окне) можно менять здесь View→Layout, думаю семь вариантов + на каждый сочетание клавиш вас должно устроить ;)
И да, все сочетания клавиш, можно подгонять под себя ;)
Я за много лет верстки так и не увидел смысла в применении закладок.
Иногда в CSS файле, когда он довольно обширный приходится в разных местах править, чтобы не запоминать строку, удобно бывает.
Сейчас вспомнил, что периодически запоминаю номер строки, чтобы вернуться к ней. Да, пожалуй, надо будет попробовать воспользоваться метками.
Помню и за собой подобные запоминания и медленные перелистывания =) благо для таких случаев в Саблайме и быстрый поиск по номеру строки имеется.
за закладки спасибо! а можно настроить, чтоб мышью? столько сокращений — голова пухнет.
сути mark не познал, хотя и полчаса пытался.
а что касается layout — я же писал, sublime вроде не может открыть один и тот же файл в двух окнах, вопрос был в этом.
Закладки мышью ставить нельзя, все-таки редактор разрабатывается для людей, по больше части пользующимися клавиатурой.
Метка в Sublime работает по принципу сделать что-то относительно строки, которая имеет метку, к примеру, выделить область от курсора до метки. Метка всегда ставится только одна.
И еще, скорее вопрос риторический, т.к. даже в официальной документации, которая невероятно скудна по Sublime Text 2, нельзя найти хотябы списочка этих scope, к примеру при создании сниппетов, можно указывать scope,т. е. контекст в котором они действуют, к примеру
этот сниппет будет действовать только в коде на python как я понял. Тот же source указывается в файлах темы, для обозначения подсвечиваемых элементов. Эх, если бы хотябы списочком автор написал это все) Интересно как вообще темы делают, или у меня не оттуда руки, чтобы в исходниках проги найти все эти scope определения?) Возможно :)
Это нужно на официальном форуме спрашивать, правда английский нужно знать. Там наверняка кто-то подсказал бы.
Насколько я понял, там суть в следующем. У каждого синтаксиса есть файл с расширением
.tmLanguage
, в котором указаны обозначения для тех или иных частей кода. Вот эти обозначения и используются в файле цветовой схемы. В общем, все очень сложно.Да уж, открыл CSS. tmLanguage и ужаснулся =)
Я чего-то недопонимаю или один сниппет = один файл с расширением
? Если я хочу много и сразу и чтобы все в одном месте? :)
Поспешил я с вопросом) Если нужно много сниппетов в одном, юзаем Completions, расширение. sublime-completions http://sublimetext.info/docs/en/extensibility/completions.html Только, как я понял, эти дополнения должны быть только в одну строку? Т.к. эти строчки добавляются в стандартный механизм автокомплита?
И насчет Scopes, в документации говорится о том, что идея позаимствована от TextMate, который на маках, и отправляет нас на сайт TextMate, в раздел мануала, где также есть мануал по созданию тем для TextMate, которые подходят кстати и для Sublime
Да, вот пример:
Я сделал следующим образом. Если сниппеты небольшие, то размещаю их в один файл
.sublime-completions
, если же они большие, то каждый из них размещаю в отдельный файл.sublime-snippet
.Со scopes я вообще не заморачиваюсь, и просто не указываю его,т. е. мои сниппеты работают везде.
Я все еще не успокоился :) Возможно я останусь без ответа, но все же.
Я пишу CSS в подобном иерархическом виде:
Для этого у меня закрывающая скобка табиться должна. В Eclipse я справился с этим, да и убыстрил создание скобок с помощью сниппета.
Тоже самое сделал и в Sublime, но, в этом редакторе для сниппетов существует одна фишка, если вы развернули сниппет будь он с плейсхолдерами или без, последний таб всегда приходится на перенос курсора перед самым последним символом сниппета. Что в моем случае с заданием скобок никак не допустимо, так как я, развернув сниппет со скобками сразу же начинаю набирать в нем аббревиатуры Zen Coding или свои CSS-сниппеты. Но, вместо того, чтобы по табу сниппет разворачивался — курсор ставиться вконец сниппета-скобок, за закрывающую скобку.
Решение есть, но оно медленное. Сбросить фокус с предыдущего сниппета конечно помогает Esc-клавиша, но это сильно тормозит набор. Может есть какая-то настроечка, чтобы курсор не табился в конец сниппета после его набора?
Так можно же задать в сниппете, где будет стоять курсор после вставки.
Конечно можно, я так и делаю)
Но дело в том, что в любом сниппете последний таб, как я уже написал будет переносить курсор перед последним символом сниппета, прежде чем сниппет «потеряет фокус». Поэтому если ты развернул один сниппет, и сразу же хочешь развернуть в нутри этого сниппета второй сниппет, без нажатия Esc-клавиши, чтобы предыдущий сниппет потерял фокус и курсор не перепрыгивал в конец первого сниппета, развернуть в этом случае второй сниппет не получится, курсор перепрыгнет и установится перед последним символом первого сниппета-родителя вот так, к примеру:
http://clip2net.com/clip/m0/1 336 220 777-clip-4kb.jpg
вот, к примеру, я развернул сниппет со скобками и тут же написал аббревиатуру следующего, но сейчас елси нажму таб, курсор прыгнет на место после закрывающей скобки, вот здесь в строке состояния хорош видно, что предыдущий сниппет со скобками все еще ждет второго нажатия clip2net.com/clip/m0/1 336 220 889-clip-7kb.jpg
Решил проблему) Оказывается я невнимательно читал доки) sublimetext.info/docs/en/extensibility/snippets.html
$ 0 не даст курсору перескочить в конец сниппета, всегда означает последний таб, если необходим плейсхолдер вот так тоже сработает ${0:какой_то_текст}
Ну вот, отлично. Похоже, я все-таки неправильно понял, в чем была суть =)
Теперь я понял, а чем речь. Да, это неприятный момент.Т. е. приходится нажимать столько табов, сколько задано в сниппете, прежде, чем таб сработает, как отступ. Мне это тоже не нравится, когда вставляю html-сниппеты.
Настройки, связанной с этим, по-моему нет. Тут нужен специалист, разбирающийся в питоне.
Кто-нибудь знает как в Саблаймовском редакторе настроить Zen Coding, чтобы он не ставил пробел после двоеточия в CSS-свойствах?
Вот сейчас только обнаружил (случайно. Слетели конфиги np++ - полез в настройки и нашел)? что в np++ оказывается тоже есть мульти-редактирование)).
Я вообще думаю, что эта шумиха с ST2 пошла в большинстве своем от гуру-маководов, ST2 ведь кроссплатформенный, а до этого серьезного противопоставления TextMate маковскому не было, а у пользователей окошек давно Notepad++ был и платить за него не нужно:) Хотя с плагинами там не очень конечно.
Ну так хорошо, что пошла. Конкуренция производителей ещё ни разу не вредила конечному пользователю, коими мы с вами в данный момент и выступаем))
Интересный редактор.
Здесь находится ежедневно обновляемая тестовая версия www.sublimetext.com/dev (официальный сайт).
Ну уж никак не ежедневная. Всего несколько раз в месяц.
Ага, только я альфа-бета-тестировщиком быть не желаю :) Я хочу стабильности вработе. Так, что если вам нужен законченный продукт на определенный момент, качайте более-менее законченные версии, а необкатанные дев-билды ;)
Сколько версий (много) подряд пользуюсь dev версией, никаких проблем не разу не возникло. Так, что не переживайте, там все в порядке ;)
Я дорожу своим временем и стараюсь обезопасить себя от возможных его потерь, поэтому dev-версиями никогда сознательно не пользуюсь.
А как же Edit+? Тоже очень удобный! Рекомендую! Пользуюсь уже лет 7!
А где взять такую цветовую схему как на ваших скриншотах? Перещелкал все схемы, похожей не увидел.
Я сам сделал эту схему. Скачать можно отсюда — narod.ru/disk/51 342 293 001.afb7a1c97d1b65e78c72fefbc75ee7e8/Dimox.tmTheme.html
А я вот все на Notepad+ сижу, привык, даже статьи в нем пишу, хотя проверка орфографии довольно кривая и я ее так и не смог настроить.
Из плюсов нравится фичи по работе с кодом:
1. сортировка линий по 1 букве в алфавитном порядке
2. удаление лишних пробелов
3. удаление переносов строк
2. вырезка всего html кода (остается лишь голый текст)
4. JSmin позволяет сжать и минимизировать любой JS код скрипта, и не только…
5. Про подсветку начальных и конечных тегов я уже не говорю, она мне кажется в любом редакторе кода должна быть по умолчанию
Есть ли выше перечисленные функции в сублиме?
А вообще еще хотел бы еще иметь в редакторе тулзу для конвертации изображений в base 64, а то достало постоянно все это делать онлайн.
Кстати я сейчас на своем блоге в очередной дцатый раз дизайн переделываю, все-таки решил вернуться на html5 и пару идей у тебя решил позаимствовать (в том числе семейство шрифта, цветовую схему и оформление заголовков), надеюсь ты не обидишься, да и в футере написано что только перепечатка запрещена ведь… :)
Или ссылку из футера надо: «оформление ссылок и заголовков by dimox.name»? :)
1. Если я правильно понял, то сортировка есть.
2. Если речь про пробелы в конце строк, то есть опция «удаление этих пробелов при сохранении файла».
3. Не знаю. Не понимаю, в чем тут суть. Наверное, это то же самое, что 2-й пункт.
4,5,6. Есть (через плагин).
Согласен, мне тоже не хватает.
Не обижусь, если не будет передирания дизайна.
Ну смотря как понимать это «передирание», к примеру стиль заголовков css3й содрал как есть, очень уж понравилось как у тебя они смотрятся, тебе поможет если одну циферку цвету изменю? Думаю нет. Че еще стыбрил, дай подумать, о шапку в басе64, правда пришлось все равно ее переделывать с другой высотой и по новой перекодировать, но цвет получился похожим, так, что можешь все-равно подумать, что содрано у тебя.
А так, че еще с бедного вебмастера возьмешь, нечего… свобода слова…
Ах да цвет ссылок и шрифт — самое главное, из-за чего и пошла вся карусель, ну я обычно идеи беру только у лучших, мой прежний вариант — стиль Гоогле, так что в этом плане, можешь даже немножко приподнять нос. Только немножко я сказал! А не так как ты сейчас, выше монитора :)
Доработаю тему, все равно сошлюсь на ваш блог Дима, он очень многое мне напомнил, про то, что я знал, но в своей погоне за трафиком совсем забыл…
Ясно, окей.
Всё равно Notepad++ остается кумиром для меня.
Саблайм рулит. Пользуюсь уже около полугода, всем доволен кроме отсутствия автокомплита при работе с проектом на PHP, где много ООП.
Единственный недостаток саблайма — отсутствие возможности расположить поверх всех окон.
Часто есть необходимость копипастить большое количество табличных данных или вносить мелкие правки и очень неудобно, когда окно «убегает» из поля зрения и его приходится вновь разворачивать.
Неплохой редактор, даже очень, но все же Notepad++ лучший в своем роде, да и бесплатность его играет немаловажную роль. Вот только жалко, что Notepad++ в Linux, только под Wine работает.
Крайне рекомендую ознакомится с горячими клавишами Sublime, и поработать часов 20 в этом редакторе. Sublime делает Notepad++, как стоячего. Прошу учесть, что я работал в Notepad++, более того, писал для него плагины на Python, знаю что говорю. Sublime чертовски красивый, настраиваемый, позволяет работать чисто на клавиатуре, но при этом его шоткаты гораздо удобнее того же Emacs.
Просто попробуйте его в работе.
По этой ссылке — перевод небольшого набора шоткатов под Sublime. Надеюсь пригодится. Удачи!
Никак не могу нигде найти, как создать свой сниппет в саблайме. Подскажите, пожалуйста! Приходится извращаться с автозаменой из PuntoSwitcher, которая иногда кривовато работает.
Сниппет можно создать двумя способами:
1) В папке \Sublime Text\Data\Packages\User\ создаем файл с расширением .sublime-snippet и вставляем в него вот такой код:
триггер — это сокращение, по которому будем вставлять сниппет.Т. е. вставка сниппета происходит по схеме: пишем триггер + нажимаем Tab.
<scope>source.css</scope>
— эта строка указывает, в рамках какого языка будет действовать триггер. Здесь указано, что в CSS-файлах. Если нужно, к примеру, в JS-файлах, тогда в этой строке поменятьcss
наjs
. Если же нужно, чтобы работало везде, тогда удалить эту строку.Если в коде сниппета встречается символ
$
, то его нужно экранировать, т. е писать вот так:\$
.2) Сниппеты также можно вставлять горячими клавишами. Тогда в файл Default (Windows).sublime-keymap (если работаем на Винде) добавить строку следующего вида:
Думаю, тут объяснять ничего не нужно.
Dimox, огромное спасибо! Такой классный редактор — и такой был облом со сниппетами! Ничего подобного, в плане инструкций, не мог найти, только косвенные указания. Про расширение файла — для меня открытие. Я все пытался через Preferences — User Default, ясень пень, ничего не вышло.
Спасибо!
Пожалуйста! Инструкции есть, но они все на английском, по ним я и разбирался.
Основные параметры конфигурации на русском
Действительно очень удобный редактор. Хотя порой к старым превыкаешь сильно
Осваиваю и с каждым кликом мне этот редактор всё больше и больше нравится.
Установил Poackgage Manager — теперь вообще одно наслаждение пользоваться редактором.
Смущает лишь не совсем удобное закрытие фигурных скобок в css, но для css я всё же не планирую использовать sublime, для css его не хватает. А вот html и php — очень порадовало, особенно мультиввод совместно с ZenCoding (кстати удобнее сделан чем в np++ и TopStyle). И что ещё более ценно — нормально работает punto switcher при мультивводе и табуляция — что вообще поднимает удобство набивки множества одинаковых текстов на небывалую высоту!
Кстати (немного не в тему но.) для русификации меню после установки плагинов достаточно поменять текст
в файле ИМЯПЛАГИНА. sublime-menu на
правда после обновления плагина наверняка отвалится, если логически подумать)))
Хм, непонятно, что тебя не устраивает в работе с CSS, у меня все прекрасно, никаких затруднений не испытываю.