@meowsos/playwright-eslint-prettier-setup

Description

Modern ESLint + Prettier setup for Playwright Typescript projects, with SonarJS and ESLint Unicorn plugins.

It tries to be very agnostic while at the same time use all available, very opinionated tools from the community, to enforce and automate code quality standards and conventions.

This mono-repo was inspire in this wonderful article here and aims to be a plug-and-play solution for Playwright only code repositories.

• @meowsos/playwright-eslint-prettier-setup
  • Description
  • Requirements
  • Usage
  • Recommended Extensions
  • Contributing

Requirements

Before using this package, you need to have a playwright project in your repository; if you haven't, thy this code:

npm init playwright@latest new-project

And it needs to have a tsconfig.json file in the root folder; if you haven't got one, try:

npx tsc --init

Usage

1. Install the package as a dev dependency:

   npm i -D @meowsos/eslint-config @meowsos/prettier-config

2. Add the following to your package.json: (The rules here are just an example on how to override them if you wish, don't add them.)

   {
     "scripts": {
       "lint": "eslint . --ext .ts",
       "lint:fix": "eslint . --ext .ts --fix",
       "format": "prettier --write .",
       "format:check": "prettier --check ."
     },
     "prettier": "@meowsos/prettier-config",
     "eslintConfig": {
       "extends": "@meowsos/eslint-config",
       "rules": {
         "playwright/expect-expect": 0,
         "playwright/no-networkidle": 0,
         "playwright/no-skipped-test": 0,
         "playwright/valid-title": 0,
         "unicorn/no-nested-ternary": "off"
       }
     }
   }

3. Create a .eslintignore file in the root of your project with the following:

   .vscode/
   node_modules/
   test-results/
   reports/

4. Create a .prettierignore file in the root of your project with the following:

   node_modules/
   reports/
   test-results/
   .bash_history
   *.lock

5. Create a .vscode/settings.json file in the root of your project with the following:

   {
     "editor.defaultFormatter": "esbenp.prettier-vscode",
     "editor.formatOnSave": true,
     "editor.codeActionsOnSave": {
       "source.fixAll.eslint": true
     }
   }

Recommended Extensions

We recommend the following extensions for VSCode, which will be automatically suggested to be installed if you add the following setup.

Create a .vscode/extensions.json file in the root of your project with the following:

{
  "recommendations": [
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "ms-playwright.playwright",
    "ryanrosello-og.playwright-vscode-trace-viewer",
    "yoavbls.pretty-ts-errors"
  ]
}

Contributing

See CONTRIBUTING.md for contribution guidelines.