Пользователь
0,0
рейтинг
13 октября 2012 в 18:32

Разработка → Готовим Sublime Text 2 для front-end

Ни для одного опытного программиста или верстальщика не секрет, что настроенная под себя среда разработки (не в смысле IDE, а в более общем) — жизненная необходимость. Было время, когда я делал очередную верстку в практически голом Notepad++ на единственном мониторе, поочередно открывая Photoshop, браузер и редактор. Сегодня, в эпоху «автоматизации всего», мне сложно представить, как вообще можно было так работать.

Sublime Text 2 — популярный расширяемый кроссплатформенный текстовый редактор, для которого написано множество плагинов если и не на все случаи жизни, то на многие. В этом посте я попытаюсь рассказать как из этого конструктора сложить удобный инструмент front-end разработчика для работы с HTML, CSS и JavaScript. Небольшой дисклеймер: я работаю на Mac OS X, поэтому в каких-то «кроссплатформенных моментах» могу что-нибудь не договорить, но постараюсь представить полную информацию. И еще: на истину в последней инстанции не претендую и жду ваши варианты.



Чтобы лучше понимать, где и о чем пойдет речь, представлю сначала структуру статьи:
Введение
Описание основных моментов, необходимые ссылки и т. п.
Плагины
  • Основные плагины — в этом разделе речь пойдет о том, что, на мой взгляд, должно быть установлено в большинстве случаев, в общем must have.
  • Дополнительные плагины — просто полезные расширения; здесь я представлю то, что понравилось мне, но этот список в каждом конкретном случае может специализироваться под ваши задачи и предпочтения, поэтому смотрите на аналоги, ищите новое, в общем кастомизируйте.

Live reload и поддержка CSS-препроцессоров
Почему две такие разные вещи я объединил в один раздел? Всё из-за специфики некоторого софта, о котором я расскажу позже. Live reload (или live preview), если вдруг кто-то не знает, это просмотр в браузере того, что вы сделали в редакторе, без необходимости обновления страницы, т. е. автоматически. Под поддержкой CSS-препроцессоров я подразумеваю добавление в Sublime Text 2 поддержки синтаксиса SASS/SCSS, LESS, Stylus или чего бы то ни было еще из того, что вы предпочитаете использовать, а также организация автоматической компиляции всего этого добра (build/watch system). На самом деле, всё это объединено в один раздел не только из-за описанной выше причины, но еще и потому, что моей (думаю, вашей тоже) целью было сделать так, чтобы можно было изменить что-то, например, в scss-файле, сохранить его и тут же посмотреть результат в браузере, т. е. автоматизировать процесс компиляции и обновления страницы. А значит мы имеем цепочку «сохранить файл» > «скомпилировать» > «обновить», что вполне логично укладывает всё это в один раздел статьи.

Введение


Для того чтобы комфортно устанавливать, удалять и обновлять плагины используется Sublime Package Control, его установка очень проста и описана на этой странице. Практически все плагины, которые могут вам понадобиться, есть в Package Control, поэтому их удобно искать здесь. Я не советую игнорировать этот плагин и ставить что-то вручную, разве что у вас будет на это особенная причина. Можно сказать, что Package Control сейчас стандарт де-факто для Sublime Text 2.

Все представленные плагины размещаются на GitHub, практически у всех есть readme, которое лучше читать. Описывать все тонкости здесь не имеет смысла, ведь всё меняется, поэтому в этой статье я буду давать небольшое описание, а подробности прекрасно описывают сами авторы плагинов.

Плагины


Основные плагины


ZenCoding
ZenCoding вряд ли нуждается в комментариях, не так ли? Начатый в 2008 году pepelsbey, этот  «ускоритель написания кода» сэкономил страшное количество времени разработчиков. С тех пор реализован в виде плагинов для многих редакторов и IDE.

Не так давно у плагина ZenCoding появился наследник — Emmet. Как подсказали в комментариях, он уже достаточно стабильный, чтобы его использовать.

SublimeLinter
Этот плагин добавляет поддержку lint для многих языков, в том числе HTML, CSS и JavaScript. Для лучшей работы установите node.js, подробнее об этом читайте в readme на GitHub. Вообще, это один из плагинов, readme к которым лучше читать полностью.

SublimeCodeIntel
Приближает возможности Sublime Text 2 к возможностям IDE, добавляя «code intelligence» и «умный autocomplete», в частности добавляет возможность быстрого перехода к объявлению, autocomplete для import'ов и отображение информации о функции в статусной строке.

Alignment
Этот плагин от автора Sublime Package Control делает простым выравнивание многострочных и множественных выделенных участков кода.

CSSComb
О CSSComb подробно можно прочитать на хабре. Этот полезный инструмент причешет ваш CSS, расположив свойства в заданном порядке и разбив их на группы.

HTML5 и jQuery
Это наборы сниппетов тегов HTML5 и методов jQuery, полный список которых можно посмотреть в Tools > Snippets.

JsFormat
Плагин для форматирования JS/JSON-кода, использующий сервис jsbeautifier.org и имеющий довольно гибкие настройки. Форматирует выделенный участок кода или весь файл, если выделения нет. Проверку на то, есть ли у файла расширение *.js, не осуществляет, так что использовать нужно с осторожностью.

Minifier
Minifier умеет минифицировать JavaScript (Google Closure Compiler или UglifyJS) и CSS (Reducisaurus). Весь плагин заключается в двух комбинациях клавиш, одна сохраняет результат в текущем файле, а вторая в отдельном с именем name.min.ext.

Prefixr
Однозначный must have для тех, кто не пользуется препроцессорами, да и всем остальным тоже пригодится. Добавляет там, где нужно, вендорные префиксы (и даже в правильном порядке) с помощью сервиса prefixr.com. Работает просто — пишете свойство без префиксов, нажимаете комбинацию клавиш и готово.

SideBarEnhancement
Как понятно из названия, добавляет некоторые полезные улучшения в сайдбар, например, пункт контекстного меню сайдбара «Open with...», позволяющий открыть файл в сторонней программе.

Дополнительные плагины


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

EncodingHelper
Помимо прочего, отобржает кодировку открытого файла в строке статуса. В общем-то это единственная причина, по которой я установил этот плагин, но у него есть и другие возможности, например, он умеет предупреждать о том, что файл, открытый в неправильной кодировке, может быть поврежден.

Placeholders
Часто ли вам приходится вставлять в код рыбы? Всем любителям lorem ipsum этот набор сниппетов однозначно пригодится. Кроме простого текста, умеет вставлять параграфы, списки, картинки и т. д.

Theme — Soda
Это моя субъективная рекомендация обладателям Mac OS X. Тема Soda оформляет интерфейс Sublime Text 2 в нативном стиле. Есть две цветовые вариации — Light и Dark, а также поддержка Retina-дисплеев. Впрочем, тема доступна для трех ОС.

Live reload и поддержка CSS-препроцессоров


Здесь всё довольно неоднозначно. С одной стороны, есть поддержка live reload и watch/build system с помощью плагинов (первое у меня так и не заработало), а есть несколько отдельных программ, которые, помимо live reload, умеют следить и компилировать файлы всевозможных препроцессоров. При этом функционал у них (в плане возможностей, предоставляемых GUI), совсем разный, а еще разная стоимость. Кто-то умеет всё вплоть до оптимизации изображений, а кто-то не умеет и половины, зато бесплатно. В целом же всё сводится к тому, чтобы подобрать для себя оптимальный вариант, в чем я и постараюсь вам помочь ниже.

Поддержка синтаксиса


Для начала забудем о сложностях и просто сделаем подсветку синтаксиса для нужных нам препроцессоров. Для каждого есть свой плагин, так что всё, что требуется сделать, это выбрать нужное: LESS, SASS и SCSS, Stylus (здесь еще и build system в комплекте).

Плагины


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

Автоматическая компиляция


Начать лучше не с непосредственного добавления тех или иных build systems в редактор, а с плагина SublimeOnSaveBuild. Всё, что он делает, заключается в автоматическом запуске Build (в меню это Tools > Build) для выбранной вами Build System в момент сохранения файла.

Что же касается добавления Build Systems, здесь всё аналогично поддержки синтаксиса, выбирайте нужное: LESS-build, SASS Build (и, конечно, Compass).

Live reload


С этим в плане плагинов к Sublime Text 2 не так радужно, точнее есть только один LiveReload (не путать с программой ниже), который у меня благополучно не работает. Точнее не работает расширение для Chrome (расширение для Safari не тестировал, а поддержки других браузеров нет), ну и в целом он уже давно не обновлялся. Возможно, кто-нибудь знает, как его готовить и подскажет в комментариях, но лично мне было лень разбираться подробнее, поэтому я пришел к использованию отдельной программы для «живого просмотра» и компиляции.

Отдельные программы


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

LiveReload


Возможности
LiveReload, во-первых и как следует из названия, умеет следить за изменениями файлов и обновлять их в браузере, а во-вторых, автоматически компилировать если и не всё, то многое: LESS, SASS, Compass, Stylus, CoffeeScript, IcedCoffeeScript, Eco, SLIM, HAML, Jade. Для самого live reload необходимо установить прилагающееся расширение в браузер, есть версии для Safari, Chrome и Firefox.

