Web Configuration

// Traditional ESLint config (.eslintrc.js)
module.exports = {
  extends: ['universe/web']
};

// Package.json configuration
{
  "eslintConfig": {
    "extends": "universe/web"
  }
}

// eslint.config.js
const { defineConfig } = require('eslint/config');
const config = require('eslint-config-universe/flat/web');
module.exports = defineConfig(config);

// Or with ES modules
import { defineConfig } from 'eslint/config';
import config from 'eslint-config-universe/flat/web';
export default defineConfig(config);

// Basic React web application
// .eslintrc.js
module.exports = {
  extends: ['universe/web']
};

// Next.js project with custom configuration
// .eslintrc.js
module.exports = {
  extends: ['universe/web'],
  rules: {
    'react/react-in-jsx-scope': 'off', // Not needed in Next.js
    'react/jsx-no-target-blank': 'error'
  }
};

// Create React App with TypeScript
// .eslintrc.js
module.exports = {
  extends: ['universe/web'],
  overrides: [
    {
      files: ['src/**/*.test.{js,jsx,ts,tsx}'],
      env: { jest: true }
    }
  ]
};

// Flat config for ESLint 9+
// eslint.config.js
const webConfig = require('eslint-config-universe/flat/web');

module.exports = [
  ...webConfig,
  {
    files: ['src/**/*.{js,jsx,ts,tsx}'],
    rules: {
      'no-console': 'warn' // Allow console in development
    }
  }
];

// Traditional config
env: { 
  browser: true,    // Enables browser globals
  commonjs: true    // Supports CommonJS modules
}

// Flat config  
languageOptions: {
  globals: { ...globals.browser }
}

// React version detection
settings: {
  react: { version: 'detect' }  // Automatically detects React version
}

// JSX formatting
'react/jsx-boolean-value': ['warn', 'never']
'react/jsx-closing-bracket-location': ['warn', { nonEmpty: 'after-props', selfClosing: 'tag-aligned' }]
'react/jsx-curly-brace-presence': ['warn', 'never']
'react/jsx-curly-spacing': ['warn', { when: 'never' }]
'react/jsx-equals-spacing': ['warn', 'never']
'react/jsx-first-prop-new-line': ['warn', 'multiline']
'react/jsx-fragments': ['warn', 'syntax']
'react/jsx-indent': ['warn', 2]
'react/jsx-indent-props': ['warn', 2]

// JSX best practices
'react/jsx-no-bind': ['warn', { allowArrowFunctions: true, allowFunctions: true }]
'react/jsx-no-duplicate-props': 'error'
'react/jsx-no-undef': 'error'
'react/jsx-props-no-multi-spaces': 'warn'
'react/jsx-tag-spacing': 'warn'
'react/jsx-uses-react': 'warn'
'react/jsx-uses-vars': 'warn'
'react/jsx-wrap-multilines': ['warn', { declaration: false, assignment: false, return: true, arrow: true }]

// Component lifecycle and state
'react/no-access-state-in-setstate': 'warn'
'react/no-did-mount-set-state': 'warn'
'react/no-did-update-set-state': 'warn'
'react/no-direct-mutation-state': 'warn'
'react/no-redundant-should-component-update': 'warn'
'react/no-this-in-sfc': 'warn'
'react/no-unknown-property': 'warn'
'react/no-will-update-set-state': 'warn'
'react/require-render-return': 'warn'
'react/self-closing-comp': 'warn'

// Hooks enforcement
'react-hooks/rules-of-hooks': 'error'        // Enforce Rules of Hooks
'react-hooks/exhaustive-deps': 'off'         // Disabled for flexibility

// JavaScript extensions
.js, .jsx

// TypeScript extensions  
.ts, .tsx, .d.ts

// Import/export settings
settings: {
  'import/extensions': ['.js', '.jsx', '.ts', '.tsx'],
  'import/resolver': {
    node: { extensions: ['.js', '.jsx', '.ts', '.tsx'] }
  }
}