將 stylelint 與 angular 構建集成並使其因錯誤而失敗？

Question

例如，我想在 angular 應用程序中使用stylelint來強制執行 class 名稱（如果需要，它們應該是小寫和破折號，而不是駝峰式或大寫）。

如何配置stylelint以在 Angular 構建時運行（就像 Angular 運行 TSLint）。 或者 TSLint 可以強制執行樣式規則嗎？

建議是當我在stylelint規則中有錯誤時，Angular 構建將失敗。

Answer 1

根據 stylelint 的文檔，您可以將selector-class-pattern與 kebab-case 模式一起使用^([az][az]*)(-[az]+)*$ 。 此模式僅允許小寫字母和這些字母之間的破折號。 如果您還想允許數字，您可以使用這個^([az][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]+)*$"

我希望它有所幫助:)

編輯：根據這篇文章，為了與 angular 構建集成，在 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 進行 lint。

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

PS：我是這個package的作者。