如何使用 stylelint 和 stylelint-selector-bem-pattern 对 BEM 样式进行 lint？答案

【问题标题】：How to make to lint BEM-style using stylelint and stylelint-selector-bem-pattern?如何使用 stylelint 和 stylelint-selector-bem-pattern 对 BEM 样式进行 lint？
【发布时间】：2016-08-21 17:13:44
【问题描述】：

我正在尝试使用 stylelint 和 stylelint-selector-bem-pattern plugin 对 BEM 样式进行 lint，但无法正常工作。

我的配置如下：

节点：5.11.0
gulp-stylelint: ^2.0.2
stylelint-selector-bem-pattern: ^0.2.3

.stylelintrc

{
    "plugins": [
        "stylelint-selector-bem-pattern"
    ],
    "rules": {
        "selector-bem-pattern": {
            preset: "suit"
        },
    },
    "extends": "@alienlebarge/stylelint-config",
}

还有一个用于测试的 CSS 文件

.12ad2-asd--sad {
    color: rgba(255, 0, 0, .5);
}






#yeah {
    height: 10px;
}

我收到来自@alienlebarge/stylelint-config 的错误消息，但不是来自stylelint-selector-bem-pattern plugin 的错误消息

src/assets/foehn/styles/foehn.css
 4:1  ✖  Unexpected empty line    max-empty-lines
 5:1  ✖  Unexpected empty line    max-empty-lines
 6:1  ✖  Unexpected empty line    max-empty-lines
 7:1  ✖  Unexpected empty line    max-empty-lines
 8:1  ✖  Unexpected empty line    max-empty-lines
 9:1  ✖  Unexpected empty line    max-empty-lines
 9:1  ✖  Unexpected id selector   selector-no-id

【问题讨论】：

标签： css lint postcss stylelint

【解决方案1】：

从这里的代码来看，问题可能是您没有在 CSS 文件的顶部定义组件：https://github.com/postcss/postcss-bem-linter#defining-a-component

【讨论】：

它经常被忽视（甚至被我）。
@davidtheclark 你解决了吗？我正在寻找执行 gulp 任务。如果您可以在此处发布一个可行的解决方案，将会很有帮助。谢谢！

【解决方案2】：

Stylelint 插件只会在定义的组件上运行，在示例中并非如此。

定义在project documentation:

如果插件知道 CSS 的上下文，它只会对 CSS 进行 lint：它是实用程序还是零件。要定义上下文，请使用配置选项根据文件名定义它 (css/components/*.css) 或使用特殊注释来定义其后 CSS 的上下文。定义组件时，需要组件名称。

您可以在stylelintrc.json 处隐式定义：

...,
implicitComponents: 'components/**/*.css',
...

或者在哪个组件上对MyComponent.css有评论：

/** @define ComponentName */

.MyComponent {...}

【讨论】：