安裝

你需要：

• Stylelint
• 所述stylelint處理器風(fēng)格的組件，以提取從樣式樣式化的組件
• 的 stylelint-config-styled-components 禁用與之沖突的stylelint規(guī)則 樣式化的組件
• 你的最愛 Stylelint配置！（例如stylelint-config-推薦）

注意

我們建議使用Stylelint v9 +，因?yàn)樗砑恿艘恍┕δ?，這些功能使我們可以報(bào)告有關(guān)CSS語(yǔ)法錯(cuò)誤的正確行號(hào)

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

設(shè)置

添加. stylelintrc文件到項(xiàng)目的根目錄：

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

然后你需要運(yùn)行風(fēng)格林特.添加絨： css腳本到您的包. json運(yùn)行風(fēng)格林特所有樣式的組件都有一個(gè)球：

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

注意

處理器忽略不包含任何樣式組件，所以不要擔(dān)心過于寬泛，只要你限制它到j(luò)avascript（或類型腳本）。

現(xiàn)在，您可以通過運(yùn)行腳本來處理 CSS！????

npm run lint:css

注意

請(qǐng)注意，由于 Stylelint 自定義處理器可能的限制，我們無(wú)法支持- - 修復(fù)選項(xiàng)

Webpack

如果您希望在構(gòu)建時(shí)進(jìn)行測(cè)試，而不是作為單獨(dú)的命令，則可以使用 stylelint定制處理器加載程序 用于webpack。

stylelint-config-styled-component

使用此處理器時(shí)，有一些stylelint規(guī)則會(huì)引發(fā)無(wú)法避免的錯(cuò)誤，例如  no-empty-source  要么 no-empty-source 。我們還需要執(zhí)行一些規(guī)則，例如 無(wú)供應(yīng)商前綴規(guī)則。（樣式化的組件 供應(yīng)商會(huì)自動(dòng)為您的代碼加上前綴，因此您無(wú)需手動(dòng)進(jìn)行操作）stylelint-config-styled-components 將自動(dòng)禁用導(dǎo)致沖突的規(guī)則。

注意

您可以在自定義中覆蓋共享配置中定義的規(guī)則 .stylelintrc。

與其他庫(kù)的用法

其他一些庫(kù)也實(shí)現(xiàn)樣式. x帶標(biāo)記模板文本的模式。此處理器也會(huì)在那些標(biāo)記的模板文本中絨面化 CSS，只要他們使用風(fēng)格關(guān)鍵 字。

如果要將處理器用于其他庫(kù)，但還希望更改關(guān)鍵字（例如，要寫入酷. div而不是樣式. div） 使用模塊名稱選項(xiàng)：

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

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

注意

該雙數(shù)組是故意的，但僅當(dāng)您設(shè)置選項(xiàng)時(shí)才需要，請(qǐng)參閱處理器配置文檔。

注意

我們只正式支持樣式組件，但希望其他庫(kù)也可以從處理器中受益。

插值標(biāo)記

有時(shí)風(fēng)格林特可能會(huì)引發(fā)錯(cuò)誤（例如Cssyntaxerror），即使您的CSS沒有任何問題。這通常是由于插值，更具體地說，處理器不知道您正在插值什么。

一個(gè)簡(jiǎn)化的示例：

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

當(dāng)您的樣式中具有插值時(shí)，處理器無(wú)法知道它們是什么，因此它進(jìn)行很好的猜測(cè)，并將其替換為語(yǔ)法等效占位符值。因?yàn)轱L(fēng)格林特不是代碼流分析工具， 它不涵蓋所有邊緣情況， 處理器會(huì)時(shí)時(shí)出錯(cuò)。

插值標(biāo)記允許您告訴處理器插值是什么，以防它猜錯(cuò)了;然后，它可以根據(jù)標(biāo)記將插值替換為句法正確的值。

例如：

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

現(xiàn)在處理器知道東西插值是一個(gè)屬性，它可以用林丁的屬性替換插值。

要標(biāo)記插值，請(qǐng)?zhí)砑硬逯档拈_始或結(jié)束的注釋。($[/]sc 標(biāo)簽*/foo]或$[酒吧 /] sc 標(biāo)簽 */]） 標(biāo)記以sc -如果指定，標(biāo)記將覆蓋處理器對(duì)插值的猜測(cè)。

標(biāo)簽

受支持的標(biāo)記的完整列表：

• sc 塊
• sc 選擇器
• sc 聲明
• sc 屬性
• sc 值

注意

如果您對(duì)詞匯表有疑問，可以參考此CSS 詞匯列表，并舉例說明。

例如，當(dāng)您插值另一個(gè)樣式化的組件時(shí)，您真正插值的是它的唯一選擇器。由于處理器不知道這一點(diǎn)，您可以告訴它將其替換為選擇器時(shí)，linting：

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

還可以使用速記標(biāo)記來避免代碼混亂。例如：

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

sc 自定義

sc 自定義是用來作為最后的手段逃生艙口。如果可能，更喜歡使用標(biāo)準(zhǔn)標(biāo)簽！

在上面的標(biāo)準(zhǔn)標(biāo)簽之上，處理器還具有sc 自定義標(biāo)記，以允許您覆蓋更獨(dú)特和不尋常的邊緣情況。與sc 自定義標(biāo)記，您可以自行決定占位符值。

例如：

// 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;
`

語(yǔ)法注釋

從 JS/CSS 內(nèi)部關(guān)閉規(guī)則

關(guān)閉規(guī)則樣式林特禁用注釋（請(qǐng)參閱所有允許語(yǔ)法的樣式林特文檔）在標(biāo)記的模板文本的內(nèi)外。

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;
`

模板字面樣式和縮進(jìn)

為了正確應(yīng)用樣式，處理器需要對(duì)樣式進(jìn)行一些有意見的預(yù)處理，因此我們只正式支持一個(gè)縮進(jìn)樣式。（支持的風(fēng)格是"默認(rèn)"樣式，如所有文檔中所示）

重要的是，您將關(guān)閉回圖放在縮進(jìn)的基本級(jí)別上，如下所示：

右

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

錯(cuò)

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

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

可能重合地支持其他標(biāo)記模板文本樣式，但除非使用了上述樣式，否則不會(huì)處理有關(guān)縮進(jìn)的問題。