@@ ESLINT @@

Eslint Dependencies

eslint

npm install --save-dev eslint

typescript-eslint/parser

npm install --save-dev @typescript-eslint/parser

@typescript-eslint/eslint-plugin

npm install --save-dev @typescript-eslint/eslint-plugin

Create Configuration file

** create .eslintrc file in root directory and add below configuration in it **

    {
        "parser": "@typescript-eslint/parser",
        "extends": [
            "airbnb/base",
            "plugin:@typescript-eslint/recommended",
            "plugin:import/errors",
            "plugin:import/warnings",
            "plugin:import/typescript"
        ],
        "parserOptions": {
            "ecmaVersion": 2018,
            "project": "./tsconfig.json"
        },
        "rules": {
            "semi": ["error", "always"],
            "object-curly-spacing": ["error", "always"],
            "camelcase": "off",
            "@typescript-eslint/explicit-function-return-type": "off",
            "@typescript-eslint/no-explicit-any": 1,
            "@typescript-eslint/no-inferrable-types": [
                "warn",
                {
                "ignoreParameters": true
                }
            ],
            "no-underscore-dangle": "off",
            "no-shadow": "off",
            "no-new": 0,
            "@typescript-eslint/no-shadow": ["error"],
            "@typescript-eslint/no-unused-vars": "warn",
            "quotes": [2, "single", { "avoidEscape": true }],
            "class-methods-use-this": "off",
            "import/extensions": [
                "error",
                "ignorePackages",
                {
                "js": "never",
                "jsx": "never",
                "ts": "never",
                "tsx": "never"
                }
            ]
        }
    }

Add action script in package.json

• To run eslint "lint": "eslint *.ts"
• To fix all aut-fixable errors "lint-fix": "eslint --fix *.ts"

prettier

npm install -save-dev prettier eslint-config-prettier

npm install -save-dev eslint-plugin-prettier

Create Configuration file

create .prettierrc file in root directory and add below configuration in it

   {
   "semi": true,
   "trailingComma": "all",
   "singleQuote": true

}

"prettier" to the "extends" array in your .eslintrc._ file. so it gets the chance to override other configs. the "prettier" entry in "plugins" array in your .eslintrc._ file. Also add the net "prettier/prettier": ["error"] entry in "rules" object in your .eslintrc.* file.

````java

{

"parser": "@typescript-eslint/parser", "plugins": [ "prettier" ], "rules": { "prettier/prettier": [ "error" ], "semi": [ "error", "always" ], "object-curly-spacing": [ "error", "always" ], "camelcase": "off", "@typescript-eslint/explicit-function-return-type": "off", "@typescript-eslint/no-explicit-any": 1, "@typescript-eslint/no-inferrable-types": [ "warn", { "ignoreParameters": true } ] }, "extends": [ "plugin:playwright/playwright-test", "eslint:recommended", "plugin:@typescript-eslint/eslint-recommended", "plugin:@typescript-eslint/recommended", "plugin:import/errors", "plugin:import/warnings", "prettier", "plugin:import/typescript" ] }

## Add action script in package.json

To run prettier "pretty": "prettier --write '\*.ts'"

# Husky

## Install the dependencies

husky
You can use it to lint your commit messages, run tests, lint code, etc... when you commit or push. Husky supports all Git hooks.

- npm install -save-dev husky

## Add action script in package.json

Edit package.json > prepare script and run it once
"prepare": "husky install"
Add the hooks action script "precommit" and "prepush" in package.json
"precommit": "npm run lint-fix && npm run pretty"
"prepush": "npm run lint"

## Add the git hooks Actions

Add the pre-commit in .husky folder and which is created after running npm run prepare

- Add below script in pre-commit file

  ```java
  #!/bin/sh
  . "$(dirname "$0")/_/husky.sh"

  npm run precommit

• Add the pre-push in .husky folder and which is created after running npm run prepare

Add below script in pre-push file

    #!/bin/sh
    . "$(dirname "$0")/_/husky.sh"

    npm run prepush

execute the below command on terminal to hook get executable by default

Because files are not executable by default; they must be set to be executable

• chmod ug+x .husky/*
• chmod ug+x .git/hooks/*

@@ lint stage @@

Usually one would run the code quality check on the whole project in the git hook scripts. lint-staged helps you to run any process or jobs on just the files changed and staged for the commit. If you have 10 modified files in your git repository, and you have staged only two files for committing, lint-staged will work on only those two files and nothing else.