import globals from 'globals';
import tseslint from 'typescript-eslint';
import pluginVue from 'eslint-plugin-vue';

export default [
  { files: ['**/*.{js,mjs,cjs,ts,tsx,vue}'] },
  { languageOptions: { globals: globals.browser } },
  ...tseslint.configs.recommended,
  ...pluginVue.configs['flat/essential'],
  { files: ['**/*.vue'], languageOptions: { parserOptions: { parser: tseslint.parser } } },
  { files: ['**/*.vue'], rules: { 'vue/multi-word-component-names': 'off' } },
  {
    files: ['**/*.ts', '**/*.tsx'],
    parser: '@typescript-eslint/parser',
    parserOptions: {
      ecmaVersion: 2020, // 使用 ECMAScript 的最新版本
      sourceType: 'module', // 模块模式
      ecmaFeatures: {
        jsx: true // 启用 JSX
      }
    },
    settings: {
      react: {
        version: 'detect' // 自动检测 React 的版本
      }
    },
    extends: [
      'eslint:recommended',
      'plugin:react/recommended',
      'plugin:@typescript-eslint/recommended',
      'plugin:prettier/recommended' // 启用 Prettier
    ],
    plugins: ['react', '@typescript-eslint', 'prettier'],
    rules: {
      'prettier/prettier': 'error', // 将 Prettier 错误作为 ESLint 错误
      semi: 'error', // 强制使用分号
      'prefer-const': 'error' // 建议使用 const 而不是 let
      // 其他自定义规则
    },
    overrides: [
      {
        files: ['*.tsx'],
        rules: {
          // 针对 .tsx 文件的额外规则
          'react/prop-types': 'off' // TypeScript 会自动处理 prop-types
        }
      }
    ]
  }
];