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

user_15703818 0
Viewed 3864

I've got a problem with my pre-commit script. I'm trying to run "ng lint" of my angular project pre-commit file; I see the errors on logs when detects lint errors but the pre-commit processs pass sucessfully. 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?

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
angular githooks lint bash
1 Answers

Fixing lint issues on commit

You can fix all lint issues automatically upon commit.

Here are the steps:

Use eslint (substitute YOUR_PROJECT_NAME with the name of your angular project)

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:

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

Update .eslintrc.json to use the plugin:

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

Install prettier, husky, and lint-staged

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

install husky globally:

npm install husky -g

Install git hooks (this will create the .husky folder):

husky install

setup lint-staged by adding the following to package.config:

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

Optional: Try lint-staged to test your configuration so far

npx lint-staged

Add the pre-commit git hook:

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

Modify package.json to add a post-install step to install husky:

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

Testing your setup

Modify some .ts, json, or .html files

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
user_36616300
Related