css - 如何使用 stylelint 和 stylelint-selector-bem-pattern 来 lint BEM 风格？

Question

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

我的配置如下:

• 节点: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

Answer 1

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

定义在 project documentation :

The plugin will only lint the CSS if it knows the context of the CSS: is it a utility or a component. To define the context, use the configuration options to define it based on the filename (css/components/*.css) or use a special comment to define context for the CSS after it. When defining a component, the component name is needed.

您可以在 stylelintrc.json 中隐式定义:

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

或者在 MyComponent.css 中添加注释的组件:

/** @define ComponentName */

.MyComponent {...}