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

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

1. Prettier settings
2. ESLint setup
3. ESLint setup for Playwright
4. ESLint + Prettier setup

2. Import management
3. Final settings
4. Adds scripts in package.json
5. 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

⬆️ Go up! ⬆️