WebdriverIO 中如何配置 ESLint Flat Config 以支持 WDIO 测试

随着 ESLint v9 的发布，新的 Flat Config 配置方式为开发者带来了更简洁的配置体验。本文将详细介绍如何在 WebdriverIO 项目中配置 eslint-plugin-wdio 插件，以支持 WDIO 测试代码的静态检查。

基础配置方法

对于 JavaScript 项目，可以在 eslint.config.js 文件中进行如下配置：

import pluginJs from '@eslint/js';
import * as wdio from 'eslint-plugin-wdio';

export default [
  pluginJs.configs.recommended,
  wdio.configs['flat/recommended'],
  {
    languageOptions: {
      globals: {
        browser: true,
        $: true,
        $$: true
      }
    }
  }
];

这种配置方式引入了 ESLint 的核心规则和 WDIO 插件推荐的规则集，同时添加了 WebdriverIO 特有的全局变量。

与 TypeScript 集成

对于 TypeScript 项目，配置需要额外引入 typescript-eslint：

import eslint from '@eslint/js';
import * as wdio from 'eslint-plugin-wdio';
import tseslint from 'typescript-eslint';

export default tseslint.config(
  eslint.configs.recommended,
  ...tseslint.configs.recommendedTypeChecked,
  {
    languageOptions: {
      parserOptions: {
        projectService: true,
        tsconfigRootDir: import.meta.dirname,
      },
    },
  },
  {
    files: ['test/e2e/specs/**/*.ts'],
    extends: [wdio.configs['flat/recommended']],
  }
);

这种配置方式特别针对测试目录下的 TypeScript 文件应用 WDIO 规则，同时保持项目其他部分的 TypeScript 检查。

多插件组合配置

在实际项目中，我们通常会组合多个 ESLint 插件：

import pluginJs from '@eslint/js';
import stylisticJs from '@stylistic/eslint-plugin-js';
import mocha from 'eslint-plugin-mocha';
import * as wdio from 'eslint-plugin-wdio';

export default [
  mocha.configs.flat.recommended,
  pluginJs.configs.recommended,
  wdio.configs['flat/recommended'],
  {
    plugins: {
      '@stylistic/js': stylisticJs
    },
    rules: {
      '@stylistic/js/indent': ['error', 2],
      '@stylistic/js/quotes': ['error', 'single']
    }
  }
];

这种配置结合了 Mocha 测试框架、代码风格检查和 WDIO 特定规则的完整解决方案。

注意事项

1. 确保项目中已安装 eslint-plugin-wdio 的最新版本
2. Flat Config 需要 ESLint v9 或更高版本
3. 对于混合项目，可以使用 files 属性针对不同文件类型应用不同规则
4. 全局变量配置对于 WDIO 测试非常重要，确保包含 browser、$ 等常用变量

通过以上配置，开发者可以在 WebdriverIO 项目中充分利用 ESLint 的最新功能，同时保持对 WDIO 测试代码的严格检查，提高代码质量和一致性。