Как настроить порядок сортировки css свойств в scss-lint.yml?

Question

[Сергей Бурдужа]

Для верстки использую phpstorm. Файл .scc-lint.yml установил в домашнюю директорию, чтобы иметь доступ к нему из разных проектов, но это не суть.
Дело в том, что я хочу изменить порядок сортировки. По-умолчанию сортируется
background
color
padding
font-size
итгд.
Но я хочу изменить этот порядок, например так
position
display
font-size
color
background

Вот содержимое файла .scc-lint.yml

# Default application configuration that all configurations inherit from.

scss_files: "**/*.scss"
plugin_directories: ['.scss-linters']

# List of gem names to load custom linters from (make sure they are already
# installed)
plugin_gems: []

# Default severity of all linters.
severity: warning

linters:
  BangFormat:
    enabled: true
    space_before_bang: true
    space_after_bang: false

  BemDepth:
    enabled: false
    max_elements: 1

  BorderZero:
    enabled: true
    convention: zero # or `none`

  ChainedClasses:
    enabled: false

  ColorKeyword:
    enabled: true

  ColorVariable:
    enabled: true

  Comment:
    enabled: true
    style: silent

  DebugStatement:
    enabled: true

  DeclarationOrder:
    enabled: true

  DisableLinterReason:
    enabled: false

  DuplicateProperty:
    enabled: true

  ElsePlacement:
    enabled: true
    style: same_line # or 'new_line'

  EmptyLineBetweenBlocks:
    enabled: true
    ignore_single_line_blocks: true

  EmptyRule:
    enabled: true

  ExtendDirective:
    enabled: false

  FinalNewline:
    enabled: true
    present: true

  HexLength:
    enabled: true
    style: short # or 'long'

  HexNotation:
    enabled: true
    style: lowercase # or 'uppercase'

  HexValidation:
    enabled: true

  IdSelector:
    enabled: true

  ImportantRule:
    enabled: true

  ImportPath:
    enabled: true
    leading_underscore: false
    filename_extension: false

  Indentation:
    enabled: true
    allow_non_nested_indentation: false
    character: space # or 'tab'
    width: 2

  LeadingZero:
    enabled: true
    style: exclude_zero # or 'include_zero'

  MergeableSelector:
    enabled: true
    force_nesting: true

  NameFormat:
    enabled: true
    allow_leading_underscore: true
    convention: hyphenated_lowercase # or 'camel_case', or 'snake_case', or a regex pattern

  NestingDepth:
    enabled: true
    max_depth: 3
    ignore_parent_selectors: false

  PlaceholderInExtend:
    enabled: true

  PrivateNamingConvention:
    enabled: false
    prefix: _

  PropertyCount:
    enabled: false
    include_nested: false
    max_properties: 10

  PropertySortOrder:
    enabled: true
    ignore_unspecified: false
    min_properties: 2
    separate_groups: false

  PropertySpelling:
    enabled: true
    extra_properties: []
    disabled_properties: []

  PropertyUnits:
    enabled: true
    global: [
      'ch', 'em', 'ex', 'rem',                 # Font-relative lengths
      'cm', 'in', 'mm', 'pc', 'pt', 'px', 'q', # Absolute lengths
      'vh', 'vw', 'vmin', 'vmax',              # Viewport-percentage lengths
      'fr',                                    # Grid fractional lengths
      'deg', 'grad', 'rad', 'turn',            # Angle
      'ms', 's',                               # Duration
      'Hz', 'kHz',                             # Frequency
      'dpi', 'dpcm', 'dppx',                   # Resolution
      '%']                                     # Other
    properties: {}

  PseudoElement:
    enabled: true

  QualifyingElement:
    enabled: true
    allow_element_with_attribute: false
    allow_element_with_class: false
    allow_element_with_id: false

  SelectorDepth:
    enabled: true
    max_depth: 3

  SelectorFormat:
    enabled: true
    convention: hyphenated_lowercase # or 'classic_BEM', or 'hyphenated_BEM', or 'snake_case', or 'camel_case', or a regex pattern

  Shorthand:
    enabled: true
    allowed_shorthands: [1, 2, 3, 4]

  SingleLinePerProperty:
    enabled: true
    allow_single_line_rule_sets: true

  SingleLinePerSelector:
    enabled: true

  SpaceAfterComma:
    enabled: true
    style: one_space # or 'no_space', or 'at_least_one_space'

  SpaceAfterComment:
    enabled: false
    style: one_space # or 'no_space', or 'at_least_one_space'
    allow_empty_comments: true

  SpaceAfterPropertyColon:
    enabled: true
    style: one_space # or 'no_space', or 'at_least_one_space', or 'aligned'

  SpaceAfterPropertyName:
    enabled: true

  SpaceAfterVariableColon:
    enabled: false
    style: one_space # or 'no_space', 'at_least_one_space' or 'one_space_or_newline'

  SpaceAfterVariableName:
    enabled: true

  SpaceAroundOperator:
    enabled: true
    style: one_space # or 'at_least_one_space', or 'no_space'

  SpaceBeforeBrace:
    enabled: true
    style: space # or 'new_line'
    allow_single_line_padding: false

  SpaceBetweenParens:
    enabled: true
    spaces: 0

  StringQuotes:
    enabled: true
    style: single_quotes # or double_quotes

  TrailingSemicolon:
    enabled: true

  TrailingWhitespace:
    enabled: true

  TrailingZero:
    enabled: false

  TransitionAll:
    enabled: false

  UnnecessaryMantissa:
    enabled: true

  UnnecessaryParentReference:
    enabled: true

  UrlFormat:
    enabled: true

  UrlQuotes:
    enabled: true

  VariableForProperty:
    enabled: false
    properties: []

  VendorPrefix:
    enabled: true
    identifier_list: base
    additional_identifiers: []
    excluded_identifiers: []

  ZeroUnit:
    enabled: true

  Compass::*:
    enabled: false

