Question

我正在使用stylelint和stylelint-selector-bem-pattern plugin尝试使用BEM风格，但无法使其正常工作。

我的配置如下：

node：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

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

Answer 2

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

根据project documentation：

的定义

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

您可以隐式定义stylelintrc.json：

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

或在MyComponent.css注释的哪个组件：

/** @define ComponentName */

.MyComponent {...}

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

2 个答案: