[💡 Feature]: Compatibility with ESLint flat config and more precise exported types for wdio ESLint driver

[gavvvr]

Is your feature request related to a problem?

Hi. Trying to to configure wdio eslint plugin in modern typescript project and using the new "flat" config system of ESLint. Here are my observations:

• The wdio ESLint plugin object does not seem to be "plug and play"-ready for new ESLint flat config system
• It's not possible to make TS happy when configuring wdio ESLint plugin in flat ESLint config with types-aware tseslint.config(...) function and @ts-check enabled for eslint.config.js

Describe the solution you'd like.

Ideally, I would expect wdio ESLint plugin to be pluggable in couple of lines (not sure if it's possible though):

import wdioEslint from 'eslint-plugin-wdio'
// ...
export default tseslint.config(
  eslint.configs.recommended,
  ...tseslint.configs.recommendedTypeChecked,
  ...wdioEslint.configs.recommended // <-- like this
// ...

Describe alternatives you've considered.

While the above does not work, I manually try to apply the plugin piece by piece in eslint.config.js:

// @ts-check

import eslint from '@eslint/js'
import tseslint from 'typescript-eslint'
import { configs as wdioConfig, rules as wdioRules } from 'eslint-plugin-wdio'

export default tseslint.config(
  eslint.configs.recommended,
  {
  files: ['test/e2e/specs/*.ts'],
  plugins: {
    ['wdio']: { rules: wdioRules }, // <-- adding WDIO plugin rules
  },
  extends: [
    eslint.configs.recommended,
    ...tseslint.configs.recommended,
    {
      languageOptions: {
        parserOptions: {
          project: true,
          tsconfigDirName: import.meta.dirname,
        },
        globals: {
          ...wdioConfig.recommended.globals, // <-- adding WDIO globals
        },
      },
    },
    { rules: wdioConfig.recommended.rules }, // <-- trying to add rules, but @ts-check is not happy that rules is '{ 'wdio/await-expect': string; 'wdio/no-debug': string; 'wdio/no-pause': string; }' instead of being a `Record<string, RuleEntry>` 😓
  ],
}
)

So, I am also struggling to apply the plugin piece by piece, because TS treats values of configs.recommended.rules object as strings, while a more narrow types are expected

Additional context

• I have a TypeScript codebase, so I'm using the typescript-esltint project
• Both eslint and typescript-esltint now encourage to use the so-called "flat" config
• Usage of @ts-check + tseslint.config(...) is recommended by typescript-esltint in their Getting Started guide

Code of Conduct

• I agree to follow this project's Code of Conduct

[wdio-bot]

Thanks for reporting!

We greatly appreciate any contributions that help resolve the bug. While we understand that active contributors have their own priorities, we kindly request your assistance if you rely on this bug being fixed. We encourage you to take a look at our contribution guidelines or join our friendly Discord development server, where you can ask any questions you may have. Thank you for your support, and cheers!

[christian-bromann]

@gavvvr thanks for raising the issue. We haven't been able to update our existing plugin to be compatible with the new plugin system of Eslint. Any contributions that would us get there would be very much appreciated.

[gavvvr]

Hi @christian-bromann
Sent a PR to v8 branch with the fix. Waiting for the feedback. If it's fine, I can proceed and create another one for main

[christian-bromann]

Reviewed the PR and it looks good to me, I want someone else from the team take a look as well. Thanks a lot!

[christian-bromann]

Thanks @MadSandwich for working on a fix for this 🙏 closing!