Using Git Hooks for better commits using Angular Prettier Husky
Posted By : Avinash Kumar | 18-Jan-2021
Git hooks let us hook into Git events to add code that can be executed at events different events such as:
• Commit-msg
• Pre-commit
• Pre-push
You can set up Git Hooks in the .git folder inside a Git project. These are written as bash scripts. One that people lacking social skills and wearing square glasses can only like to write(joke).
Step 1: Install prettier
npm install --save-dev prettier
Also Read: GIT IGNORE
Step 2: Configure prettier
{ "bracketSpacing": true, "semi": true, "singleQuote": true, "trailingComma": "es5", "printWidth": 180 }
At the root of the project, create another file namely .prettierignore.
package.json package-lock.json yarn.lock dist
Step 3: TSLint + Prettier
In this step, we will add tslint-config-prettier to disable all conflicting rules creating problems. We do it so that both could be used without any problem. The work gets divided between them to where Prettier takes care of the formatting and tslint takes care of the remaining part.
npm install --save-dev tslint-config-prettier
Also Read: Data Binding in Angular
Step 4: Install pretty-quick
If you do not want prettier to run on the whole project and only run on the changed files you can use pretty-quick.
npm install --save-dev pretty-quick
Step 5: Install husky
Now we arrive at the most significant step of creating Git Hooks. Firstly, we will install husky,
npm install husky --save-dev
Pre hooks can be used in protecting the quality of your code at a much, much higher level. It does so by simply running a shell command which you specify and if the command fails with exit status 1, the process terminates. So it will prevent any broken builds as you won't be able to push the code if your tests are failing or your ts files are not properly lined. :)
"husky": { "hooks": { "pre-commit": "pretty-quick --staged && ng lint && ng test", "pre-push": "ng build --aot true" } }
Also Read: Eager, Lazy, and preloading
Below are the three things we are doing in the pre-commit hook,
- pretty-quick --staged - This will run prettier to format staged files and those files will be re-staged automatically after formatting
- ng lint - It will run the lint command, to check lint errors and warnings
- ng test - This will run the unit test cases of the project
In the pre-push hook, we are creating the build of the project. The best thing is if any of the tasks fail it will terminate the process. This will prevent us from lint errors, fail test cases, and broken build.
Turn To Our SaaS App Development Services
We are a 360-degree software development company that provides cross-platform SaaS app development services to address varied software project requirements. We have an experienced team of Java, PHP, and Python developers who use advanced frameworks, tools, and SDKs to build scalable web and mobile applications with custom features. For more detail, reach us out at [email protected].
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Avinash Kumar
Avinash is a Front-End Developer, having good knowledge of HTML, CSS, Bootstrap and Javascript. His hobbies are internet surfing and likes to listen music.He is dedicated towards his work.