将样式lint 与角度构建集成并使其在错误时失败?

Question

例如，我想在角度应用程序中使用stylelint来强制执行类名(如有必要，它们应该为小写和破折号，而不是驼峰大小写或大写(。

如何配置stylelint在 Angular 构建时运行(就像 Angular 运行 TSLint 一样(。或者 TSLint 可以强制执行样式规则吗？

建议是当我在规则中遇到错误时stylelint那么 Angular 构建将失败。

Answer 1

根据 stylelint 的文档，您可以将选择器类模式与烤肉串大小写模式一起使用^([a-z][a-z]*)(-[a-z]+)*$。此模式只允许在这些字母之间使用小写字母和短划线。如果您还想允许数字，则可以将这一个^([a-z][a-z0-9]*)(-[a-z0-9]+)*$用于每个以字母开头的字母数字组。

如果需要，您还可以查看selector-class-pattern的 resolveNestedSelectors 选项。

您可以在stylelint-config.json文件中以某种方式使用它，如下所示，

"selector-class-pattern": ["^([a-z][a-z]*)(-[a-z]+)*$", {
"resolveNestedSelectors": false
}

或者只是，

"selector-class-pattern": "^([a-z][a-z]*)(-[a-z]+)*$"

我希望它对:)有所帮助

编辑：根据这篇文章，为了与角度构建集成，在你的package.json中，你可以让你的脚本看起来像这样：

"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "npm run lint && ng build",
"test": "ng test",
"lint": "ng lint && npm run lint:styles",
"lint:styles": "stylelint "apps/**/*.scss" && stylelint "libs/**/*.scss"",
"e2e": "ng e2e"
},

Answer 2

Angular 提供了一个用于 linting ng lint 的命令。

有一个第三方 CLI 构建器可用于集成 ESLint 和 stylelint。然后你可以运行ng lint，它会用ESLint和stylelint来棉绒。

https://github.com/krema/angular-eslint-stylelint-builder

PS：我是这个包的作者。