Апр

05

CSScomb в WebStorm — Сортировка CSS свойств

Filed Under (css, html, WebIDE) by Александр Бойченко on 05-04-2010

Есть хороший проект называется CSScomb от Вячеслава Олиянчука aka miripiruni. Суть его в том, что он сортирует CSS свойста согласно определенному порядку, который мы выставляем самостоятельно. Уже есть плагины для Coda и TextMate. Однако я пользуюсь WebStorm (WebIde) и очень захотелось подобного функционала именно в нем. Ну что ж сказано — сделано :)

Представляю вашему вниманию CSScomb для WebStorm for Mac OS\Linux.

Идея на самом деле очень простая — модифицировать php скрипт CSScomb таким образом, чтоб он обрабатывал нужный мне css файл. Это оказалось довольно просто. Сам скрипт пока очень сырой, он не умеет проверять *.css файл это или нет или обрабатывать целые папки…

Что необходимо для установки:

  • Mac OS
  • установленный PHP
  • Скачать CSScomb для WebStorm
  • Сам WebStorm

Установка:

  • Распаковать csscomb.php.zip — в удобную для Вас директорию.
  • Запустить WebStorm.
  • Открыть настройки
  • Найти External tools
  • Нажать Add
  • В открывшимся окне заполнить поля
    • Name: CSScomb
    • Description: CSS normalizer
    • Галочки оставляем все
    • Program: php
    • Parameters: /path/to/csscomb.php $FilePath$
    • Ok

Парочка скринов:
Файл до обработки
Меню CSScomb
Обработанный CSS файл

Пример работы скрипта можно посмотреть http://miripiruni.org/css-reorder/. Сами правила можно редактировать в файле csscomb.php.

Подозреваю, что под Windows миграция будет абсолютно безболезненная.

UPD. Скрипт доступен на гитхабе проекта CSScomb

(3) Комментариев
Читать далее

Comments:

3 Комментариев на “CSScomb в WebStorm — Сортировка CSS свойств”

  1. miripiruni on 5 Апр 2010 at 22:18 #

    Александр, спасибо большое за допиливание для WebStorm.

    Справедливости ради стоит сказать, что тоже самое можно проделать не только в WebStorm, но и в IntelliJIDEA. Что я и сделал.

    Добавил бандл: http://github.com/miripiruni/CSScomb/downloads

    > Сам скрипт пока очень сырой, он не умеет
    > проверять *.css файл это или нет или обрабатывать
    > целые папки…
    Изначально я делал очень простой механизм, который будет именно пересортировать _правильный_CSS_код_ (отсюда метафора с расческой). Пока я не хочу менять это направление развития. Сколько людей столько и потребностей. Дописать надстройку, чтобы обрабатывались целые кучи файлов — это уже за пределами самой пересортировки.

    Надеюсь, что по мимо основного доклада на РИТ, я успею сделать маленький блиц-доклад на 10 минут про эту сортировку и успею таки открыть к тому времени http://csscomb.ru

  2. Боровиков Денис on 20 Май 2010 at 21:31 #

    Александр и Вячеслав! Огромное спасибо за потрясающую утилиту. Некоторое время назад приучил себя сортировать правила по рекомендациям Виталия Харисова http://vitaly.harisov.name/css-code-style.html

    К сожалению, к этому времени уже было несколько крупных проектов, разработка которых продолжается, но переписывать весь код на новый стиль руки не доходили. Этот скрипт стал настоящей находкой! Просто поменял под себя сортировку с использованием двумерных массивов правил.

    Без проблем запустилось на Windows 7.

  3. Petr on 1 Сен 2011 at 9:14 #

    Ошибка на Windows 7
    No log handling enabled — turning on stderr logging
    Cannot find module (IP-MIB): At line 0 in (none)
    Cannot find module (IF-MIB): At line 0 in (none)
    Cannot find module (TCP-MIB): At line 0 in (none)
    Cannot find module (UDP-MIB): At line 0 in (none)
    Cannot find module (HOST-RESOURCES-MIB): At line 0 in (none)
    Cannot find module (SNMPv2-MIB): At line 0 in (none)
    Cannot find module (SNMPv2-SMI): At line 0 in (none)
    Cannot find module (NOTIFICATION-LOG-MIB): At line 0 in (none)
    Cannot find module (UCD-SNMP-MIB): At line 0 in (none)
    Cannot find module (UCD-DEMO-MIB): At line 0 in (none)
    Cannot find module (SNMP-TARGET-MIB): At line 0 in (none)
    Cannot find module (NET-SNMP-AGENT-MIB): At line 0 in (none)
    Cannot find module (DISMAN-EVENT-MIB): At line 0 in (none)
    Cannot find module (SNMP-VIEW-BASED-ACM-MIB): At line 0 in (none)
    Cannot find module (SNMP-COMMUNITY-MIB): At line 0 in (none)
    Cannot find module (UCD-DLMOD-MIB): At line 0 in (none)
    Cannot find module (SNMP-FRAMEWORK-MIB): At line 0 in (none)
    Cannot find module (SNMP-MPD-MIB): At line 0 in (none)
    Cannot find module (SNMP-USER-BASED-SM-MIB): At line 0 in (none)
    Cannot find module (SNMP-NOTIFICATION-MIB): At line 0 in (none)
    Cannot find module (SNMPv2-TM): At line 0 in (none)
    где правды искать?

Оставить комментарий