styled-components Stylelint

安装

你需要：

• Stylelint
• 所述stylelint处理器风格的组件，以提取从样式样式化的组件
• 的 stylelint-config-styled-components 禁用与之冲突的stylelint规则 样式化的组件
• 你的最爱 Stylelint配置！（例如stylelint-config-推荐）

注意

我们建议使用Stylelint v9 +，因为它添加了一些功能，这些功能使我们可以报告有关CSS语法错误的正确行号

(npm install --save-dev \
  stylelint \
  stylelint-processor-styled-components \
  stylelint-config-styled-components \
  stylelint-config-recommended)

设置

添加. stylelintrc文件到项目的根目录：

{
  "processors": [
    "stylelint-processor-styled-components"
  ],
  "extends": [
    "stylelint-config-recommended",
    "stylelint-config-styled-components"
  ]
}

然后你需要运行风格林特.添加绒： css脚本到您的包. json运行风格林特所有样式的组件都有一个球：

{
  "scripts": {
    "lint:css":"stylelint './src/**/*.js'"
  }
}

注意

处理器忽略不包含任何样式组件，所以不要担心过于宽泛，只要你限制它到javascript（或类型脚本）。

现在，您可以通过运行脚本来处理 CSS！????

npm run lint:css

注意

请注意，由于 Stylelint 自定义处理器可能的限制，我们无法支持- - 修复选项

Webpack

如果您希望在构建时进行测试，而不是作为单独的命令，则可以使用 stylelint定制处理器加载程序 用于webpack。

stylelint-config-styled-component

使用此处理器时，有一些stylelint规则会引发无法避免的错误，例如  no-empty-source  要么 no-empty-source 。我们还需要执行一些规则，例如 无供应商前缀规则。（样式化的组件 供应商会自动为您的代码加上前缀，因此您无需手动进行操作）stylelint-config-styled-components 将自动禁用导致冲突的规则。

注意

您可以在自定义中覆盖共享配置中定义的规则 .stylelintrc。

与其他库的用法

其他一些库也实现样式. x带标记模板文本的模式。此处理器也会在那些标记的模板文本中绒面化 CSS，只要他们使用风格关键 字。

如果要将处理器用于其他库，但还希望更改关键字（例如，要写入酷. div而不是样式. div） 使用模块名称选项：

import cool from 'other-library'
const Button = cool.button`
  color: blue;
`

{
  "processors": [
    [
      "stylelint-processor-styled-components",
      {
        "moduleName": "other-library"
      }
    ]
  ]
}

注意

该双数组是故意的，但仅当您设置选项时才需要，请参阅处理器配置文档。

注意

我们只正式支持样式组件，但希望其他库也可以从处理器中受益。

插值标记

有时风格林特可能会引发错误（例如Cssyntaxerror），即使您的CSS没有任何问题。这通常是由于插值，更具体地说，处理器不知道您正在插值什么。

一个简化的示例：

const something = 'background'
const Button = styled.div`
  ${something}: papayawhip;
`

当您的样式中具有插值时，处理器无法知道它们是什么，因此它进行很好的猜测，并将其替换为语法等效占位符值。因为风格林特不是代码流分析工具， 它不涵盖所有边缘情况， 处理器会时时出错。

插值标记允许您告诉处理器插值是什么，以防它猜错了;然后，它可以根据标记将插值替换为句法正确的值。

例如：

const something = 'background'
const Button = styled.div`
  // Tell the processor that "something" is a property
  ${/* sc-prop */ something}: papayawhip;
`

现在处理器知道东西插值是一个属性，它可以用林丁的属性替换插值。

要标记插值，请添加插值的开始或结束的注释。($[/]sc 标签*/foo]或$[酒吧 /] sc 标签 */]） 标记以sc -如果指定，标记将覆盖处理器对插值的猜测。

标签

受支持的标记的完整列表：

• sc 块
• sc 选择器
• sc 声明
• sc 属性
• sc 值

注意

如果您对词汇表有疑问，可以参考此CSS 词汇列表，并举例说明。

例如，当您插值另一个样式化的组件时，您真正插值的是它的唯一选择器。由于处理器不知道这一点，您可以告诉它将其替换为选择器时，linting：

const Wrapper = styled.div`
  ${/* sc-selector */ Button} {
    color: red;
  }
`

还可以使用速记标记来避免代码混乱。例如：

const Wrapper = styled.div`
  ${/* sc-sel */ Button} {
    color: red;
  }
`

sc 自定义

sc 自定义是用来作为最后的手段逃生舱口。如果可能，更喜欢使用标准标签！

在上面的标准标签之上，处理器还具有sc 自定义标记，以允许您覆盖更独特和不寻常的边缘情况。与sc 自定义标记，您可以自行决定占位符值。

例如：

// Switch between left and right based on language settings passed through via the theme
const rtlSwitch = props => (props.theme.dir === 'rtl' ? 'left' : 'right')
const Button = styled.button`
  background: green;
  // Tell the processor to replace the interpolation with "left"
  // when linting
  margin-${/* sc-custom "left" */ rtlSwitch}: 12.5px;
`

语法注释

从 JS/CSS 内部关闭规则

关闭规则样式林特禁用注释（请参阅所有允许语法的样式林特文档）在标记的模板文本的内外。

import React from 'react'
import styled from 'styled-components'
// Disable stylelint from within the tagged template literal
const Wrapper = styled.div`
  /* stylelint-disable */
  background-color: 123;
`
// Or from the JavaScript around the tagged template literal
/* stylelint-disable */
const Wrapper = styled.div`
  background-color: 123;
`

模板字面样式和缩进

为了正确应用样式，处理器需要对样式进行一些有意见的预处理，因此我们只正式支持一个缩进样式。（支持的风格是"默认"样式，如所有文档中所示）

重要的是，您将关闭回图放在缩进的基本级别上，如下所示：

右

if (condition) {
  const Button = styled.button`
    color: red;
  `
}

错

if (condition) {
  const Button = styled.button`
    color: red;
`
}

if (condition) {
  const Button = styled.button`
    color: red;`
}

可能重合地支持其他标记模板文本样式，但除非使用了上述样式，否则不会处理有关缩进的问题。