Code Style and Patterns on Git Commit with Angular and .NET - Part 1

Often we hear of Design Patterns, Code Patterns, and other patterns. In the Software Development Life Cycle the step-by-step are represented in the figure:

Between Building and Testing in the major, the developer does his work and sends this to the git repository. Someone does a code review and if there is some problem with patterns and style code, the work returns to the developer to be fixed.

Because of this process frequently we have in our repositories many commits with problems. Maybe, can we decrease commits with issues in our git?

I believe so yes with git hooks! The git hooks are scripts that run automatically whenever a particular event occurs in a Git repository. In this post, I will show you how resolve this problem.

Angular

First, we'll demonstrate this process in an Angular project.

For create a style pattern is necessary create a .editorconfig file. You can learn more about in https://editorconfig.org/. Next, a example of my file.

# Editor configuration, see https://editorconfig.org
root = true

[*]
charset = utf-8
end_of_line = lf
indent_style = space
indent_size = 4
insert_final_newline = false
trim_trailing_whitespace = true
max_line_length = 120

[*.ts]
quote_type = single

[*.md]
trim_trailing_whitespace = false        

The next step is to install lint in our angular application for this runs

ng lint        

Now we create a .eslintrc.json to configure ESlint

{
    "root": true,
    "ignorePatterns": ["projects/**/*"],
    "overrides": [
        {
            "files": ["*.ts"],
            "extends": [
                "eslint:recommended",
                "plugin:@typescript-eslint/recommended",
                "plugin:@angular-eslint/recommended",
                "plugin:@angular-eslint/template/process-inline-templates"
            ],
            "plugins": ["simple-import-sort"],
            "parserOptions": {
                "sourceType": "module",
                "ecmaVersion": "latest"
            },
            "rules": {
                "indent": ["error", 4, { "SwitchCase": 1 }],
                "max-len": ["error", { "code": 120 }],
                "no-debugger": "error",
                "no-console": "warn",
                "simple-import-sort/imports": "error",
                "simple-import-sort/exports": "error",
                "@typescript-eslint/no-explicit-any": "warn",
                "@angular-eslint/template/eqeqeq": "off",
                "@typescript-eslint/no-unused-vars": "error",
                "@typescript-eslint/explicit-member-accessibility": [
                    "error",
                    {
                        "accessibility": "explicit",
                        "overrides": {
                            "accessors": "off",
                            "constructors": "off",
                            "methods": "explicit",
                            "properties": "explicit",
                            "parameterProperties": "explicit"
                        }
                    }
                ],
                "@typescript-eslint/naming-convention": [
                    "error",
                    {
                        "selector": "variable",
                        "format": ["strictCamelCase"]
                    },
                    {
                        "selector": "classMethod",
                        "modifiers": ["private"],
                        "format": ["strictCamelCase"],
                        "leadingUnderscore": "require"
                    },
                    {
                        "selector": "function",
                        "format": ["strictCamelCase"],
                        "leadingUnderscore": "forbid"
                    },
                    {
                        "selector": "parameter",
                        "format": ["strictCamelCase"],
                        "leadingUnderscore": "forbid"
                    },
                    {
                        "selector": "memberLike",
                        "format": ["strictCamelCase"],
                        "leadingUnderscore": "forbid"
                    },
                    {
                        "selector": "memberLike",
                        "modifiers": ["private"],
                        "format": ["strictCamelCase"],
                        "leadingUnderscore": "require"
                    },
                    {
                        "selector": "enumMember",
                        "format": ["StrictPascalCase"]
                    },
                    {
                        "selector": "typeLike",
                        "format": ["StrictPascalCase"]
                    }
                ],
                "@angular-eslint/directive-selector": [
                    "error",
                    {
                        "type": "attribute",
                        "prefix": "app",
                        "style": "camelCase"
                    }
                ],
                "@angular-eslint/component-selector": [
                    "error",
                    {
                        "type": "element",
                        "prefix": "app",
                        "style": "kebab-case"
                    }
                ]
            }
        },
        {
            "files": ["*.html"],
            "extends": ["plugin:@angular-eslint/template/recommended", "plugin:@angular-eslint/template/accessibility"],
            "rules": {
                "@angular-eslint/template/click-events-have-key-events": "off",
                "@angular-eslint/template/interactive-supports-focus": "off",
                "@angular-eslint/template/eqeqeq": "off",
                "@angular-eslint/template/label-has-associated-control": "off",
                "@angular-eslint/template/elements-content": "off"
            }
        }
    ]
}
        

You can configure many rules to validate your code. For more information refer to https://eslint.org/docs/latest/use/configure/.

We want when runs commit validate this and prohibit if has no match with our rules. For this install husky and initialize

npm install husky --save-dev
npx husky init        

If want a format code pattern you can use a prettier

npm install --save-dev --save-exact prettier        

Maybe you are in a legacy system and thinking that is not to you. But I can apply this in your project. We have a special package to help this.

npm install lint-staged --save-dev        

This allow us to apply our check pattern only files staged on git repository. Before install the package lint-staged add in your package.json

"lint-staged": {
    "*.{json,css,sass,scss,less}": "npx prettier --write",
    "*.{ts,html}": [
         "npx eslint --fix",
         "npx prettier --write"
    ]
}        

You can learn more about this in https://github.com/lint-staged/lint-staged.

Finally in .husky\pre-commit change the content by

npx lint-staged        

When you configure all this your IDE will show all problems that you have

If you try commit this, you will receive

With this you guarantee that the commit has a code style and patterns. When all resolve naming convention and do a new commit.

I confess maybe for you this is not necessary, mainly, if you are in a little team. In a big team, my case, its necessary to implement.

We did this in an angular project, but we can apply to a .NET project. In the next article I will show you how apply.

If you like this article, left your comment or like. Thanks!