Having trouble getting plugin to work

[autovaton]

I installed eslint-plugin-playwright and it installed to the node_modules directory underneath my playwright project. I created an eslint.config.js file with the following structure:

import playwright from 'eslint-plugin-playwright';

export default [
playwright.configs['flat/recommended'],
{
rules: {
"playwright/expect-expect": [
"error"
],
},
},
];

I tried to run npx eslint and I got the error "Cannot use import statement outside a module". I added "type" : "module" to the package.json of my playwright directory, and now I am getting this error:

"The requested module 'eslint-plugin-playwright' does not provide an export named 'playwright'."

I am not sure what to do at this point, but thte README instructions do not seem to work as presented.

Any help would be appreciated. Thanks!

[joebiker]

I had better success with .eslintrc

{
    "extends": ["plugin:playwright/recommended"],
    "plugins": ["playwright"],
    "ignorePatterns": ["Env.js"],
    "parserOptions": {
        "sourceType": "module",
        "ecmaVersion": 2020
    },
    "rules": {
      "playwright/expect-expect": "error",
      "playwright/prefer-lowercase-title": "off",
      "playwright/prefer-to-be": "error",
      "playwright/prefer-to-have-length": "error",
      "playwright/prefer-strict-equal": "error"
    }
  }
  

[autovaton]

I tried this and I can get eslint and typescript-eslint rules working, but whenever I add plugin:playwright/recommended, it stops linting altogether and recognizes none of the rules.

[autovaton]

Can you show me the rest of the file. Any imports at the top?

[autovaton]

This is what I have now:

module.exports = {
  "extends": [
    "plugin:playwright/recommended",
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
  ],
  "plugins": [
    "playwright",
    "@typescript-eslint",
  ],
  "ignorePatterns": ["Env.js"],
  "parserOptions": {
    "sourceType": "module",
    "ecmaVersion": 2020
  },
  "rules": {
    // **********************
    // Typescript: Errors
    // **********************
    indent: ["error", 2],
    semi: ["error", "always"],

    // **********************
    // Typescript: Warnings
    // **********************
    "prefer-const": 'warn', // ts provides better types with const
    "require-await": "warn",

    "@typescript-eslint/no-unused-vars": "warn",

    // **********************
    // Playwright: Errors
    // **********************
    "playwright/expect-expect": ["error",],
    // "playwright/missing-playwright-await": ["error",],
    // "playwright/prefer-lowercase-title": ["error",],
    // "playwright/require-top-level-describe": ["error",],
    // "playwright/valid-expect": ["error",],
    // "playwright/valid-title": ["error",],

    // **********************
    // Playwright: Warnings
    // **********************
    // "playwright/no-useless-await": ["warn",],
    // "playwright/no-focused-test": ["warn",],
    // "playwright/no-skipped-test": ["warn",],
    // "playwright/no-raw-locators": ["warn",],
    // "playwright/no-useless-not": ["warn",],
    // "playwright/prefer-to-contain": ["warn",],
    // "playwright/prefer-to-have-count": ["warn",],
    // "playwright/prefer-to-have-length": ["warn",],
    // "playwright/prefer-web-first-assertions": ["warn",],
    // "playwright/prefer-to-be": ["warn",],
    // "playwright/prefer-strict-equal": ["warn",]
  }
};

[autovaton]

This method is working now. I am not sure what I did, but I am getting full linting now inside of VS Code.

[mskelton]

@autovaton @joebiker I just released a version this morning that hopefully should have better support for flat config + ESM. If you could give it another try, that would be great!

[autovaton]

Thanks for your help.

Updated to 10.1.0. Have this in my eslint.config.js

import playwright from 'eslint-plugin-playwright';

export default [
  playwright.configs['flat/recommended'],
  {
    rules: {
      "playwright/expect-expect": ["error",],
      "playwright/missing-playwright-await": ["error",],
      "playwright/prefer-lowercase-title": ["error",],
      "playwright/require-top-level-describe": ["error",],
      "playwright/valid-expect": ["error",],
      "playwright/valid-title": ["error",],

      "playwright/no-useless-await": ["warn",],
      "playwright/no-focused-test": ["warn",],
      "playwright/no-skipped-test": ["warn",],
      "playwright/no-raw-locators": ["warn",],
      "playwright/no-useless-not": ["warn",],
      "playwright/prefer-to-contain": ["warn",],
      "playwright/prefer-to-have-count": ["warn",],
      "playwright/prefer-to-have-length": ["warn",],
      "playwright/prefer-web-first-assertions": ["warn",],
    },
  },
];

Turned on support for flat files in VS Code.

Still get no linting in VS Code.

[autovaton]

npx eslint yields this error:

import playwright from 'eslint-plugin-playwright';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at internalCompileFunction (node:internal/vm:73:18)
    at wrapSafe (node:internal/modules/cjs/loader:1178:20)
    at Module._compile (node:internal/modules/cjs/loader:1220:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1310:10)
    at Module.load (node:internal/modules/cjs/loader:1119:32)
    at Module._load (node:internal/modules/cjs/loader:960:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:169:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:194:25)

