Stylelint - CSS-кузен ESLint

Вычитка CSS для обеспечения качества и согласованности

Мое путешествие

Я впервые узнал о Stylelint, просматривая документацию по стилизованным компонентам. Я специально не искал этого, но, поскольку я только что установил ESLint и Prettier в своей кодовой базе, я был заинтригован. С этого момента я начал исследовать Stylelint. Довольно скоро я понял, что, хотя у меня была окончательная настройка линтинга Javascript через ESLint и Prettier, у меня не было абсолютно ничего для CSS. Было ясно, что это моя следующая задача.

Stylelint

Stylelint - это линтер CSS. Он работает, анализируя ваш CSS и предупреждая вас, если какие-либо настроенные правила нарушаются. Эти правила могут обнаруживать ошибки CSS и обеспечивать соблюдение соглашений о стилях. Это похоже на проверку орфографии и грамматики в Google Документах или Microsoft Word - по сути, это автоматический корректор для вашего CSS!

Конфигурация

Stylelint запускает файл конфигурации с именем stylelint.config.js. Этот файл конфигурации разбит на правила, плагины и расширения.

Правила

Правила определяют, что Stylelint будет искать в вашем коде. Они определены в rules разделе конфигурации как пары ключ-значение. Ключ - это правило, а значение переключает правило и устанавливает параметры.

Включение правила зависит от самого правила - для некоторых правил это может быть так же просто, как установка значения true; другие имеют возможность настраиваться напрямую с помощью ключевого слова.

// stylelint.config.js
module.exports = {
  rules: {
    'declaration-no-important': true,
    'color-hex-case': 'upper',
  },
};

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

module.exports = {
  rules: {
    'font-weight-notation': ['numeric', { ignore: ['relative'] }],
  },
};

Отключить намного проще - просто установите значение null.

module.exports = {
  rules: {
    'comment-no-empty': null,
  },
};

Плагины

Stylelint изначально предоставляет почти 200 правил, но эти правила не охватывают все. Здесь на помощь приходят плагины - они позволяют разработчикам создавать правила, которые затем можно включить в своей конфигурации. Вот несколько примеров плагинов Stylelint.

Для интеграции определите эти плагины в разделе plugins конфигурации. Затем вы можете использовать правила плагина в разделе rules.

module.exports = {
  plugins: [
    'stylelint-a11y',
  ],
  rules: {
    "a11y/no-outline-none": true,
  },
};

Расширения

Благодаря такому количеству собственных правил и плагинов, создающих еще больше правил, расширения Stylelint делают их более удобными, поэтому вам не нужно выдергивать волосы, пытаясь понять их все. Через расширения вы наследуете плагины и правила, поэтому вам не придется делать это самостоятельно. Вот несколько примеров расширений Stylelint.

Расширения определены в разделе extensions файла config.

module.exports = {
  extends: [
    'stylelint-config-standard',
    'stylelint-config-recommended-scss',
    'stylelint-a11y/recommended',
  ],
};

Переопределение + отключение

Но использование расширений дает побочный эффект - что, если вы в основном согласны с ними, но есть несколько правил, которые вы хотели бы изменить или полностью отключить? Здесь на помощь приходит переопределение и отключение. Ваши собственные правила будут иметь приоритет и переопределить правила расширения.

module.exports = {
  extends: [
    'stylelint-config-standard',
  ],
  rules: {
    'color-hex-case': 'upper',
    'length-zero-no-unit': null,
  },
};

Даже если вы изо всех сил стараетесь придерживаться правила, могут быть случаи, когда правило должно быть нарушено. Чтобы не допустить ошибок Stylelint, вы можете временно отключить Stylelint для определенных строк с комментариями.

• /* stylelint-disable */: отключает Stylelint для всех строк ниже, пока не будет повторно включен с помощью /* stylelint-enable */
• /* stylelint-disable-line */: отключает Stylelint только для текущей строки
• /* stylelint-disable-next-line */: отключает Stylelint только для следующей строки

Вы также можете указать конкретные (разделенные запятыми) правила после комментария отключения, чтобы отключить несколько правил вместо отключения всех.

div {
  /* stylelint-disable-next-line value-no-vendor-prefix */
  display: -webkit-flex;
  justify-content: center;
  align-items: center;
  font-size: 12px !important; /* stylelint-disable-line declaration-no-important */

  /* stylelint-disable */
  :focus {
    outline: none;
  }
  /* stylelint-enable */
}

Их следует использовать с осторожностью, поэтому, если вы постоянно отключаете эти правила, подумайте об их отключении навсегда,

CSS в JS

Если вы используете популярные CSS-фреймворки в JS-фреймворках, такие как Emotion или Styled Components, вы все равно сможете использовать линтинг CSS после небольшой дополнительной настройки. Процессор stylelint-processor-styled-components извлечет стили из компонентов Emotion или Styled Components, чтобы Stylelint мог их использовать. Кроме того, некоторые правила несовместимы с этими фреймворками, поэтому их необходимо отключить с помощью stylelint-config-styled-components.

module.exports = {
  extends: ['stylelint-config-styled-components'],
  processors: ['stylelint-processor-styled-components'],
};

Несколько конфигураций

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

// stylelint.config.js
module.exports = {
  extends: [
    'stylelint-config-standard',
    'stylelint-a11y/recommended'
  ],
};
// stylelint.styled.config.js
module.exports = {
  extends: [
    './stylelint.config.js',
    'stylelint-config-styled-components'
  ],
  processors: ['stylelint-processor-styled-components'],
};

Подсказка: ваши конфигурации могут дополнять друг друга, поэтому вам не нужно снова определять одни и те же правила, расширения плагинов!

Бег

Чтобы запустить Stylelint (с несколькими конфигурациями), я добавляю следующие псевдонимы к package.json.

{
  "scripts": {
    "lint:js": "stylelint '{**/*,*}.js' --config stylelint.styled.config.js",
    "lint:css": "stylelint '{**/*,*}.css'",
    "lint:css:fix": "stylelint '{**/*,*}.css' --fix"
  },
}

npm run lint:js будет запускать Stylelint на стилизованных компонентах (файлы с расширением .js), а npm run lint:css будет запускать Stylelint на ванильном CSS (файлы с расширением .css). Вдобавок Stylelint поддерживает автоматическое исправление, поэтому вы можете запускать npm run lint:css:fix, и любые нарушения Stylelint, которые могут быть автоматически исправлены, будут. К сожалению, автоматическое исправление не поддерживается, если вы используете процессоры, которые требуются для стилизованных компонентов.

Последние мысли

Stylelint - прекрасное дополнение к ESLint для обеспечения и поддержки высококачественного кода. Хотя Stylelint немного сложно настроить на начальном этапе, когда это будет сделано, вы можете быть уверены в качестве и согласованности вашего CSS. Вам просто нужно меньше беспокоиться о том, чтобы сосредоточиться на создании отличного продукта.

Ресурсы

• Официальная документация Stylelint
• Github Repo для этой статьи
• CodeSandbox для этой статьи