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

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

0 голосов
/ 10 октября 2018

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

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

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

1 Ответ

0 голосов
/ 11 октября 2018

Однако есть ли способ, которым я могу принудительно установить количество разрывов строк между переменными 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;
}

С помощью этой конфигурации стиля строки: 

{ 
  "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, чтобы я мог переформатировать файлы при сохранении, покаЯ работаю над ними.

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

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

...