@yubei826/eslint-config

一个可定制的 ESLint 扁平配置，支持 Vue、React、TypeScript、UnoCSS 等多种技术栈。

特性

• ⚡ 扁平配置 - 基于 ESLint 新的扁平配置系统
• 🛠️ 可定制 - 每个模块都可独立配置和使用
• 🔧 TypeScript 支持 - 完整的 TypeScript 类型定义
• 🎯 多框架支持 - 支持 Vue、React 等主流框架
• 💅 代码风格 - 内置代码风格和导入排序规则
• 🌈 UnoCSS 支持 - 集成 UnoCSS 校验和排序
• 📦 模块化 - 按需引入所需配置模块

注意事项

react目前未做测试，暂不支持，但可通过覆盖react配置实现解析react代码

安装

pnpm add @yubei826/eslint-config -D

确保已安装 peerDependencies：

pnpm add eslint @eslint/js @typescript-eslint/parser @typescript-eslint/utils -D

快速开始

在 eslint.config.js 中使用：

import { createConfig } from '@yubei826/eslint-config'

export default createConfig({
  vue: true,
  typescript: true,
  stylistic: true,
  imports: true,
  unocss: true
})

配置 TypeScript 解析器

如果使用 TypeScript，需要在项目根目录下添加 tsconfig.json 文件，内容如下：

{
  "compilerOptions": {
    "allowJs": true, // 允许编译js文件, 如果项目中有用到js，就开启这个
    "allowSyntheticDefaultImports": true,
    "baseUrl": "./",
    "declaration": true,
    "esModuleInterop": true,
    "jsx": "preserve",
    "lib": ["esnext", "dom"],
    "module": "Preserve",
    "moduleDetection": "force",
    "noImplicitAny": false,
    "outDir": "./dist",
    "paths": {
      "#/*": ["./types/*"],
      "$/*": ["./src/plugins/*"],
      "@/*": ["./src/*"],
      "~/*": ["./src/modules/*"]
    },
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "sourceMap": true,
    "strict": true,
    "target": "esnext",
    "types": [
      // "@intlify/unplugin-vue-i18n/types",
      "vite/client",
      "element-plus/global"
      // "vite-plugin-svg-icons-ng/client"
      // "@types/qrcode",
    ]
  },
  "exclude": [
    "src/**/__tests__/*",
    "node_modules",
    "dist",
    "**/*.temp.js",
    "**/*.temp.d.ts"
  ],
  "include": [
    "src/**/*",
    "types/**/*.d.ts",
    "mock/**/*.ts",
    "eslint.config.ts",
    "eslint.config.js",
    "vite.config.ts",
    "vite.config.js"
  ],
  "references": [
    {
      "path": "./tsconfig.node.json"
    }
  ]
}

配置开关

| 选项 | 类型 | 默认值 | 描述 | |------|------|--------|------| | vue | boolean \| object | false | 是否启用 Vue 相关配置 | | react | boolean \| object | false | 是否启用 React 相关配置 | | typescript | boolean \| object | false | 是否启用 TypeScript 相关配置 | | unocss | boolean \| object | false | 是否启用 UnoCSS 相关配置 | | json | boolean \| object | true | 是否启用 JSON 相关配置 | | stylistic | boolean \| object | true | 是否启用代码风格配置 | | globals | boolean \| object | true | 是否启用全局变量配置 | | imports | boolean \| object | true | 是否启用导入排序配置 | | customRules | Record<string, any> | {} | 自定义规则对象 | | extends | EslintFlatConfig[] | [] | 扩展配置数组 |

配置选项

完整配置示例

import { createConfig } from '@yubei826/eslint-config'

export default createConfig({
  // Vue 配置（支持布尔值或配置对象）
  vue: {
    vueVersion: 3,
    typescript: true, // 可根据下面的 typescript 参数自动启用或者禁用 TypeScript
    files: ['**/*.vue'],
    ignores: ['node_modules'],
    overrides: {
      'vue/multi-word-component-names': 'off'
    }
  },
  
  // React 配置 react 配置暂未验证
  react: false, // 不启用 React 
  
  // TypeScript 配置
  typescript: {
    files: ['**/*.ts', '**/*.tsx'],
    ignores: ['node_modules'],
    overrides: {
      '@typescript-eslint/no-explicit-any': 'warn'
    }
  },
  
  // JSON 配置
  json: true,
  
  // 代码风格配置
  stylistic: {
    overrides: {
      '@stylistic/semi': ['error', 'never']
    }
  },
  
  // UnoCSS 配置
  unocss: {
    transformers: [
      '@unocss/transformer-compile-class',
      '@unocss/transformer-variant-group'
    ]
  },
  
  // 全局变量配置
  globals: {
    env: ['browser', 'node'],
    customGlobals: {
      MyGlobal: 'readonly'
    }
  },
  
  // 导入排序配置
  imports: {
    importSortOptions: {
      ignoreCase: true
    }
  },
  
  // 自定义规则
  customRules: {
    'no-console': 'off'
  },
  
  // 扩展其他配置
  extends: []
})

按需使用模块

你可以单独引入特定的配置模块：

import { baseConfig, vueConfig, typescriptConfig } from '@yubei826/eslint-config'

export default [
  await baseConfig(),
  await vueConfig({ vueVersion: 3 }),
  await typescriptConfig(),
  // 其他配置...
]

可用模块

| 模块 | 描述 | 导出名称 | |------|------|----------| | 基础配置 | 包含基本规则和设置 | baseConfig | | 插件配置 | 插件管理配置 | pluginsConfig | | 全局变量 | 环境全局变量配置 | globalsConfig | | 导入排序 | 导入/导出排序规则 | importsConfig | | 代码风格 | 代码格式化风格 | stylisticConfig | | UnoCSS | UnoCSS 相关规则 | unocssConfig | | Vue | Vue.js 相关规则 | vueConfig | | React | React 相关规则 | reactConfig | | TypeScript | TypeScript 相关规则 | typescriptConfig | | JSON | JSON 文件校验规则 | jsonConfig |

配置详解

Vue 配置

支持 Vue 2 和 Vue 3，包含模板语法、组件规则等校验。

vueConfig({
  files: ['**/*.vue'],
  ignores: ['node_modules'],
  vueVersion: 3, // 或 2
  overrides: {
    'vue/multi-word-component-names': 'off'
  }
})

TypeScript 配置

提供 TypeScript 类型检查和语法规则。

typescriptConfig({
  files: ['**/*.{ts,tsx}'],
  ignores: ['node_modules'],
  overrides: {
    '@typescript-eslint/no-unused-vars': 'warn'
  }
})

UnoCSS 配置

集成 UnoCSS 类名排序和校验。

unocssConfig({
  transformers: [
    '@unocss/transformer-compile-class',
    '@unocss/transformer-variant-group'
  ]
})

导入排序

使用 eslint-plugin-simple-import-sort 提供导入排序功能。

importsConfig({
  importSortOptions: {
    ignoreCase: false,
    groups: [
      ['^react', '^@?\\w'],
      ['^(@|components)(/.*|$)'],
      ['^\\u0000'],
      ['^\\.\\.(?!/?$)', '^\\.\\./?$'],
      ['^\\./(?=.*/)(?!/?$)', '^\\.(?!/?$)', '^\\./?$'],
      ['^.+\\.s?css$']
    ]
  }
})

开发校本

# 开发模式（监听文件变化）
npm run dev

# 构建生产版本
npm run build

# 代码检查
npm run lint

# 发布前构建
npm run prepublishOnly

许可证

MIT License

贡献

欢迎提交 Issue 和 Pull Request！