Интегрировать stylelint с угловой сборкой и сделать так, чтобы она не работала при ошибке? - PullRequest
Новая
       23

Интегрировать stylelint с угловой сборкой и сделать так, чтобы она не работала при ошибке?

1 голос
/ 22 октября 2019

Я хочу использовать stylelint в угловом приложении, например, для принудительного применения имени класса (при необходимости они должны быть строчными и черточными, а не прописными или прописными).

Как настроить stylelintработать во время сборки Angular (точно так же, как Angular run TSLint). Или TSLint может применять правила стиля?

Предполагается, что когда у меня возникает ошибка в правиле stylelint, сборка Angular завершится неудачей.

1 Ответ

0 голосов
/ 22 октября 2019

В соответствии с документацией stylelint вы можете использовать шаблон-селектор-шаблон с шаблоном кебаб-чехла ^([a-z][a-z]*)(-[a-z]+)*$. Этот шаблон допускает только строчные буквы и тире между этими буквами. Если вы хотите разрешить также цифры, вы можете использовать эту ^([a-z][a-z0-9]*)(-[a-z0-9]+)*$ для каждой буквенно-цифровой группы, начинающейся с буквы.

Вы также можете взглянуть на resolNestedSelectors параметр selector-class-pattern, есливам это нужно.

Вы можете использовать его в своем файле stylelint-config.json, например, this , 

"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"
  },
...