Setup Prettier Pre commit

[lambeboluwatife]

What does this PR do?

This PR adds a pre-commit hook that runs prettier against code to be committed. This would ensure the enforcement of our code convention.
This can re-format your files that are marked as “staged” via git add before you commit.

Description of Task to be Completed

• install prettier-eslint, prettier-eslint-cli, and lint-staged as a dev dependency
• install husky with npx husky-init. This command will install Husky as a development dependency and create a simple pre-commit hook in .husky/pre-commit that you can edit.
• Inside .husky/pre-commit replace npm test with npx lint-staged.
• Add "prepare": "husky install" inside the script object in package.json
• In the root directory of your project, create the file .lintstagedrc.json with the following contents:

{
  "*.js": [
    "prettier --write",
    "eslint"
  ],
  "*.html": [
    "eslint",
    "prettier --write"
  ],
  "*.css": "prettier --write"
}

• Add a lint-staged script in package.json with the following content:

 "*.js": [
      "npm run lint",
      "prettier --write",
      "git add ."
    ]

How should this be manually tested?

1. Clone the repository.
2. Switch to the pre-commit branch
3. Upon running npm install in the command line, all project dependencies should be installed in the local dev environment
4. After changes in a js file, upon git add . and git commit, pre-commit should run and report any formatting errors or warnings.

Any background context you want to provide?

Pre-commit hooks can be used to ensure that code adheres to specific formatting and style guidelines. This can include enforcing indentation, spacing, line breaks, and naming conventions. By using pre-commit hooks for code formatting and standards, developers can ensure that code is consistent and easy to read.

What are the relevant GitHub Issues?

#6

Screenshots (if appropriate)

Error Testing

According the rule set in the eslint file, semi colon should not be allowed. Then try git commit with semi-colon in a file then pre-commit throws a warning.
Example:

[JUNNY12]

@lambeboluwatife
I just checked out what you have done. I'm not quite clear on how to manually test it out. After switching to your branch and installing the necessary dependencies, I'm unsure about what to do next. Could you please provide further guidance.

[SageKyle]

Hey @lambeboluwatife your PR message doesn't seem to follow the template. I'm not sure how to test it.

What you wrote under How should this be manually tested? should be under Description of Task to be completed?.

Since you did the installation/configuration, I shouldn't need to install any of these packages individually to test your PR; I can simply run npm install to install all the packages at once, and make sure I'm using exactly the same version with you.

Then after installing the packages, what next? How do I know that it's working?

Just in case you're not aware, you can click the three dots to edit the PR message:

Well done 👏

[theaderonkeadebisi]

Check other PR messages, take note of the format and the tenses then make corrections to yours.

[SageKyle]

Hey @lambeboluwatife, the commit message looks great so far.

Here's my challenge: after following the instructions in your commit message, I didn't notice any error message to prove that your PR is working.
The error messages I got: Unexpected console statement. is based on the ESLint config - or is this what I'm expected to see?

My suggestion:
provide an example of a change I should make, a commit message, along with the error I am supposed to see to prove that the PR is working.

I'm not sure about this, but I couldn't find prettier in the devDependencies.
This is from the Prettier docs on creating a pre-commit hook:

Make sure Prettier is installed and is in your devDependencies before you proceed.

please ignore this if you've already done that

I'll also recommend you check out this resource on configuring Prettier with ESLint.

[lambeboluwatife]

Hey @lambeboluwatife, the commit message looks great so far.

Here's my challenge: after following the instructions in your commit message, I didn't notice any error message to prove that your PR is working. The error messages I got: Unexpected console statement. is based on the ESLint config - or is this what I'm expected to see?

My suggestion: provide an example of a change I should make, a commit message, along with the error I am supposed to see to prove that the PR is working.

I'm not sure about this, but I couldn't find prettier in the devDependencies. This is from the Prettier docs on creating a pre-commit hook:

Make sure Prettier is installed and is in your devDependencies before you proceed.

please ignore this if you've already done that

I'll also recommend you check out this resource on configuring Prettier with ESLint.

Hey @lambeboluwatife, the commit message looks great so far.

Here's my challenge: after following the instructions in your commit message, I didn't notice any error message to prove that your PR is working. The error messages I got: Unexpected console statement. is based on the ESLint config - or is this what I'm expected to see?

My suggestion: provide an example of a change I should make, a commit message, along with the error I am supposed to see to prove that the PR is working.

I'm not sure about this, but I couldn't find prettier in the devDependencies. This is from the Prettier docs on creating a pre-commit hook:

Make sure Prettier is installed and is in your devDependencies before you proceed.

please ignore this if you've already done that

I'll also recommend you check out this resource on configuring Prettier with ESLint.

Thanks for your suggestion, I have fixed it. Hopefully, you understand, and prettier is installed as a dev dependency, I don't know why it isn't in the package.json file