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

Question

我正在尝试使用stylelint和stylelint-selector-bem-pattern插件来检查 BEM 风格，但无法让它工作。

\n\n

我的配置如下：

\n\n

\n
• 节点：5.11.0
\n
• gulp-stylelint: ^2.0.2
\n
• stylelint-选择器-bem-模式：^0.2.3
\n

\n\n

.stylelintrc

\n\n

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

\n\n

以及用于测试的 CSS 文件

\n\n

.12ad2-asd--sad {\n    color: rgba(255, 0, 0, .5);\n}\n\n\n\n\n\n\n#yeah {\n    height: 10px;\n}\n

\n\n

我从插件中收到错误消息@alienlebarge/stylelint-config，但不是从stylelint-selector-bem-pattern插件中收到错误消息

\n\n

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

\n

Answer 1

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