Как настроить Sublime Text 3 для верстальщика?

Question

[booogabooo]

Как настроить Sublime Text 3 для верстальщика? Например, как можно прямо из программы запускать созданный HTML файл в браузерах?

Answer 1

[Сергей]

Лично я использую:
1) Sass (трудно объяснитьв двух словах, лучше прочитать документацию по этой технологии, если она вам неизвестна)
2) Compass (кроссбраузерная компиляция sass, нарезка спрайтов)
3) Emmet (экономит время написания html)
4) SFTP (фтп-клиент)
5) CSSComb (форматирует css)
6) SassBeautify (форматирует код в sass)

Answer 2

[7rulnik]

Небольшой джентельменский набор:
Emmet
SideBarEnhancements (умеет открывал хтмл по комбинации клавиш)
SFTP
Less/Saas
Prefixr
AdvancedNewFile
LiveReload
AutoFileName

Естественно всё субъективно.
Все устанавливается через Package Control.
Тут можете поискать еще что-нибудь.

Comments

[angelzzz]

Хороший набор, пара вопросов:
1. SideBarEnhancements (умеет открывал хтмл по комбинации клавиш) - в чем смысл у этого функционала?
2. AutoFileName - у меня почему-то не работает. Не знаете с чем может быть связано?

Answer 3

[yarikus]

Я бы рекомендовал вам использовать WebStorm 8. Там все есть из коробки + удобный автокомплит и просто наикрутейший spy-js. А Sublime тоже хорош, но как дополнительный инструмент, этакий перочинный ножик от веба. У меня лично оба редактора всегда открыты. А по теме, я раньше этим постом руководствовался: habrahabr.ru/post/154667

Comments

[Сергей]

WebStorm не редактор, это IDE. Мне не нравится WebStorm своей избыточностью, многое мне просто не нужно. Плюс скорость работы. У меня на работе довольно древняя машинка в результате Шторм заметно подтормаживает, а сайблайм летает везде. Плюс сайблайм гибок в настройках, я всегда могу снести то что мне на данный момент не нужно и поставить все что мне нужно. Плагинов - гигантское количество. Из него в принципе можно сделать ту же самую IDE, которая не будет уступать WebStorm'у. Но обратите внимание, тут человек просит настроить сайблайм для верстальщика, а не для фронтэнд разработки, соответственно большая часть потенциала шторма ему попросту не нужна.

Answer 4

[Евгений Низамиев]

Установи Brackets вместо саблайма)

Comments

[Сергей]

он еще сырой и при этом не имеет никаких преимуществ перед саблаймом.

[Евгений Низамиев]

@Hando какую версию использовали?

[Сергей]

не могу сказать точно, это было месяца 4 назад, на тот момент это была последняя.

[Евгений Низамиев]

@Hando За 4 месяца многое изменилось

[Сергей]

Я вполне в это верю, так как над ним и тогда активно работали. Но какие у него преимущества перед саблаймом? ;)

[Евгений Низамиев]

@Hando Он очень прост. Установил, поставил пару дополнений(emmet и т.д) и всё, он полностью готов к работе. Пожалуй это его главное преимущество.

Answer 5

[Eugene Burmakin]

livereload

Answer 6

[Vadim Sysoev]

Лично я первым делом ставлю Package Control, а далее:

sass — настроим корректную подсветку SASS в Sublime Text 3.
jade — HTML препроцессор.
gist — плагин для быстрого доступа к вашим сниппетам на GitHub.
brackethighlighter — подсветка скобок, тегов в Sublime Text 3.
autofilename — автокомплит для подключения внешних файлов в верстку.
colorhighlighter — подсветка цвета.
BufferScroll — сохранение позиции курсора в документе.
Goto-CSS-Declaration — плагин для быстрого поиска соответствующего класса в CSS, SASS, LESS.

Поставив Emmet не забудьте убрать "Auto complite" в настройках, ну и по удобству в key binding добавьте функцию "reindent"

Comments

[angelzzz]

У меня примерно такой же набор, только вместо sass - less и у меня autofilename не работает почему-то, не могу понять в чем проблема. Не знаете в чем может быть проблема?