Но тут не нашел ничего про сортировку.
Надеюсь что поможете решить мою проблему.
Заранее благодарен.

Answer 1

[Сергей Бурдужа]

Нашел решение и оно работает.
Нужно прописать эти настройки в файл .scss-lint.yml

PropertySortOrder:
    enabled: true
    order:
          - content
          - position
          - top
          - right
          - left
          - bottom
          -
          - display
          - vertical-align
          - margin
          - padding
          - max-width
          - min-width
          - max-height
          - min-height
          - width
          - height
          -
          - font-family
          - font-size
          - font-weight
          - font-family
          -
          - color
          - background
    ignore_unspecified: false
    min_properties: 2
    separate_groups: true

Answer 2

[deeppines]

Отсортировать можно через данный параметр.

В целом странно зачем вам сортировка в линтере, не проще ли сортировать с помощью csscomb уже скомпилированный css, но это так, дело вкуса)

Comments

[Сергей Бурдужа]

Да, я вас немного опередил. Но я совсем не понимаю, зачем сортировать стили с помощью csscomb, если я работаю с scss. Мне в файле style.scss нужно сортировать, а не в style.css, хотя я понимаю, что в коммандной работе, далее css файлом будут пользоваться другие разработчики и для этих целей стоит использовать csscomb.
Но я пока что работаю один, скорее не работаю, а только учусь. Но в дальнейшим подумываю использовать и csscomb вместе с scss-lint, это для порядка.
Спасибо что откликнулись.

[deeppines]

Сергей Бурдужа, Не за что) как совет, если используйте какой либо инструмент, то сразу ищите к нему документацию, как правило она покрывает большинство вопросов возникающих при работе с этим инструментом.

По поводу сортировки в линтере.
Просто каждый работает и делает по своему, в моем случае некогда задумываться о порядке правил в scss, важна скорость, а вот красивый и понятный css для разработчиков нужен, но это скажем так внутренний порядок который исторически сложился в компании.
Кстати, задумался и ваш подход больше подходит для работы в команде фронтендеров, так как все пишут по своему и без единых правил тяжело копаться в чужом коде.

[Сергей Бурдужа]

Lucas Kane, Ну, да это тоже верно. Вот теперь настраиваю и csscomb, оба файла буду хранить в домашней директории и изредко комитить на гитхаб, чтобы не затерялись. Таким образом, я избавился от одной проблемы. Все руки до этого не доходили.
Что насчет документации, так я в первую очередь туда и лезу читать, хоть и на английском, но 80% понятно, если что переводчик поможет.
Но вот в случае с scss-lint не сразу смог найти сортировку свойств. Как-то не явно оно составлено, видимо те кто ее писал, хорошо в этом разбираются и не задумались, что документацией будут пользоваться и новички)))

[Егор Живагин]

Lucas Kane, Сергей Бурдужа, а объясните мне, пожалуйста, зачем сортировать скомпилированный css? ) Я один не вижу пользы? Вот почему:
1) Все изменения вносятся в исходники. Зачем линтер в скомпилированном файле, если в него, максимум, зайдут из инспектора в браузере?
2) Скомпилированный css в 90% случаев ещё и минифицирован, т.е. абсолютно нечитабелен, независимо от порядка свойств.

Это не в качестве критики подхода, но мне было бы интересно услышать аргументы "за"

[Сергей Бурдужа]

Егор Живагин, если честно, то я сам уже запутался во всей этой историей с комплияцией стилей. css-lint вижу смысл использовать, чтобы правильно писать стили, он как надзиратель.Такой подход помогает тренировать в себе строгость. А что касается csscomb, то тут до конца еще не разобрался, придет время и сам пойму нужен ли он или нет.
В свое время, я долго мучался с gulp, browser-sync. По-нескольку раз читал документацию и пытался понять как все устроено и как запустить, но у меня не получалось. Но со временем у меня дошли руки и я разобрался со всей этой системой. Уверен что так будет и с csscomb.

[deeppines]

Егор Живагин,

1) csscomb не линтер, чистая эстетика.

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

[Егор Живагин]

Lucas Kane, а, ну, может быть. Спасибо за пояснение.

Хотя луше, конечно, чтоб бэк никогда не лез в стили))