CSScomb

CSScomb — утилита для сортировки CSS-свойств в каждом селекторе по заданным пользователем правилам.

Установка CSScomb

Глобальная инсталляция (для использования в командной строке):

npm install csscomb -g

Локальная инсталляция (для использования в командной строке в текущем каталоге):

npm install csscomb

Для того, чтобы установить, как зависимость в проекте (пакет появится в ваших зависимостях):

npm install csscomb --save

Чтобы установить в качестве Dev зависимости (пакет появится в ваших devDependencies):

npm install csscomb --save-dev

Настройка CSScomb

Перед использованием CSScomb необходимо его настроить. Сделать это можно разными способами:

Использование готовых настроек

В этом проекте есть несколько файлов настройки, которые можно сразу использовать: csscomb, zen, yandex. Здесь, csscomb - это конфигурационный файл по умолчанию, который используется, если вы не предоставите свой собственный. В Node.js вы можете передать имя конфигурации в конструктор:

var Comb = require('csscomb');
var comb = new Comb('yandex');

Не стесняйтесь использовать готовые настройки в качестве примеров: скопируйте одну из них и измените по своему вкусу, только не забудьте сохранить файл как .csscomb.json в корневой папке проекта.

Создание пользовательских настроек

Если вас не устраивают дефолтные настройки, - вы можете легко написать свою собственную конфигурацию. Единственное требование состоит в том, что свойства должны быть записаны в формате JSON для правильной работы. Пример:

{
    "exclude": ["node_modules/**"],
    "verbose": true,
    "always-semicolon": true,
    "color-case": "lower",
    "color-shorthand": true,
    "element-case": "lower",
    "eof-newline": true,
    "leading-zero": false,
    "quotes": "single",
    "remove-empty-rulesets": true,
    "strip-spaces": true,
    "unitless-zero": true,
    "vendor-prefix-align": true
}

Также вы можете использовать визуальный настройшик конфигурационного файла с официального сайта проекта:

Где должен быть файл с настройками

CSScomb будет искать файл с именем .csscomb.json. Самый лучший способ, -это поместить файл в корневом каталоге вашего проекта. Тем не менее, если вы хотите использовать одну конфигурацию CSScomb для нескольких проектов, то лучше всего поместить файл внутри родительской папки. CSScomb будет искать конфигурационный файл рекурсивно до тех пор, пока не дойдет до вашего домашнего каталога.

Помните, что вы всегда можете задать пользовательские пути. В CLI:

csscomb -c path/to/config assets/css

В Node.js:

var Comb = require('csscomb');
var config = require('path/to/config');
var comb = new Comb(config);

Генерация конфигурации из шаблона

Вместо настройки одну за другой всех опций, вы можете использовать файл шаблона: CSScomb определит стиль кодирования и использует его в качестве конфигурации. Все существующие свойства, за исключением sort-order могут быть настроены таким образом:

csscomb -d example.css > .csscomb.json

Будет создан .csscomb.json основанный на настройках, которые могут быть обнаружены в example.css файле. Допустим, что ваш файл шаблона имеет следующий контент:

.foo
{
    width: #fff;
}

Сформированый конфигурационный файл будет выглядеть следующим образом:

{
    "remove-empty-rulesets": true,
    "always-semicolon": true,
    "color-case": "lower",
    "color-shorthand": true,
    "strip-spaces": true,
    "eof-newline": true
}

Переопределение настроек шаблона

Вы можете использовать шаблон внутри существующей конфигурации, дополнить его или переопределить некоторые из обнаруженных настроек:

{
    "template": "example.css",
    "leading-zero": false,
    "vendor-prefix-align": true
}

Эта конфигурация будет:

обнаруживать все настройки из example.css,
затем использовать "leading-zero": false вместо чего-либо обнаруженного,
затем использовать "vendor-prefix-align": true даже если нет никаких приставленных свойств или значений внутри example.css.

Использование CSScomb

Коммандная строка

csscomb assets/css

Node.js модуль

var Comb = require('csscomb');
var comb = new Comb('zen');
comb.processPath('assets/css');

Интегрируем CSScomb в Visual Studio Code

Итак, мы уже поняли, что CSScomb классная штука и было бы совсем неплохо иметь ее в нашем любимом бесплатном редакторе Visual Studio Code. Для этого нажмите на кнопку Extensions и в появившемся окне в поле ввода напишите csscomb. Из найденных расширений выберите нужное и нажмите на зеленую кнопку Install.

После того, как расширение установится, нажмите на кнопку Enable. Отлично, CSScomb активирован, осталось его только настроить и задать горячие клавиши. Для этого создайте новое правило в Файл -> Параметры -> Сочетания клавиш:

{
  "key": "ctrl+shift+c",
  "command": "csscomb.processEditor"
}