---

Ⅰ. 插件描述

Lint your styled components with stylelint!

Ⅱ. 基本信息

创建日期：  2016-10-19 使用用户：  1 Github星：  575 插件作者：  styled-components

Ⅲ. 安装方法

使用Vundle管理器安装

在你的.vimrc下添加:

Plugin 'styled-components/stylelint-processor-styled-components'

… 然后在Vim中运行以下命令:

:source %
:PluginInstall

对于Vundle版本 < 0.10.2，请用上面的Bundle替换Plugin。

使用NeoBundle管理器安装

在你的.vimrc下添加:

NeoBundle 'styled-components/stylelint-processor-styled-components'

… 然后在Vim中运行以下命令:

:source %
:NeoBundleInstall

使用VimPlug管理器安装

在你的.vimrc下添加:

Plug 'styled-components/stylelint-processor-styled-components'

… 然后在Vim中运行以下命令:

:source %
:PlugInstall

使用Pathogen管理器安装

在终端中运行以下命令:

cd ~/.vim/bundle
git clone https://github.com/styled-components/stylelint-processor-styled-components

Ⅳ. 文档说明

# stylelint-processor-styled-components

Lint your styled components with stylelint!

Setup

You need:

• stylelint (duh)
• This processor, to extract styles from styled-components
• The stylelint-config-styled-components config to disable stylelint rules that clash with styled-components
• Your favorite stylelint config! (for example stylelint-config-recommended)

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

Now use those in your .stylelintrc and run stylelint with your JavaScript files!

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

NOTE: The processor works with Flow- and TypeScript-typed files too! (we'll assume TypeScript usage if your files end in .ts or .tsx)

And it also has some options. Their default values are,

{
  "processors": [["stylelint-processor-styled-components", {
    "moduleName": "styled-components",
    "importName": "default",
    "strict": false,
    "ignoreFiles": [],
    "parserPlugins": [
      "jsx",
      ["decorators", { "decoratorsBeforeExport": true }],
      "classProperties",
      "exportExtensions",
      "functionBind",
      "functionSent"
    ]
  }]]
}

• Combining with moduleName, importName and strict, you can tell the processor what kinds of tagged template literals to lint.

import styled, { css, keyframes } from 'styled-components';

// `importName` from `moduleName`, which means where `styled` comes from
styled(Component)``;
styled('div')``;
styled.div``;

// any other imports from `moduleName` (if `strict` is true, they will not be linted)
css``;
keyframes``;

// special extend calls, which have been deprecated in styled-components v4
Component.extend``;

• ignoreFiles is passed to micromatch as the second parameter, which means one or more glob patterns for matching.
• parserPlugins is used to make the processor's parser be able to parse new syntaxes. All available babel parser plugins and related options can be found in Babel's website.

Documentation

Further documentation for this processor lives on the styled-components website!

• Setup
• Webpack
• Interpolation tagging
• Tags
• sc-custom
• Syntax Notes

F.A.Q.

Why does it throw Unexpected token? Even thought the file didn't import styled-components.

You can custom babel plugins by option.parserPlugins now. An API example is our test. But if someone can implement #231, that will be much better.

If your project includes yarn.lock or package-lock.json, an alternative cause can be that babel related dependencies, i.e. @babel/parser and @babel/traverse, are outdated, especially when linting files with new TypeScript syntaxes. You can upgrade them by removing their entries in the lockfile and reinstall dependencies.

Why does it throw unexpected lint errors?

The processor can not always parse interpolations with right things. But you can use interpolation-tagging to help it. If you have ideas to make it more intelligent, feel free to send a PR or share your solution by an new issue.

What's more, if set syntax: css-in-js in stylelint@10, it can extract styles from styled-components without this processor. Even though there are still lots of differences with this processor, we hope this processor's abilities can be migrated to stylelint totally in the future.

I don't want specified tagged template literal to be parsed, i.e. css.

You can set option.strict. More examples are in #258.

License

Licensed under the MIT License, Copyright © 2017 Maximilian Stoiber. See LICENSE.md for more information!

Based on Mapbox' excellent stylelint-processor-markdown, thanks to @davidtheclark!