@l_h5_tool/eslint-config

基于 @antfu/eslint-config 的可组合 ESLint 配置。

特性

• 🎨 灵活组合 - 通过工厂函数自由组合 TypeScript、Vue、React
• 📦 预设配置 - 提供常用的预设配置
• 🔧 统一规则 - 项目内统一的 lint 规则和 ignores
• 🚀 开箱即用 - 基于社区最佳实践

安装

pnpm add -D @l_h5_tool/eslint-config

使用方式

方式 1: 使用预设（推荐）

直接使用预定义的配置，简单明了：

// eslint.config.ts
import { allConfig, reactConfig, tsConfig, vueConfig } from '@l_h5_tool/eslint-config';

// Vue 项目
export default vueConfig;

// React 项目
export default reactConfig;

// Vue + React 项目
export default allConfig;

// 纯 TypeScript 项目
export default tsConfig;

方式 2: 工厂函数

需要自定义配置时使用：

// eslint.config.ts
import { createConfig } from '@l_h5_tool/eslint-config';

export default createConfig({
  vue: true, // 启用 Vue 支持
  react: true, // 启用 React 支持
  // typescript 默认启用
});

方式 3: 扩展规则

工厂函数支持传入额外的配置：

import { createConfig } from '@l_h5_tool/eslint-config';

export default createConfig(
  {
    vue: true,
    // 自定义规则
    rules: {
      'no-console': 'warn',
    },
    // 额外的 ignores
    ignores: ['**/temp/**'],
  },
  // 可以继续传入更多自定义配置
  {
    files: ['**/*.test.ts'],
    rules: {
      'no-console': 'off',
    },
  },
);

配置说明

默认 ignores

['**/node_modules/**', '**/dist/**', '**/.turbo/**', '**/coverage/**'];

默认规则

{
  'unused-imports/no-unused-vars': [
    'error',
    {
      vars: 'all',
      varsIgnorePattern: '^_',   // 以 _ 开头的变量不检查
      args: 'none',               // 允许未使用的函数参数
      ignoreRestSiblings: true,
    },
  ]
}

示例

Vue 3 项目

// apps/vue_main/eslint.config.ts
import { vueConfig } from '@l_h5_tool/eslint-config';

export default vueConfig;

组件库（Vue + React）

// ui/h5_shoelace_ui/eslint.config.ts
import { allConfig } from '@l_h5_tool/eslint-config';

export default allConfig;

工具包（纯 TS）

// internal/utils/eslint.config.ts
import { tsConfig } from '@l_h5_tool/eslint-config';

export default tsConfig;

API

createConfig(options?, ...userConfigs)

• options: OptionsConfig & TypedFlatConfigItem - @antfu/eslint-config 的配置选项
• userConfigs: TypedFlatConfigItem[] - 额外的自定义配置

预设配置

• tsConfig - TypeScript only
• vueConfig - TypeScript + Vue
• reactConfig - TypeScript + React
• allConfig - TypeScript + Vue + React

IDE使用

推荐使用pnpm包管理器
webstorm设置：在 WebStorm 中，进入 Settings（或 Preferences），然后找到 Languages & Frameworks → JavaScript → Package Manager，选择 pnpm。

License

MIT