The documentation shows how to prepare an automated test project for static code analysis and code formatting using Prettier and ESLint
- 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
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.
- 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 }
- 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
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", ] - 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", } - 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", ] - .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" } } "scripts": { "format": "npx prettier --write .", "format:check": "npx prettier . --check \"!**.ts\"", "lint": "npx eslint . --ext .ts --max-warnings=0", }, Automated code verification before commit. Protecting the framework against bugs.
- 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