styled-components - 如何为所有非字符串值禁用 stylelint

Question

是否可以在启用 styled-components 处理器的情况下全局关闭插值中的 stylelint linting？我的 eslint 配置应该适用于这种情况，我不希望我的 stylelint 配置干扰它。有什么方法可以解决这个问题吗？

例如，这段代码会产生错误，因为 stylelint 的 CSS value-keyword-case 规则。但是因为它在插值内部(所以它只是 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"
}

Answer 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 */
`