时间戳

首页 > 解决方案 > 将 stylelint 与 angular build 集成并使其因错误而失败？

angular - 将 stylelint 与 angular build 集成并使其因错误而失败？

问题描述

例如，我想stylelint在角度应用程序中使用来强制类名（如果需要，它们应该是小写和破折号，而不是驼峰式或大写）。

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

建议是当我在规则中有错误时，stylelintAngular 构建将失败。

标签： angulartslintstylelint

解决方案

根据 stylelint 的文档，您可以将selector-class-pattern与 kebab-case 模式一起使用^([a-z][a-z]*)(-[a-z]+)*$。此模式仅允许小写字母和这些字母之间的破折号。如果您还想允许数字，则可以将其^([a-z][a-z0-9]*)(-[a-z0-9]+)*$与每个以字母开头的字母数字组一起使用。

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

你可以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"
  },

推荐阅读