styled-components Stylelint

2020-07-25 16:45 更新

安装

你需要：

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 自定义标记，您可以自行决定占位符值。

例如：

// Switch between left and right based on language settings passed through via the themeconst 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;`
}

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

以上内容是否对您有帮助：

← styled-components Jest集成

styled-components 风格主题 →

写笔记

我要补充