[autovaton]

If I add "type":"module" to my playwright package.json and run npx eslint, then I get this:

import playwright from 'eslint-plugin-playwright';
       ^^^^^^^^^^
SyntaxError: The requested module 'eslint-plugin-playwright' does not provide an export named 'default'
    at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:190:5)

[wojdaa]

Hi, I have a similar problem with the plugin (version 1.6.2) - when I run the npx eslint it doesn't find errors in the code like force: true option or getByTitle method. My eslint.config.js looks like this:
`import playwright from 'eslint-plugin-playwright';

export default [
{
...playwright.configs['flat/recommended'],
files: ['tests/'],
},
{
files: ['tests/'],
rules: {
'no-get-by-title': 'error',
'no-force-option': 'error',
},
},
];`

Any ideas why?
Thanks in advance

[mskelton]

In the rules section, you need to add the playwright prefix

import playwright from 'eslint-plugin-playwright';

export default [
{
...playwright.configs['flat/recommended'],
files: ['tests/'],
},
{
files: ['tests/'],
rules: {
'playwright/no-get-by-title': 'error',
'playwright/no-force-option': 'error',
},
},
];

[autovaton]

Here is the .eslintrc.js config that worked for me after much trial and error if this is helpful. ```js module.exports = { env: { commonjs: true, node: true }, extends: [ "eslint:all", "eslint:recommended", "plugin:playwright/recommended", ], parser: ***@***.***/parser", parserOptions: { ecmaVersion: "latest", sourceType: "module", }, plugins: [ ***@***.***", "playwright", ], overrides: [ { files: ['*.ts', '*.tsx'], // Your TypeScript files extension // As mentioned in the comments, you should extend TypeScript plugins here, // instead of extending them outside the overrides // If you don't want to extend any rules, you don't need an extends attribute. extends: [ ***@***.***/recommended', ***@***.***/eslint-recommended', ***@***.***/recommended-requiring-type-checking', ], parser: ***@***.***/parser", parserOptions: { project: ['./tsconfig.json'], // Specify it only for TypeScript files }, }, ], rules: { // ********************** // Javascript: Errors // ********************** indent: ["error", 2, { "SwitchCase": 1 }], semi: ["error", "always"], "prefer-promise-reject-errors": ["error", { allowEmptyReject: true }], // ********************** // Javascript: Ignores // ********************** "max-classes-per-file": "off", "max-lines": "off", //max lines per file "max-lines-per-function": "off", "max-statements": "off", //max statements per function "sort-imports": "off", "no-magic-numbers": "off", "func-style": "off", "multiline-comment-style": "off", "capitalized-comments": "off", "one-var": "off", "sort-vars": "off", "sort-keys": "off", "no-ternary": "off", "no-use-before-define": "off", "init-declarations": "off", "no-useless-constructor": "off", "no-empty-function": "off", "max-params": "off", "no-plusplus": "off", "line-comment-position": "off", "no-inline-comments": "off", "id-length": "off", // ********************** // Javascript: Warnings // ********************** "prefer-const": 'warn', // ts provides better types with const "require-await": "warn", "no-warning-comments": "warn", "no-console": "warn", "no-unmodified-loop-condition": "warn", // ********************** // Typescript: Errors // ********************** ***@***.***/no-useless-constructor": "error", ***@***.***/no-empty-function": ["error", { "allow": ["constructors"] }], ***@***.***/unbound-method": ["error", { ignoreStatic: true }], // ********************** // Typecript: Warnings // ********************** ***@***.***/no-unused-vars": "warn", // ********************** // Playwright: Allows // ********************** "playwright/no-conditional-in-test": "off", // ********************** // Playwright: Errors // ********************** "playwright/expect-expect": [ "error", { "additionalAssertFunctionNames": [ "singleItemExists", "itemExists", "singleItemIsVisible", "itemWithTextExists", "hasFormWithName", "locatorItemsStartWithText", "nLocatorItemsStartWithText" ] } ], "playwright/missing-playwright-await": ["error",], "playwright/prefer-lowercase-title": ["error",], "playwright/require-top-level-describe": ["error",], "playwright/valid-expect": ["error",], "playwright/valid-title": ["error",], // ********************** // Playwright: Warnings // ********************** "playwright/no-useless-await": ["warn",], "playwright/no-focused-test": ["warn",], "playwright/no-skipped-test": ["warn",], "playwright/no-raw-locators": [ "warn", { "allowed": ["iframe", "[aria-busy='false']"] } ], "playwright/no-useless-not": ["warn",], "playwright/prefer-to-contain": ["warn",], "playwright/prefer-to-have-count": ["warn",], "playwright/prefer-to-have-length": ["warn",], "playwright/prefer-web-first-assertions": ["warn",], "playwright/prefer-to-be": ["warn",], "playwright/prefer-strict-equal": ["warn",] } }; ```