abadfish / linter-git-hooks-setup

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Action Item: Quality Built-in

Setup

In this case we are just using some js code as example. You can apply the following setup to any JS code base.

1. Setting up a linter

  1. To use different packages we need to setup the package manager - npm in this folder:
    npm init -y

  1. Add a .gitignore file to leave the node_modules out of your commits:
    echo "node_modules" > .gitignore 
    Save the .gitignore file with the code editor to apply the changes.

  1. Add eslint as a development dependency by running:
    npm install eslint --save-dev

  1. Add a lint script to the package.json file that will lint the code:
      "scripts": {
            ...,
            "lint": "eslint . --fix"
        },

  1. Run the Command Line Initialization script of eslint:

    npm run lint -- --init

    Follow the dialog in the terminal to complete the linter setup. A linter file and all the dependencies will be added depending on your preferences. This are the options chosen in this blueprint: linter-options


  1. Run the linter:

    npm run lint

    You should get at least two linter errors that look like this: Don't worry about them now, we will fix them later.


  1. Install the elint extension for your code editor:


2. Setting up git hooks

  1. Install husky -- easily setup of Git Hooks:
    npm install husky --save-dev

  1. Add a prepare script to the package.json file that will setup husky:
      "scripts": {
            ...,
            "prepare": "husky install"
        },

  1. Run the prepare script to setup husky:
    npm run prepare

  1. Add a hook to run the linter on every commit:
    npx husky add .husky/pre-commit "npm run lint"

  1. Add and commit you code and check the linter runs automatically:
    git add .
    git commit -m "feat: added linter on commit"
    The commit should fail as the linter does not passed. Congratulations! You setup code quality with a standard linter style on each commit!

Wrapping up

  1. Make sure you push and commit your code
  2. Feel free to take the exercise further and experiment yourself with the setup

Made with šŸ§” in Berlin by @CodeWithDragos

About


Languages

Language:JavaScript 90.7%Language:Shell 9.3%