Skip to content

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

@gavvvr

Description

@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>` 😓
  ],
}
)

image

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Bug 🐛Idea 💡A new feature ideahelp wantedIssues that are free to take by anyone interested

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions