Establishing a pre-commit hook for Husky to utilize Prettier in Angular applications

Question

Establishing a pre-commit hook for Husky to utilize Prettier in Angular applications

I am referring to a tutorial on how to set up a Husky pre-commit hook for Prettier in a new Angular project. I want the project files to be automatically formatted to match the committed files, but it seems like something may be missing.

The tutorial suggests configuring Husky like this:

  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.ts": [
      "prettier - write",
      "git add"
    ]
  },

After installing Husky and Prettier with npm i -D husky prettier, I created a src/app/test.ts file to test it out. However, nothing happened when I tried to commit the unformatted content of test.ts file.

How can we make sure that the pre-commit hook is triggered to format the files before committing?

javascript angular typescript git husky

Answer 1

Answer №1

Alright, here is the breakdown of the process.

ng new ngtestprettierhook --style=scss
cd ngtestprettierhook
npm install -D prettier husky
npx husky init

Next, execute the following command (refer to Option 1 instructions on Prettier's website):

npx mrm@2 lint-staged

Your pre-commit file will now resemble this:

ng test --watch=false --browsers=ChromeHeadless
npx lint-staged

Don't forget to update the permissions for the pre-commit script in the husky directory.

chmod u+x .husky/pre-commit

In your package.json, include formatting rules for typescript files as shown below:

"lint-staged": {
  "*.{js,ts,css,md}": "prettier --write"
}

Create a src/app/test.ts file with the provided content:

export class Test { nf:string = "not formatted"     }

Finally, commit your changes by running

git add . && git commit -m "Test"

.

You'll see that the test.ts file has been correctly formatted.

Answer 2

Alright, here is the breakdown of the process.

ng new ngtestprettierhook --style=scss
cd ngtestprettierhook
npm install -D prettier husky
npx husky init

Next, execute the following command (refer to Option 1 instructions on Prettier's website):

npx mrm@2 lint-staged

Your pre-commit file will now resemble this:

ng test --watch=false --browsers=ChromeHeadless
npx lint-staged

Don't forget to update the permissions for the pre-commit script in the husky directory.

chmod u+x .husky/pre-commit

In your package.json, include formatting rules for typescript files as shown below:

"lint-staged": {
  "*.{js,ts,css,md}": "prettier --write"
}

Create a src/app/test.ts file with the provided content:

export class Test { nf:string = "not formatted"     }

Finally, commit your changes by running

git add . && git commit -m "Test"

.

You'll see that the test.ts file has been correctly formatted.

Establishing a pre-commit hook for Husky to utilize Prettier in Angular applications

Answer №1

Similar questions

Arrange a JavaScript map based on its values and ensure that a specific field index remains at the top position

"Tempus Dominus now offering a seamless experience without the need for an

JavaScript - Combine objects by summing values with matching keys

Tips for effectively utilizing codelyzer within Angular 2

Next.js: Generating static sites only at runtime due to getStaticProps having no data during the build phase, skipping build time generation

Show the day of the week

What is the best way to create exclusive toggle buttons using jQuery?

Deactivate a span in real-time using ng-model

Determine the generic parameter of the output type by analyzing the resolved value of a data type within the function

How to effectively trigger a function to load images in React

Divide the toggle buttons into separate rows for better organization

Confirming the authenticity of a property within one entity by comparing it to a property within another entity

Is there a way to update and save both dependencies and devDependencies with a single command in Npm?

Using Rails to render a partial containing a form object

How can I prevent a browser from allowing users to select an image tag?

Angular is able to successfully retrieve the current route when it is defined, but

Creating a popup using JavaScript in an ASP.NET page can be challenging when it comes to passing values

Determine the specific button that was clicked within a React component

Unable to send parameters via URL when making an Ajax request in Rails

Issue encountered while trying to install Angular2 using NPM