Sublime Text 2. Чем форматировать HTML/CSS/JS ?

Question

[ZaiSL]

Сейчас использую:

• JsFormat
• Sublime HTMLPrettify

Для форматирования CSS так ничего и не удалось найти.
Какими плагинами посоветуете пользоваться для наведения красоты в коде?

Comments

[sefus]

Присоединюсь к вопросу, интересует еще такой плагин для PHP. Нравится автоформат в NetBeans, хотелось бы похожее что-то.

Answer 1

[lostuser]

csstidy + надо допилить, добавив сочетание клавиш в user key bindings

{ "keys": ["ctrl+t"], "command": "css_tidy" }

Answer 2

[Genome_X]

Эммм, а что там некрасивого? Выбирается формат CSS и все, синтаксис подсвечивается, отступы делаются, чего еще нужно? Или я чего-то не понимаю?

Comments

[d4rkr00t]

как я понял автор имеет ввиду автоматически форматировать

[Genome_X]

Я или дурак, или что-то еще, саблайм же сам все отступы, скобки и прочее расставляет, добавляет (опять же, сам), точку с запятой при указании свойства элемента и т.д. Чего там еще автоматизировать?

[larikov]

Задача — есть CSS

.i-flashcookie{position:absolute;left:-10000px;top:0}.b-menu__item-content{display:none}.b-menu__item-content_visibility_visible{display:block}.b-menu__title{font-size:100%;margin:0;padding:0}.b-menu__separator{display:block}.b-menu__layout-vert,.b-menu__layout-vert-gap,.b-menu__layout-vert-cell,.b-menu__layout-vert-separator{margin:0;padding:0;list-style:none}.b-menu_layout_vert .b-menu__separator{margin:1em 0 0;border-top:1px dotted #666}.b-menu_layout_vert,.b-menu__layout-vert-cell{line-height:1.35em}.b-menu_preset_vmenu .b-menu__layout-vert-cell,.b-menu_preset_vmenu .b-menu__layout-vert-separator{margin-bottom:.5em}.b-menu_preset_vmenu .b-menu{margin:.5em 0 0 1.5em}.b-menu_preset_vmenu .b-menu__title{margin-bottom:.5em}.b-dropdowna{display:inline}.b-dropdowna__menu .b-menu__layout-vert-separator{font:0/0 a;margin:0 0 4px}

Сделайте, чтобы саблайм сам «все отступы, скобки и прочее» расставил.

Answer 3

[Dmitry Shvalyov]

csscomb.ru может использоваться для форматирования стилей, ну и соответственно у него есть плагин для саблим.

Comments

[larikov]

этот плагин лишь переопределяет порядок свойств, ничего не форматируя.

[miripiruni]

CSScomb.ru — сортировщик свойств в рамках каждого селектора. У меня не было задачи делать beautifier. Их полным полно.

Answer 4

[SilentImp]

zenCoding для написания кода
csscomb для расстановки правил в определенном порядке

Answer 5

[Алекс Белов]

Я CSS форматирую с помощью TopStyle. В нем даже можно настроить ряд параметров, по которым будет форматироваться стиль.
JQuery только JSMin плагином для Notepad++
PHP не форматирую, так что помочь не могу.

Comments

[Алекс Белов]

Для larikov
Вот результат работы TopStyle4

.b-dropdowna{
	display: inline;
}

.b-dropdowna__menu .b-menu__layout-vert-separator{
	font: 0/0 a;
	margin: 0 0 4px;
}

.b-menu__item-content{
	display: none;
}

.b-menu__item-content_visibility_visible, .b-menu__separator {
	display: block;
}

.b-menu__layout-vert,.b-menu__layout-vert-gap,.b-menu__layout-vert-cell,.b-menu__layout-vert-separator{
	list-style: none;
	margin: 0;
	padding: 0;
}

.b-menu__title{
	font-size: 100%;
	margin: 0;
	padding: 0;
}

.b-menu_layout_vert .b-menu__separator{
	border-top: 1px dotted #666;
	margin: 1em 0 0;
}

.b-menu_layout_vert,.b-menu__layout-vert-cell{
	line-height: 1.35em;
}

.b-menu_preset_vmenu .b-menu{
	margin: .5em 0 0 1.5em;
}

.b-menu_preset_vmenu .b-menu__layout-vert-cell,.b-menu_preset_vmenu .b-menu__layout-vert-separator, .b-menu_preset_vmenu .b-menu__title {
	margin-bottom: .5em;
}

.i-flashcookie{
	left: -10000px;
	position: absolute;
	top: 0;
}

Answer 6

[Виктор Суздалев]

Нашел замечательный плагин Html-css-js-prettify (https://github.com/victorporof/Sublime-HTMLPrettify).

Answer 7

[Алексей Федосов]

В Sublime Text 3 для форматирования HTML пользуюсь плагином Tag. Попробуйте! Есть еще моё видео 10 плагинов для Sublime Text 3, там на 12:40" про него и рассказываю.

Comments

[Igor Bronovskyi]

Спасибо за видео. Подписался.

Answer 8

[nwalker]

есть плагин csslisible именно для этого — github.com/thierrylemoulec/Sublime-Csslisible
но он сейчас как-то сломан.

Answer 9

[tmikwid]

Для вашего случая есть вот такой он-лайн сервис: http://minify.avivo.si/ В нем выбираете — beautify, выбираете настройки декомпрессии CSS и генерируете результат.