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

Question

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

我的配置如下：

节点：5.11.0
gulp-stylelint: ^2.0.2
stylelint-selector-bem-模式：^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 but not from 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

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

Answer 2

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 {...}

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

How to make to lint BEM-style using stylelint and stylelint-selector-bem-pattern?

css

lint

postcss

stylelint