Lint Staged With Husky for Pre-commit Validations

[@MonsterlessonsAcademy]

WATCH NEXT: Javascript Interview Questions and Answers - Dominate Your Next Interview - ua-cam.com/video/wnYKH2dO620/v-deo.htmlsi=5DfbGEfhXWiiv0a_

[@karthikeyan878]

Thank you so much for post the requested video. We want a video with Angular project.

[@MonsterlessonsAcademy]

I will add it to the list of ideas

[@wojts7212]

amazing explanation, thanks. Very high quality content, keep going bro

[@MonsterlessonsAcademy]

Glad you liked it!

[@damagee8141]

For anyone watching this video: Remember not to install eslint, lint-staged, husky and prettier as dependencies but as devDependencies instead.

[@MonsterlessonsAcademy]

You are totally right but only if people install later packages for prod only.

[@feeelgoood]

one more good Oleksandr's lesson

[@MonsterlessonsAcademy]

Thank you!

[@Issanjeewa]

Great explanation, thanks 👍👍

[@MonsterlessonsAcademy]

Glad it was helpful!

[@nikhilev3840]

Do we need them in dependency? I think we can install them as devDependancy right? The official documentation says so.

[@MonsterlessonsAcademy]

dev dependency is better

[@playyourway2963]

Thank you Sir ! clean & short ♥you earn my sub

[@MonsterlessonsAcademy]

Welcome!

[@arnaldoceballos4653]

Hello, question...in an Angular project, how can you execute the scripts defined in package.json in a git hook? For example, if you define in .lintstagedrc { "src/**/*.{ts,html}": "npm run lint" } and in package.json the script "lint": "ng lint", it does not recognize the command

[@MonsterlessonsAcademy]

Unfortunately I don't help with debugging custom problems in UA-cam comments.

[@arnaldoceballos4653]

@@MonsterlessonsAcademy My question is if in an Angular project it is possible from lint-staged to run the scripts defined in package.json. I couldn't achieve this.

[@techakayy]

Nice one mate! So, am I right it understanding that the pre-commit is primarily for fail-on-linting attempt (eslint) & not for formatting? Because any formatting write by prettier when git commit would be unstaged.

[@MonsterlessonsAcademy]

Prettier is fine as well as a check but not as an autoformat as it will make files unstaged.

[@techakayy]

@@MonsterlessonsAcademy Thank you!

[@user-rm6zp3pe7y]

it worked

[@MonsterlessonsAcademy]

As expected!

[@fl1pp1x]

I have an issue - when i run "npx lint-staged" i have only one tasks call but if i do the same with pre-commit hook which calles the same "npx lint-staged" i have too many callings of tasks (50+), wdyt about this issue?, i cant imagine what is going wrong...

[@fl1pp1x]

"lint-staged": {
"src/**/*.{js,jsx,ts,tsx,json,css,md,yml,yaml}": [
"prettier --write"
],
"src/**/*.{js,jsx,ts,tsx}": [
"eslint --max-warnings=0"
]
},

[@fl1pp1x]

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
npx lint-staged

[@MonsterlessonsAcademy]

I'm sorry I never had such issue.

[@mdalishanali476]

thanks bro

[@MonsterlessonsAcademy]

Welcome

[@tuanvominh3219]

Amazing video 😄😄

[@MonsterlessonsAcademy]

Thanks 😁

[@Nickdaplayer]

Hi, nice tutorial! Do I push the .husky-folder to the repository to ensure that other developers can use pre-commit hooks automatically? Or what is the best practice for that?

[@MonsterlessonsAcademy]

If you want the same behaivour for everybody then yes you push it.

[@booi_mangang]

do you still need these setups when the code automatically formatt and prettify itself when ctrl + s??

[@MonsterlessonsAcademy]

Yes sure. You ctrl + s just calls prettier

[@booi_mangang]

@@MonsterlessonsAcademy So, I don’t need to set all these up, right?

[@jeffnikelson5824]

jetbrains IDEs have that in pre commit settings integrated already, don't they?

[@MonsterlessonsAcademy]

Maybe but the idea is to install pre commit hooks automatically on the machine of every developer and not be dependent on IDE.

[@jeffnikelson5824]

@@MonsterlessonsAcademy Oh yes right, now i get your point!

[@MominKhan-sm3gh]

Hey! Can you help me with the error given below when I run npx lint-staged.
Error: > Couldn't find any `pages` or `app` directory. Please create one under the project root
at findPagesDir (C:\Users\momin.hayat\Desktop\ops-2-next
ode_modules
ext\dist\lib\find-pages-dir.js:42:15)
"lint-staged": {
"src/**/*.{js,html,css}": "prettier --write",
"src/**/*.{ts,tsx}": "next lint"
}
and my folder structure is following
src/app/*

[@MonsterlessonsAcademy]

Unfortunately I don't help with debugging custom code

[@g-luu]

Nice tutorial would have been nice if it was angular specific.

[@MonsterlessonsAcademy]

My next video will be exactly about Typescript and Eslint

[@g-luu]

@Miguel A Thanks will check it out.