简体   繁体   English

如何运行 ng lint 并在预提交时检测错误?

[英]How can I run ng lint and detect errors on pre-commit?

I've got a problem with my pre-commit script.我的预提交脚本有问题。 I'm trying to run "ng lint" of my angular project pre-commit file;我正在尝试运行我的 angular 项目预提交文件的“ng lint”; I see the errors on logs when detects lint errors but the pre-commit processs pass sucessfully.当检测到 lint 错误但预提交过程成功通过时,我会在日志中看到错误。 I need to do ng-lint in pre-commit file because I'm going to run other validations... How can I get the message when the ng lint dont pass sucessfully?我需要在预提交文件中执行 ng-lint,因为我要运行其他验证...当 ng lint 未成功通过时,我如何获得消息?

My script:我的脚本:

#!/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"

Log日志

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

Fixing lint issues on commit修复提交时的 lint 问题

You can fix all lint issues automatically upon commit.您可以在提交时自动修复所有 lint 问题。

Here are the steps:以下是步骤:

Use eslint (substitute YOUR_PROJECT_NAME with the name of your angular project)使用 eslint(将 YOUR_PROJECT_NAME 替换为您的 angular 项目的名称)

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

Install the eslint rules plugin so that you can setup JSON rules:安装 eslint 规则插件,以便您可以设置 JSON 规则:

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

Update .eslintrc.json to use the plugin:更新.eslintrc.json以使用插件:

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

Install prettier, husky, and lint-staged安装 prettier、husky 和 lint-staged

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

install husky globally:全局安装 husky:

npm install husky -g

Install git hooks (this will create the .husky folder):安装 git 挂钩(这将创建.husky文件夹):

husky install  

setup lint-staged by adding the following to package.config :通过将以下内容添加到package.config来设置 lint-staged :

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

Optional: Try lint-staged to test your configuration so far可选:到目前为止,尝试 lint-staged 测试您的配置

npx lint-staged

Add the pre-commit git hook:添加预提交 git 钩子:

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

Modify package.json to add a post-install step to install husky:修改package.json ,增加安装husky的安装后步骤:

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

Testing your setup测试您的设置

Modify some.ts, json, or.html files修改一些.ts、json或.html文件

git add *
git commit -m "updated"

You should see:你应该看到:

[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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM