如何從命令行檢查 Angular *.html 文件？

Question

我想通過命令行檢查 html angular 模板文件，類似於：

ng lint

我想驗證 Angular html 模板以檢查它們是否有效以及變量是否正確，因此我可以在 Travis 或 AWS Codebuild 等 CI 管道中運行它。

Visual Studio 代碼運行 Angular 語言服務，可以執行以下操作：

我想要的是捕獲這些錯誤，這樣我就不會讓無效的 Angular html 模板進入版本。

我怎樣才能做到這一點？

Answer 1

您在這里看到的實際上是 Typescript 錯誤，而不是 lint 錯誤。

有一個選項fullTemplateTypeCheck允許您在激活 AOT 時在構建期間捕獲此類錯誤：

此選項告訴編譯器啟用使用 TypeScript 驗證綁定表達式的模板編譯器的綁定表達式驗證階段。

此選項默認為 false。

注意：建議將此設置為 true，因為此選項將來會默認為 true。

這實際上會大大減慢您的構建速度，因此如果您只想在 CI 管道中使用它，您可以做什么：

在 tsconfig.app.json 旁邊創建一個新的 tsconfig.strict.json，如下所示：

{
  "extends": "./tsconfig.app.json",
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}

在 angular.json 中，在 projects>YourProject>architect>build>configurations 下添加一個新的配置“strictProd”，如下所示：

"strictProd": {
   "tsConfig": "src/tsconfig.app.strict.json",
   "aot": true
   [...your other prod settings here],
}

使用ng build -c strictProd運行它

Answer 2

我發現的最好的東西是 html 提示節點包。 你可以在這里閱讀： https : //htmlhint.com/docs/user-guide/getting-started

這是與 Angular 一起使用的 .htmlhintrc 的設置。

{ "tagname-lowercase": true, "attr-lowercase": false, "attr-value-double-quotes": true, "attr-value-not-empty": false, "attr-no-duplication": true , "doctype-first": false, "tag-pair": true, "tag-self-close": true, "empty-tag-not-self-closed": true, "spec-char-escape": false , "id-unique": false, "src-not-empty": true, "title-require": true, "alt-require": true, "doctype-html5": true, "id-class-value" : "true", "style-disabled": true, "inline-style-disabled": true, "inline-script-disabled": true, "space-tab-mixed-disabled": "true", "id- class-ad-disabled": true, "href-abs-or-rel": false, "attr-unsafe-chars": true, "head-script-disabled": true }

Answer 3

嘗試運行“ npm run lint -- --fix ”這將自動解決項目中的所有lint錯誤