如何使用 stylelint 和 stylelint-selector-bem-pattern 实现 BEM 风格的 lint？

Question

我正在尝试使用 stylelint 和

stylelint-selector-bem-pattern

插件 来检查 BEM 风格，但无法让它工作。

我的配置如下：

• 节点：5.11.0
• gulp-stylelint：^2.0.2
• stylelint-选择器-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

收到错误消息，但不是从

stylelint-selector-bem-pattern

插件

收到错误消息

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 插件只会在定义的组件上运行，但在示例中并非如此。

如项目文档中所定义：

插件只会在知道 CSS 上下文的情况下对 CSS 进行 lint 检查：它是一个实用程序还是一个 成分。要定义上下文，请使用配置选项根据文件名进行定义 (

css/components/*.css

) 或使用特殊注释来定义其后的 CSS 上下文。 定义组件时，需要组件名称。

您可以在

stylelintrc.json

:

处隐式定义

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

或者在哪个组件上添加注释

MyComponent.css

:

/** @define ComponentName */

.MyComponent {...}

Answer 2

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

Answer 3

如果您的项目使用两个破折号 bem，即

block__element--modifier

，您可以安装这个仅具有该规则而没有其他规则的零依赖模块 https://www.npmjs.com/package/stylelint-two-dash-bem-规则