styled-components Stylelint

安裝

你需要：

• Stylelint
• 所述stylelint處理器風格的組件，以提取從樣式樣式化的組件
• 的 stylelint-config-styled-components 禁用與之沖突的stylelint規(guī)則 樣式化的組件
• 你的最愛 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（或類型腳本）。

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

npm run lint:css

注意

請注意，由于 Stylelint 自定義處理器可能的限制，我們無法支持- - 修復選項

Webpack

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

stylelint-config-styled-component

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

注意

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

與其他庫的用法

其他一些庫也實現(xiàn)樣式. x帶標記模板文本的模式。此處理器也會在那些標記的模板文本中絨面化 CSS，只要他們使用風格關鍵 字。

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

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

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

注意

該雙數(shù)組是故意的，但僅當您設置選項時才需要，請參閱處理器配置文檔。

注意

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

插值標記

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

一個簡化的示例：

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

當您的樣式中具有插值時，處理器無法知道它們是什么，因此它進行很好的猜測，并將其替換為語法等效占位符值。因為風格林特不是代碼流分析工具， 它不涵蓋所有邊緣情況， 處理器會時時出錯。

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

例如：

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

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

要標記插值，請?zhí)砑硬逯档拈_始或結(jié)束的注釋。($[/]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 內(nèi)部關閉規(guī)則

關閉規(guī)則樣式林特禁用注釋（請參閱所有允許語法的樣式林特文檔）在標記的模板文本的內(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;
`

模板字面樣式和縮進

為了正確應用樣式，處理器需要對樣式進行一些有意見的預處理，因此我們只正式支持一個縮進樣式。（支持的風格是"默認"樣式，如所有文檔中所示）

重要的是，您將關閉回圖放在縮進的基本級別上，如下所示：

右

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

錯

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

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

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