Project configuration for the Quality Gates (static code analysis)

The documentation shows how to prepare an automated test project for static code analysis and code formatting using Prettier and ESLint

QA

Dominik Calak

Playwright Test installation, extensions and settings
Taking care of code quality

Prettier settings

ESLint setup

ESLint setup for Playwright

ESLint + Prettier setup

Import management
Final settings
Adds scripts in package.json
Husky

1. Playwright Test installation, extensions and settings

Install the extension “Playwright Test for VSCode”

Add the Playwright skeleton to the project

use “Ctrl Shift P”

type and choose the action “Test: Install Playwright”

optionally, leave only the check mark for the Chromium browser, click Ok

Install more extension like:

Prettier

Code Spell Checker

Material Icons Theme

ESlint

VSC settings

create .vscode folder

into .vscode folder create settings.json file with settings:

{
 "editor.formatOnSave": true,
 "editor.defaultFormatter": "esbenp.prettier-vscode"
}

Enable two options: formatting on save and Prettier as the default formatter.

go File -> Auto Save

click “right” -> Format Document With.. -> Prettier - Code formatter

2. Taking care of code quality

Prettier: formatting various files to assumed standards. ESLint: indicating errors in the code of JS/TS files.

The areas of both tools overlap, so they need to be connected.

1. Prettier settings

Open Terminal and type command:

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

Create .prettierignore file with settings:

package-lock.json
playwright-report
test-results

Create .prettierrc.json file and set settings:

{
 "singleQuote": true,
 "endOfLine": "auto",
 "tabWidth": 2,
 "semi": true
}

2. ESLint setup

Install ESLint

npm install eslint --save-dev

Configure ESLint

npm init @eslint/config

Then follow rules:

? How would you like to use ESLint?
 >To check syntax and find problems
? What type of modules does your project use?
 >JavaScript modules (import/export)
? Which framework does your project use?
 >None of these
? Does your project use TypeScript? 
 >Yes
? Where does your code run?
 > (click " i ") Node
? What format do you want your config file to be in?
 >JSON
? Would you like to install them now?
 > Yes
? Which package manager do you want to use?
 >npm

Then you will see new file .eslintrc.json

3. ESLint setup for Playwright

npm install eslint-plugin-playwright --save-dev

add this package to extends in .eslintrc.json file

 "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:playwright/playwright-test",
  ]

4. ESLint + Prettier setup

Install package (Resolving conflicts between Prettier and ESLint)

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

Running Prettier as a rule for ESLint

npm install eslint-plugin-prettier@latest --save-dev

add prettier package to extends and plugins in .eslintrc.json file

 "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:playwright/playwright-test",
    "prettier"
  ],

},
 "plugins": ["@typescript-eslint", "prettier"],

Create .eslintignore file

package-lock.json
playwright-report
test-results

run ESLint

npx eslint . --ext .ts --max-warnings=0

on parserOptions ( .eslintrc.json ) list add

"warnOnUnsupportedTypeScriptVersion": false

on rules ( .eslintrc.json ) list add

 "rules": {
    "prettier/prettier": "warn",
    "@typescript-eslint/explicit-function-return-type": "error",
   "no-console": "warn",
}

3. Import management

install package

npm install --save-dev @trivago/prettier-plugin-sort-imports

In the Prettier configuration .prettierrc.json

   "importOrderSeparation": true,
    "importOrderSortSpecifiers": true,
    "plugins": ["@trivago/prettier-plugin-sort-imports"]

Setting to remove unused imports when saving to VSC: .vscode/settings.json

   "editor.codeActionsOnSave": {
        "source.organizeImports": "explicit"
}

add to the .prettierrc.json file

"plugins": ["@trivago/prettier-plugin-sort-imports"]

add to settings.json

"cSpell.words": [
"trivago",
]

4. Final settings

.vscode > settings.json

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "cSpell.words": ["trivago"],
  "editor.codeActionsOnSave": {
    "source.organizeImports": "explicit"
  }
}

.prettierrc.json

{
 "singleQuote": true,
 "endOfLine": "auto",
 "tabWidth": 2,
 "semi": true,
 "importOrderSeparation": true,
 "importOrderSortSpecifiers": true
  "plugins": ["@trivago/prettier-plugin-sort-imports"]
}

.eslintrc.json

{
  "env": {
    "es2021": true,
    "node": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:playwright/playwright-test",
    "prettier"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module",
    "warnOnUnsupportedTypeScriptVersion": false
  },
  "plugins": ["@typescript-eslint", "prettier"],
  "rules": {
    "@typescript-eslint/explicit-function-return-type": "error",
    "no-console": "warn",
    "prettier/prettier": "warn"
  }
}

5. Adds scripts in package.json

  "scripts": {
    "format": "npx prettier --write .",
    "format:check": "npx prettier . --check \"!**.ts\"",
  "lint": "npx eslint . --ext .ts --max-warnings=0",
  },

5. Husky

Automated code verification before commit. Protecting the framework against bugs.

1. Preparing Husky

Install Husky package

npm install husky --save-dev

Install Husky in project

npx husky init

Adding a linting command to Husky before the commit action

echo "npm run lint" > .husky/pre-commit

Configuration verification: .husky folder, pre-commit file

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

npm run lint

DominikCLK/Wiki-for-Project-configuration-for-the-Quality-Gates-static-code-analysis