Кроссплатформенность
В целом программа для Mac OS X. Есть версия для Windows, но сегодня она представляет из себя pre-alpha версию. Для Linux предлагается использовать guard-livereload.

Цена
Версия для Mac OS X стоит $9.99 в App Store, есть и бесплатный триал. Версии для Linux и Windows бесплатны.

CodeKit


Возможности
Эта программа предоставляет самые широкие возможности и, в общем-то, самый удобный и функциональный GUI. Умеет live reload без расширений для браузера, автоматически компилировать Less, Sass, Stylus, Jade, Haml, Slim, CoffeeScript, Javascript и Compass; объединять и минифицировать скрипты, оптимизировать изображения и т. д.

Кроссплатформенность
Её нет, программа только для Mac OS X.

Цена
$25. Есть бесплатный триал.

Scout


Возможности
В отличие от других программ, Scout умеет только компилировать SASS и Compass, зато в его GUI можно задать Output Modes, и он бесплатен.

Кроссплатформенность
Есть версии для Windows и Mac OS X, на этот раз версия для Windows полноценная. Для Linux, к сожалению, версии нет.

Цена
Бесплатно.

Лично я остановил свой выбор на LiveReload, несмотря на то, что CodeKit более функционален. Частично я заменил эту функциональность плагинами к Sublime Text 2 (всё-таки эта статья о Sublime), а остальное мне и не нужно (есть веб-сервисы или просто не пользуюсь).

Думаю, многим будет интересно узнать о других вариантах «среды front-end разработки на базе Sublime Text 2», так что предлагаю поделиться своими подборками плагинов в комментариях.

UPD. Live edit с помощью плагина к самому SublimeText 2 организовать все-таки можно: используйте описанный в посте плагин совместо с расширением для браузера от программы LiveReload. Также есть сведения, что dev-версия плагина работает лучше. Таким образом, можно весьма полноценно обойтись без утановки дополнительного софта, т. е. только плагинами.

В комментариях упоминалось, что я не написал про плагины VCS и SFTP. Дело в том, что это нужно либо не всем, либо разное (кому-то Git, кому-то SVN, кому-то ничего не надо). Ну а так как все плагины названы в честь самих технологий, поддержку которых они добавляют, найти их не составит труда при необходимости.

И напоследок список плагинов, которые порекомендовали в комментариях (и ники сделавших это пользователей, конечно):
  • Bektimirov: LiveCSS. Добавляет визуальное отображение задаваемых в CSS цветов.
  • CyberAP: SublimeFileDiffs. Добавляет функцию сравнения файлов.
  • roman01la: YUI-Compressor. Еще один плагин для минификации JS и CSS, использующий для этого одноименный инструмент от Yahoo!.
  • JCHouse: SublimeTODO. Пригодится использующим заметки в комментариях.
Дмитрий @weiss
карма
10,2
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Спецпроект

