探索 Antfu 的 ESLint 配置：打造高品质 JavaScript 代码的秘诀

// 导入所需的配置
const { defineConfig } = require('eslint-define-config')
 
// 导入Vue 3的推荐配置
const vue3 = require('eslint-plugin-vue').configs.recommended
 
// 导入TypeScript的推荐配置
const typescript = require('@typescript-eslint/conf').default
 
// 定义ESLint规则
module.exports = defineConfig({
  // 使用Vue 3的推荐配置作为基础
  ...vue3,
  // 扩展规则
  rules: {
    // 示例：禁用单行间隔
    'vue/singleline-html-element-content-newline': 'off',
    'vue/multiline-html-element-content-newline': 'off',
    // 示例：启用函数前要求或禁止空行
    'function-call-argument-newline': ['error', 'consistent'],
    // 启用更严格的类型检查
    '@typescript-eslint/no-explicit-any': 'error',
    // 更多规则...
  },
  // 使用TypeScript解析器
  parser: typescript.parser,
  // 扩展TypeScript的规则
  parserOptions: {
    ...typescript.parserOptions,
    // 示例：项目使用的JavaScript版本
    ecmaVersion: 2022,
    // 示例：启用额外的语言特性
    ecmaFeatures: {
      jsx: true,
      // 更多特性...
    },
  },
  // 使用TypeScript的插件
  plugins: ['vue', '@typescript-eslint'],
  // 配置文件的扩展名
  extraFileExtensions: ['.vue', '.ts', '.tsx'],
  // 示例：配置环境
  env: {
    browser: true,
    node: true,
    // 更多环境...
  },
  // 示例：配置全局变量
  globals: {
    globalThis: 'readonly',
    // 更多全局变量...
  },
  // 示例：配置处理器
  processors: {
    '.ts': typescript.processors['.ts'],
    // 更多处理器...
  },
})

这个代码实例展示了如何从现有的配置中导入和扩展ESLint规则，以及如何定制ESLint规则，使其更适合特定项目的需求。它还演示了如何将Vue 3和TypeScript的推荐配置作为基础，并根据项目的具体需求进行调整。