Блог

Главная - Вопросы по программированию - Как отключить stylelint для всех нестроковых значений

Как отключить stylelint для всех нестроковых значений

#styled-components #stylelint

#стилизованные компоненты #stylelint

Вопрос:

Можно ли отключить наложение stylelint в интерполяциях глобально с включенным процессором styled-components? Моя конфигурация eslint должна применяться для этих случаев, и я не хочу, чтобы моя конфигурация stylelint вмешивалась в это. Есть ли какие-либо способы приблизиться к этому?

Например, этот фрагмент кода сгенерирует ошибку из-за CSS value-keyword-case правила stylelint. Но поскольку это внутри интерполяции (так что это просто JS и без CSS), я хотел бы отключить linting для таких мест, как это.

 const MyStyling = styled.div`
  color: ${props => props.colors.darkPink};
`

Что я использую:

 {
  "stylelint": "^9.10.1",
  "stylelint-config-standard": "^16.0.0",
  "stylelint-config-styled-components": "^0.1.1",
  "stylelint-processor-styled-components": "^1.5.2"
}

Комментарии:

1. Не могли бы вы добавить пример того, что вы подразумеваете под «в интерполяциях глобально», пожалуйста?

2. Я отредактировал свой вопрос.

3. Я не верю, что в stylelint есть no-camel-case правило. Вы уверены, что именно stylelint вставляет этот код? Кроме того, stylelint теперь может извлекать стили из литералов шаблонов «из коробки», поэтому вам может не понадобиться использовать процессор . Попробуйте удалить stylelint-processor-styled-components из вашего файла конфигурации.

4. Я не уверен, что это правильное название правила, но идея удаления процессора кажется многообещающей! Я попробую это завтра.

5. Правило таково value-keyword-case , и удаление процессора приводит к той же ошибке (но без нагрузки на процессор, так что уже спасибо). :/

Ответ №1:

У меня такая же проблема.

Не найдя ничего конкретного, чтобы отключить правила stylelint, применяемые к нестроковым значениям в javascript, я решил отключить value-keyword-case правило в нескольких строках, где оно мне нужно, используя:

 /* stylelint-disable-line value-keyword-case */

Пример в моем коде:

 const buttonStyles = css<Props>`
  /* CSS property: value pairs removed for simplicity */
`

const DecoyButton = styled.div`
  ${buttonStyles} /* stylelint-disable-line value-keyword-case */
`

const Button = styled('button').attrs(({ type = 'button' }: Attrs) => ({
  type,
}))`
  ${buttonStyles} /* stylelint-disable-line value-keyword-case */
`