Самое читаемое Разработка

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

  • НЛО прилетело и опубликовало эту надпись здесь
    • 0
      Верно, жаль в Package Control еще нет.
      • 0
        Как это нет? Добавьте репозиторий github.com/sergeche/emmet-sublime
        • 0
          Конечно, но я в другом смысле)
    • 0
      Сырой вроде как еще
      • +4
        Уже вполне стабильный. Больше месяца не было сообщений о проблемах; в основном делаются мелкие доработки и улучшения.
        • 0
          Спасибо вам большое за труд, все замечательно работает.

          Если позволите есть feature request:
          Можно ли в emmet (zen-coding) добавить функцию которая бы сворачивала html код в css expression пригодное для обратного разворачивания в html. Это было бы удобно для добавления коментариев (полученных expression) в css для документации, а также в качестве готового темплейта для вставки в нужное место. Текст из такого expression можно исключить, оставив только теги с атрибутами.
          • 0
            Такие реквесты уже были, правда, народ хотел получить CSS-селектор для стилизации.

            Я завёл у себя тикет под эту задачу: github.com/sergeche/zen-coding/issues/93
            В основной релиз Emmet это не войдёт, возможно, в следующее обновление.
        • 0
          Добавил в пост.
          • 0
            Еще в качестве пояснения можно дописать, что если используете Emmet, надобность в Placeholders и Prefixr отпадает. Префиксы там (в Emmet) идут при раскрытии комбинаций в правильном порядке и не все подряд, а только необходимые. И рыба там теперь тоже есть.
        • 0
          У меня не поставился.
          Crash при старте.
          Sublime последний, 2.0.1 build 2217.
          OSX 10.8.2
          • 0
            Падает сам редактор? Можете открыть приложение Console и прислать мне лог крэша на serge.che@gmail.com?
            • 0
              Готово
              • 0
                У вас sublime v8 не стоит? У меня с ним не запускался, т.к. emmet как v8 использует. Правда для того чтобы у меня на х64 работало я х64 версию v8 как раз у emmet взял :)
                • 0
                  Да не. Нету такого) Package Control только после тестов emmet ставил.
                  Причем ZenCoding отлично работает.
                  По логам что-то с Питоном. Отправил лог Сергею, может поймет что не так.
        • 0
          За «level up» большое спасибо. Этого не хватало.
  • +10
    Если кому интересно. бесплатный исчерпывающий курс по Sublime — Perfect Workflow in Sublime Text 2
  • 0
    SublimeLinter насколько я понял просто валидатор для некоторых языков?
    • 0
      Вроде того, но он проверяет не только «валидность», но и соответствие кода определенным рекомендациям.
    • 0
      Запускатор, если быть точнее. код простой и легко расширяем.
  • 0
    Не хватает навигатора методов, переменных и т.п.
    • 0
      Cmd (Ctrl) + R -> прямо из коробки fuzzy-поиск по обявлениям методов\селекторов, но, к сожалению, только в пределах текущего файла.
      • 0
        Да, знаю. Маловата функциональность.
        • 0
          Для полной функциональности можете использовать github.com/SublimeText/CTags
      • 0
        Немного не так.

        Так же есть фича ctrl+P, которая позволяет искать файлы и указывать дополнительно строку или же метод, т.е. такую конструкцию поймет: app someClass @__construct.
  • 0
    Про плагин SublimeCodeIntel — у вас получилось заставить его работать с JS? У меня ни в какую не хочет.

    Ещё из плагинов я бы добавил в список плагин для работы с системой контроля версий. Например, в текущем моём проекте используется SVN и одноимённый плагин очень помогает.

    Также, есть отличный плагин SFTP — для работы с удалёнными серверами через SSH.
  • 0
    У меня постоянно Sublime выдает сообщения о различных плагинах, которые его, якобы, подвесили. В основном это относится к Sublime Linter. Кто знает как с этим бороться?

    Еще один полезный плагин для подстветки цветов прямо в коде CSS: LiveCSS
    • +1
      Именно подвесили, или замедляют работу? Если второе, то:
      «detect_slow_plugins setting»: false

      За LiveCSS спасибо! Давно искал что-то подобное, но все никак не находилось.
      • 0
        Оно, спасибо!
  • +2
    Блин, когда верстать то… одних плагинов миллион. Все сыроватое и не полное. Пока в NetBeans справляюсь. Автокомплит его меня устраивает. ctrl +Щелчек по стилу в html автоматом скролит лист к этому классу в css и прочие забавные фишечки.
    Да, он тормознутее сублима по загрузке. Для скорости у меня ноутпад++.
  • 0
    Оствлось только начать использовать препроцессоры шаблонов и выкинуть к чертям html снипеты.
    • 0
      А что вы подразумеваете под препроцессорами шаблонов?
      • 0
        Да хоть тот же bem-tools. На самом деле я даже не знаю других более-менее гибких и открытых препроцессоров для шаблонов. Для себя я писал свой препроцессор на базе haml'а с компиляцией в шаблоны целевой платформы — первый прототип накидал за выходные и избавил себя от необходимости писать сниппеты, zencoding'и и захламлять репозитарий сгенерированным кодом.

        Для Django есть даже всякие странные поделки типа github.com/jessemiller/HamlPy

        Таких утилит весьма много, но мало из них доведены до удобного workflow.
        К счастью парсеров открытых море и за недельку вы сможете собрать свой препроцессор.

        Если найдёте что-то ещё более интересное, обязательно напишите — буду рад узнать.
  • +3
    Мне кажется чем делать из текстового редактора IDE, проще взять настоящую IDE. Sublime — отличный тектовый редактор, но не IDE, и даже не основа для IDE.
    • 0
      В чем же реальные преимущества IDE для верстальщика, например?
      • +3
        Я сравниваю IDE, сделанные изначально как IDE (см. тот же webstorm), и IDE, сделанные по кусочкам любителями из текстового редактора. По моему опыту настоящая IDE работает лучше как IDE. А тектовые редакторы работают лучше IDE как текстовые редакторы, при условии что в них не насована пара десятков плагинов в попытке сделать из них IDE. Как-то так.
        • 0
          А тектовые редакторы работают лучше IDE как текстовые редакторы, при условии что в них не насована пара десятков плагинов в попытке сделать из них IDE.


          Если в Vim установить пару десятков плагинов, то он станет как-то хуже работать, потеряется часть команд, или что?
      • +1
        Смотря какие масштабы верстки. Кое-где и история версий пригодилась бы, что в IDE присутствует по умолчанию.
        Присмотритесь к WebStorm — на мой взгляд одна из лучших IDE для фронтенда.
        К слову, LiveEdit и Emmet в ней идут «из коробки».
        • 0
          Как раз с Webstorm (точнее Phpstorm) я и перешел на Sublime. Добавление истории версий реализуется простой установкой плагина нужной VCS.
          • +1
            Надо же, а я перешел наоборот: Sublime → PhpStorm
            Мне кажется, PhpStorm выигрывает по авто-дополнению в больших проектах. И форматирование кода как мне надо, удалось настроить только в этой IDE.
            Но каждому свой набор «ключей и отверток» :-)
            • –1
              Да даже Aptana на текущий момент мне удобнее)
              Emmet там также «из коробки», как модуль Eclipse.
          • 0
            А как быть с авто-комплитом?
            + в sublime css классы не предлагаются при вводе (из всех тех css файлов, что есть в проекте).

            Насчет php не смотрел, но html уже оч серьезно, шаблоны неудобно верстать.

            Если эту проблему решить и в php комплит настроить, то sublime оптимальный вариант.
            Поскольку git плагин там прекрасно работает.
            • 0
              CSS-классы предлагаются только те, что есть в файле, да (может и есть какой плагин, не знаю, но мне это просто не нужно, а сами классы вообще-то задаются в html, почему автокомплит должен работать на основе других CSS-файлов?). А что не так с автокомплитом HTML?
              PHP я тоже не смотрел, мне его поддержка на уровне IDE здесь не нужна, тем более пост про front-end.
              • 0
                Ну сами классы обычно хранятся в css файлах.
                Конечно Sublime сейчас уже удобнее textmate, который отходит на второй план.

                Просто до Lite IDE недалеко) Почему бы и не добить.
                • 0
                  Думаю, важно понимать то, что это текстовый редактор, а не IDE. Да, с помощью плагинов функционал можно приблизить, но если вам нужна IDE, то зачем тратить на это время и в результате получать всё равно не всё, что хочется? Если бы я писал на, скажем, PHP, то делал бы это в IDE, но для front-end лично я считаю функционал IDE несколько излишним, например, зачем мне поддержка трех VCS, если сейчас в работе я не пользуюсь ни одной из них? Или зачем мне тащить за собой Java 6 для Webstorm, если мне хватает Sublime? Повторю, что это мои личные капризы, и многие могут не согласиться, но ведь никто никого и не принуждает)
  • +1
    Хоть убейте, но не могу привыкнуть к ZenCodding, привык ручками вносить, чтобы видеть что печатаю + автокомплит работает вполне хорошо.

    п.с. В большей степени работаю с css, возможно как раз поэтому мне он не очень нужен.
    • 0
      Даже ul>li*5>a не используете? Автокомплит, конечно, ускоряет ввод, но не избавляет от повторных действий (в примере пришлось бы вводить или копировать одинаковые элементы списка со ссылками).
      • 0
        А настолько ли часто требуется ul>li*5 чтобы держать в памяти этот доп. синтаксис?

        Я вот в восторге был от zencoding, разобрался с ним, включая всякий хитрый синтаксис и доп. шоткаты. В результате юзал ну может раза два-три на практике. Правда я html не верстаю в промышленных масштабах.
        • +1
          Я бы сказал очень часто, ну и доп. синтаксис весьма прост, по крайней мере в таких базовых применениях. Ну и списками сыт не будешь, проще ведь написать div.class, чем <div class="class"></div>, разве нет?
          • 0
            я, например не понимаю почему бы не сократить до «d.c» это же логично.
            • 0
              В div.class class это имя класса, а не атрибут.
            • 0
              Думаю, можно для себя такой сниппет сделать, но это уже действительно нужно запоминать, предлагаемый формат — интуитивно понятен.

              Ну а если уж совсем вдаваться в детали, то под d подходит и dl,dt,dd (хоть они и не так часто встречаются, но все же).
              • 0
                да в идеале вообще чтобы как в ворде, редактор отображал только сокращеный код а при сохранении нормальный html. А кстати? Если доктайп переписать? Не там ли идет разбор полетов с тегами? Заменить весь доктайп на ZenCoding — дело в шляпе и в исходном коде)
                • +1
                  > редактор отображал только сокращеный код а при сохранении нормальный html
                  Haml
              • +1
                > интуитивно понятен.
                Раскрывая секреты, не знаю чьи, я хочу сказать что слово " DIV " ничем не отличается от иконки. Работает для восприятия точно так же. Это просто образ — паттерн. Так нафига париться с написанием. предлагаю на корню отображать вместо div корпич. Ну чем не интуитивно?)


                Нажал d — получил кирпич в редакторе.
                Ну согласись? Тут и привязка к форме, и привязка к цвету. А вот слово для восприятия мозга требует большей нагрузки. Именно снять для мозга такую лишнюю нагрузку — моя мечта для среды разрботкт будущего)
                • +2
                  Простите, но это легкая наркомания, по-моему :)
                  • 0
                    Это фантазии) Ну ведь что такое теги? Это теже иконки. Просто образ выражается через знакомые нам текстовые символы.
            • 0
              еще с zencoding это сокращено до ".class"
          • +3
            Можно быстрее — .class, «тегом по-умолчанию» является div.
            • +1
              А две точки td, три точки tr, четыре точки table )
              Этож брейнфак! Но посути, для новичка исходный код страницы — тот же брейнфак. Дело привычки)
              • +1
                Скажем так, zen-coding задумывался для «разворачивания» селекторов css. Это потом он уже оброс дополнительными фичами. Если вам их трудно освоить синтаксис css + держать пару шорткатов в голове, то как вы верстаете?

                Кстати да, если элемент в селекторе будет ребенком инлайнового — разворачивает в спан.

                Было бы круто ввести контектсность (для некторых элементов по умолчанию):

                ul>.class = ul>li.class
                table>tr>.cell = table>tr>td.cell
                и т.д.
            • 0
              Иногда, правда, span.
      • 0
        Для повторных действий ещё очень полезно Duplicate Line (⇧⌘D)
        • 0
          Хорошая штука, но «foo*n» писать удобнее при n ≥ 3.
      • 0
        Я для этого п.с. написал. Суть в том, что такие конструкции чаще всего уже внутри фреймворка, редко приходится с нуля что-то клепать.
    • 0
      В новую версию под названием Emmet была добавлена поддержка CSS: github.com/sergeche/emmet-sublime#css
      • 0
        А зачем? Автокомплит позволяет тоже самое, печатаю b, он предлагает первым делом background, вторым border, вручную ввести значение совсем не проблема… Да, быть может, если привыкнуть, то получится быстрее. Но, пока что меня вполне устраивает работа без Зена.
    • 0
      Так в плагине есть такая фишка. По умолчанию жмем ctrl+alt+enter и вводим внизу команду, наблюдая во что она по мере набора разворачивается в документе.
  • +2
    Ещё очень полезный плагин: SublimeFileDiffs, добавляет функцию сравнения, которой так не хватает.
  • +1
    Не был упомянут SFTP (синхронизация файлов с ftp).
    Для минифицирования использую YUI Compressor.
  • 0
    Как вы вывели эту панель со списком файлов слева? Я ее как-то закрыл и теперь не могу снова открыть.
    • 0
      Это View > Side Bar.
      • 0
        А у меня оно открывает только пустую панель. Не дерево файлов.
        • 0
          В Open Files показываются текущие открытые файлы. Если открыть папку, то подхватится всё, что в ней лежит (появится в Folders), также себя сайдбар ведет с проектами, т. е. отображает всю структуру проекта.
        • 0
          Перетащите туда папку и/или добавьте папку в проект.
  • +1
    А еще меня бесит, что при открытии остается 100500 не закрытых в прошлой сессии вкладок. Можно как-то заставить его не запоминать открытые вкладки?
    • 0
      Можно, поменяйте в Preferences.sublime-settings две настройки:
      "hot_exit": false,
      "remember_open_files": false,
      • 0
        Только в таком режиме не запоминается открытый(-ые) проекты.
        • –1
          И слава богу
    • 0
      Так закрывайте за собой файлы. Можно даже сочетание клавиш настроить на закрытие всех файлов или даже на закрытие всех файлов и выход.
      • 0
        Cmd+Shift+P -> «close all» + enter == File: Close all.
        При использовании набираемая строка сокращается до «cl» + enter.
        • +1
          Я Command Palette забиндил на F1. Стало удобней. Мизинчиком чик на кнопочку…
          • 0
            Кажется, у меня что-то не то с пальцами… Не представляю, в какой позе надо держать руки на клавиатуре, чтоб мизинчиком было удобно тянуться в самый верхний ряд клавиш.
            Можно фото? %)
            • 0
              Вполне удобно, может быть у вас клавиатура слишком большая (это политкорректный вариант предположения о длине пальцев). :)
              • 0
                Макбук 13", если что.
                Просто лично мне, чтобы нажать мизинцем F1 надо либо кисть поворачивать по часовой стрелке, либо всю кисть сдвигать вверх — обе операции сильно затратные по сравнению с обычными движениями при печати.
                • 0
                  Так у меня та же машинка, по-моему мизинцем как раз очень удобно, правда по-умолчанию на F1 забиндено уменьшение яркости дисплея.
            • 0
              Может у меня пальцы длиннее ваших? :)
    • 0
      Можно помимо прочих советов, вызвать меню на вкладке и закрыть остальные, к примеру.
  • 0
    LiveReload я себе настроил с помощью программы AutoHot Key, в которой забил скрипт обновления браузера по сохранению в редакторе. После некоторых мучений, работает нормально.
  • 0
    Скажите, а Sublime Text бесплатен для использования на рабочем компьютере для рабочих целей, соответственно?
    • 0
      Sublime платен для любых целей, но триал у него бесконечный и единственные его ограничения заключаются во всплывающем иногда при сохранении окошке, напоминающем о покупке, а также слове UNREGISTERED в заголовке окна.
      • 0
        Т.е. если я буду пользоваться им даже в коммерческих целях (всплывающие окошки не мешают), то никакой ОБЕП ничего не напакостит?
        • 0
          Что касается выбора персональной или бизнес-лицензии, этот вопрос освещается в sales faq достаточно подробно. А вот про триал я ничего не нашел в таком контексте. За ОБЭП ручаться не могу, но здравый смысл подсказывает, что раз на сайте Sublime триал «один для всех», то вы ничего и не нарушаете. К тому же там есть такое предложение:
          Sublime Text 2 may be downloaded and evaluated for free, however a license must be purchased for continued use. There is currently no enforced time limit for the evaluation.

          Т. е. время, в течение которого вы можете «оценивать» программу, неограниченно.
          • 0
            Думаю, что суд может сказать, что если редактор активно используется много месяцев, то его надо было купить. Но вряд ли его цена будет решающей, скорее будут придираться к Винде и Фотошопу, ведь они гораздо дороже.
            • 0
              Винда и фотошоп как раз таки лицензионные. Но вот «уломать» начальство купить редактор — не так просто.
              Хотя, есои все устроит — то 60 баксов это не много для меня )
  • 0
    Что-то не получается «Соду» прикрутить.
    Вроде бы всё делал по инструкции отсюда.
    Поставил пакет «Theme — Soda».
    В «Package Control -> Settings — User» добавил, как просили.
    Получается нечто вроде:
    { "auto_upgrade_last_run": 1350206568, "installed_packages": [ "DuplicateSelections", "Package Control", "Theme - Soda" ], "theme": "Soda Dark.sublime-theme" }

    Пробовал дома на Маке и на работе на Линуксе. Специально установил dev версию, т.к. было написано, что работает с dev веткой.
    • 0
      У меня встала по инструкции, устанавливал из Package Control.
      • 0
        Какая версия SublimeText?
        • 0
          2.0.1
          • 0
            Разобрался. Невнимательность. Пришлось посмотреть видео-инструкцию на тытрубе, чтобы понять, где косяк.
  • 0
    А есть для него какойто плагин, чтобы просматривать ФТП в сайдбаре?
    А то не удобно каждый раз Browse Remote… делать из SFTP/FTP
    • 0
      Через SFTP можно удалённый сервер примаунтить к какой-нибудь папке и он будет автоматически её синхронизировать туда-сюда, и, соответственно, эту локальную папку можно будет добавить в сайд-бар. Но это не просмотр через сайд бар, а именно синхронизация, т.е. файлы с сервера выкачиваются на локальную машину, а при сохранении изменённые закачиваются обратно.

      Но, лично я, сайд-баром пользуюсь очень редко, эффективнее и быстрее всё делать через fuzzy-поиск.
      • 0
        Просто у меня по работе ну очень часто надо «залеть на фтп и поправить пару файлов», но быстро, так что синхронизация не подходит.
        Конечно тут есть обычный броуз файлов, но хотелось бы гденибудь в сайдбаре, а то кликнул не туда, и оно закрылось
        • 0
          SFTP — это не для работы с FTP, а для доступа через SSH. Для FTP достаточно примаунтить ftp через Finder — и эта директория будет доступна и через Sublime.
          • 0
            Windows...))
            Не спорю, если утлиты для маунта ФТП в диски, но хотелось бы прямо в редакторе. Т.к. Sublime очень понравился, но именно изза ФТП не получается уйти с Аптаны
  • 0
    Еще один удобный плагин для написания комментариев для Javascript, Java, C++ в JSDoc стиле. Автоматическое оформление и поддержка тегов.
    DocBlockr
  • 0
    Один вопрос. Что такое «препроцессор» в терминах сублимтехтедитор2?
    • 0
      У Sublime таких терминов нет, есть плагины, которые добавляют поддержку синтаксиса препроцессоров и/или чего-нибудь еще.
  • 0
    А кто-нибудь знает другие IDE в которых есть/можно_прикрутить штуку на подобие поиска Ctrl+P в Sublime?
    Супер штука!
  • +1
    Отличный наборчик, пользуйсь ST как альтернативой для WebStorm, единственно что напрягает это отсутвие адекватного деплоймента. Ну точнее адекватный есть, но за отдельные деньги, все никак не соберусь купить.

    Вот еще плагинчик удобный: SublimeTODO, для тех кто пользуется такой нотацией.
    • 0
      Есть еще круче, для глобальных задач — PlainTasks
  • 0
    LiveReload for Sublime Text 2 рабочий
    1. Ставим через Package Control — LiveReload
    2. Ставим расширение версии 2.0.8 на свой браузер

    проверенно на FF 15 и Chrome 22 работает.
    • +1
      Вот я и так тоже пробовал, но что-то не завелось, скорее всего что-нибудь не то сделал. Мне в блоге еще подсказали, что dev-версия LiveReload якобы стабильнее: github.com/dz0ny/LiveReload-sublimetext2/tree/devel (тоже в сочетании с расширением 2.0.8 по вашей ссылке).
      • +1
        тут важна очередность запуска, перезапускаем ST2 (это ключевой момент), открываем браузер и жмем кнопку расширения.
        При этом в статусной строке ST2 появится что подключен клиент v2.
  • 0
    Впервые попробывал этот редактор и не мог понять насчет подсветки кода- это плагин добавляет подсветку?
    • 0
      Какого кода? Там есть встроенная подсветка для ряда языков, для более редких есть плагины.
      • 0
        Не работала подсветка для js, но пере-установка решила проблему.
  • 0
    У меня Sublime Text 2 (Linux Mint) грузит процессор до 100% через 10-20 минут работы. Когда поставил — радости небыло предела, на столько понравился. А теперь вот гуглю эту проблему.
    • 0
      Столкнулся с той же проблемой. Вы, случайно, не нашли решение?
      • 0
        Нет, тогда я отказался от этого пакета.
  • 0
    А никто не пробовал перенести панель вывода результатов исполнения кода в другое место? Иногда удобно отслеживать выполнение циклов, и хотелось бы иметь окно с результатами в виде sidebar.
  • 0
    неплохой кстати плагин подсветки изменений файла с последнего коммита (как в нетбинсе — если кто в курсе)
    github.com/gornostal/Modific
  • 0
    Для Sass целых три плагина нашел.
    github.com/n00ge/sublime-text-haml-sass
    github.com/nathos/sass-textmate-bundle
    github.com/kuroir/SCSS.tmbundle

    Интересно есть ли существенная разница? Кто нибудь пробовал уже в работе?
  • 0
    Для LESS есть еще Crunc
  • +2
    Кстати kizu сейчас работает над новым инструментом для быстрого написания CSS, на этот раз с поддержкой препроцессоров: hayaku. Достойная замена зенкодингу.
    • 0
      Если честно, не вижу смысла менять шило на мыло.
      Работа с препроцессорами? Ну, хорошо. Fuzzy-поиск? А это уже спорный вопрос. ИМХО, лучше четко знать аббревиатуры, чем сидеть и гадать, какой символ добавить, чтобы раскрыть нужное свойство со значением. В этом случае предпочитаю Emmet.
  • 0
    Большое спасибо автору статьи! Много я нового для себя открыл!!!
    Есть у меня пара вопросов к знающим.
    1) Prefix не добавляет почему-то "-moz"
    2) Как вы синхронизируете с ftp или sftp ваши проекты? ( я привык к Coda, там все автоматом, зажал клавши и все ушло, а на ST2 не знаю как?)
    Подскажите кто чем пользуется?
  • 0
    Есть ещё неплохой плагин для подсветки парных тегов BracketHighlighter
  • 0
    Для life realod еще можно использовать Brackets
  • 0
    Только что сам попробовал все работает. Всего лишь exstation для chrome и плагин для sumblime (у меня 3 версия).

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