en
Stylelint. Как правильно настроить

Stylelint. Как правильно настроить

Андрей КовтунАндрей Ковтун, 1 мин чтения

Линтер поможет избежать стандартных ошибок в коде, привести values к одному виду и т.д. Его успешно можно использовать для CSS, Sass (обоих синтаксисов), PostCSS.

Установка линтера

Устанавливаем последнюю версию Stylelint:

npm i -D stylelint

Установка дополнительных плагинов

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

npm i -D stylelint-performance-animation

Конфигурационный файл

Настройки Stylelint находятся в файле .stylelintrc.json, который нужно разместить рядом с package.json.

Настройки, которые я использую на ряде проектов для Drupal и standalone, вот уже несколько лет.

{
  "plugins": ["stylelint-performance-animation"],
  "rules": {
    "plugin/no-low-performance-animation": true,
    "at-rule-no-unknown": [
      true,
      {
        "ignoreAtRules": ["media", "import"]
      }
    ],
    "block-no-empty": true,
    "color-no-invalid-hex": true,
    "comment-no-empty": true,
    "declaration-block-no-duplicate-properties": [
      true,
      {
        "ignore": ["consecutive-duplicates-with-different-values"]
      }
    ],
    "declaration-block-no-shorthand-property-overrides": true,
    "declaration-empty-line-before": [
      "never",
      {
        "ignore": ["after-declaration"]
      }
    ],
    "font-family-no-duplicate-names": true,
    "font-family-no-missing-generic-family-keyword": true,
    "function-calc-no-unspaced-operator": true,
    "function-linear-gradient-no-nonstandard-direction": true,
    "keyframe-declaration-no-important": true,
    "media-feature-name-no-unknown": true,
    "no-duplicate-at-import-rules": true,
    "no-duplicate-selectors": true,
    "no-empty-source": true,
    "no-extra-semicolons": true,
    "no-invalid-double-slash-comments": true,
    "property-no-unknown": [true, { "ignoreProperties": ["aspect-ratio"] }],
    "selector-pseudo-class-no-unknown": true,
    "selector-pseudo-element-no-unknown": true,
    "selector-type-no-unknown": true,
    "string-no-newline": true,
    "unit-no-unknown": true,
    "max-empty-lines": 2,
    "string-quotes": "single"
  }
}

Игнорирование неизвестных properties

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

{
  "rules": {
    "property-no-unknown": [true, { "ignoreProperties": ["aspect-ratio"] }]
  }
}

Другие настройки можно подсмотреть в документации.

Игнорирование файлов или отдельных строк

Этого делать не рекомендуется, но иногда всё же возникает необходимость добавить маркер игнорирования определённой строки или свойства.

Игнорирование всего CSS файла:

/* stylelint-disable */

Игнорирование следующей строки:

/* stylelint-disable-next-line */

Игнорирование определённого правила:

/* stylelint-disable no-duplicate-selectors */

Хорошего CSS!

Ссылки:

Последнее обновление: