Применение правил стиля межстрочного интервала с помощью Stylelint и Prettier

Question

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

Мы используем Stylelint в проекте для обеспечения синтаксиса БЭМ и максимальной длины строки символов.

Однако есть ли способ, которым я могу обеспечить количество разрывов строк между переменными SASS, определенными в верхней части файла, и селекторами CSS? Я также хотел бы объединить его с Prettier, чтобы иметь возможность переформатировать файлы при сохранении, пока я над ними работаю.

Answer 1

Однако есть ли способ, которым я могу обеспечить количество разрывов строк между переменными SASS, определенными в верхней части файла, и селекторами CSS?

Да, вы можете применить одну пустую строку или не пустую строку до того, как большинство языковых конструкций будут использовать *-empty-line-before а также *-max-empty-lines правила в stylelint.

Поскольку вы используете SCSS, вы также можете использовать stylelint-scss пакет плагинов для управления пустыми строками перед долларовыми переменными.

Например, вы можете применить следующий стиль кода:

@import "foo.css";

$variable: value;
$variable: value;

rule-set {
  property: value;
  property: value;
}

rule-set {
  property: value;
  property: value;
}

С этой конфигурацией stylelint:

{ 
  "plugins": ["stylelint-scss"],
  "rules": {
    "at-rule-empty-line-before": [ "always", {
      except: [
        "blockless-after-same-name-blockless",
        "first-nested",
      ],
      ignore: ["after-comment"],
    } ],
    "declaration-empty-line-before": [ "always", {
      except: [
        "after-declaration",
        "first-nested",
      ],
      ignore: [
        "after-comment",
        "inside-single-line-block",
      ],
    } ],
    "max-empty-lines": 1,
    "rule-empty-line-before": [ "always-multi-line", {
      except: ["first-nested"],
      ignore: ["after-comment"],
    } ],
    "scss/dollar-variable-empty-line-before": [ "always", {
      except: [
        "after-dollar-variable",
        "first-nested"
      ],
      ignore: ["after-comment"],
    } ]
  }
}

Однако невозможно применить более одной пустой строки, например, две пустые строки перед вашими наборами правил CSS. Вам нужно будет написать собственный плагин stylelint для этого.

Я также хотел бы объединить его с Prettier, чтобы иметь возможность переформатировать файлы при сохранении, пока я над ними работаю.

Красивее и stylelint хорошо работают вместе. Есть некоторые совпадения, но они являются дополнительными инструментами. Например, вы можете использовать Prettier, чтобы красиво печатать большую часть пробелов и применять определенную длину строки в файлах SCSS, а затем использовать stylelint для управления пустыми строками (а также для проверки возможных ошибок и ограничения языка).

Stylelint имеет --fix флаг и правила в приведенном выше примере могут быть автоматически исправлены.