如何運行 ng lint 並在預提交時檢測錯誤？

Question

我的預提交腳本有問題。 我正在嘗試運行我的 angular 項目預提交文件的“ng lint”； 當檢測到 lint 錯誤但預提交過程成功通過時，我會在日志中看到錯誤。 我需要在預提交文件中執行 ng-lint，因為我要運行其他驗證...當 ng lint 未成功通過時，我如何獲得消息？

我的腳本：

#!/bin/bash

### other scripts to validate custom commits

-----------



### Run ng lint

echo "pre-commit hook --> linting" ng lint

ng lint

echo -e "ng lint pass sucessfully \n\n"

日志

pre-commit hook --> linting
Linting "front-firefly-backoffice"...
/home/apanez/Escritorio/htdocs/eci/front-firefly/src/app/stock/limit-sale/components/limit-sale-detail/limit-sale-detail.component.ts:30:14
ERROR: 30:14  component-class-suffix  The name of the class LimitSaleDetailComp should end with the suffix Component (https://angular.io/styleguide#style-02-03)

Lint errors found in the listed files.

ng lint pass sucessfully

Answer 1

修復提交時的 lint 問題

您可以在提交時自動修復所有 lint 問題。

以下是步驟：

使用 eslint（將 YOUR_PROJECT_NAME 替換為您的 angular 項目的名稱）

ng add @angular-eslint/schematics
ng g @angular-eslint/schematics:convert-tslint-to-eslint YOUR_PROJECT_NAME

安裝 eslint 規則插件，以便您可以設置 JSON 規則：

npm install --save-dev eslint-plugin-json

更新.eslintrc.json以使用插件：

{
  "extends": ["plugin:json/recommended"],
   ...
}

安裝 prettier、husky 和 lint-staged

npm install --save-dev prettier husky lint-staged

全局安裝 husky：

npm install husky -g

安裝 git 掛鈎（這將創建.husky文件夾）：

husky install  

通過將以下內容添加到package.config來設置 lint-staged ：

  "devDependencies: {
     ...
  },
  "lint-staged": {
    "*.{js,json,css,scss,md,ts,html}": [
      "prettier --write",
      "eslint --fix"
    ]
  }

可選：到目前為止，嘗試 lint-staged 測試您的配置

npx lint-staged

添加預提交 git 鈎子：

husky add .husky/pre-commit "npx lint-staged"

修改package.json ，增加安裝husky的安裝后步驟：

"scripts": {
  "postinstall": "husky install && husky add .husky/pre-commit \"npx lint-staged\"",
   ...
},

測試您的設置

修改一些.ts、json或.html文件

git add *
git commit -m "updated"

你應該看到：

[STARTED] Preparing...
[SUCCESS] Preparing...
[STARTED] Running tasks...
[STARTED] Running tasks for *.{js,json,css,scss,md,ts,html}
[STARTED] prettier --write
[SUCCESS] prettier --write
[STARTED] eslint --fix
[SUCCESS] eslint --fix
[SUCCESS] Running tasks for *.{js,json,css,scss,md,ts,html}
[SUCCESS] Running tasks...
[STARTED] Applying modifications...
[SUCCESS] Applying modifications...
[STARTED] Cleaning up...
[SUCCESS] Cleaning up...
[master 20fdf85] updated