ESLint Config Standard JSX

{
  "extends": ["standard", "standard-jsx"]
}

const config = require('eslint-config-standard-jsx');

npm install --save-dev eslint-config-standard eslint-config-standard-jsx eslint-plugin-promise eslint-plugin-import eslint-plugin-node eslint-plugin-react

{
  "extends": ["standard", "standard-jsx"]
}

{
  "eslint": "^8.8.0",
  "eslint-plugin-react": "^7.28.0"
}

/**
 * ESLint configuration object with JSX support
 * @returns {EslintConfig} Complete ESLint configuration
 */
module.exports: EslintConfig;

interface EslintConfig {
  /** Parser configuration for JSX support */
  parserOptions: ParserOptions;
  /** Required ESLint plugins */
  plugins: string[];
  /** Plugin-specific settings */
  settings: PluginSettings;
  /** Comprehensive JSX linting rules */
  rules: Rules;
}

interface ParserOptions {
  /** JavaScript version to support */
  ecmaVersion: 2022;
  /** Language features configuration */
  ecmaFeatures: {
    /** Enable JSX parsing */
    jsx: true;
  };
  /** Module format */
  sourceType: "module";
}

/** Required plugins array */
plugins: ["react"];

interface PluginSettings {
  react: {
    /** React version for compatibility */
    version: "17";
  };
  /** Components treated as links for accessibility */
  linkComponents: ["Link"];
}

interface Rules {
  // Core JSX syntax rules
  "jsx-quotes": ["error", "prefer-single"];
  "react/jsx-boolean-value": "error";
  "react/jsx-fragments": ["error", "syntax"];
  
  // JSX formatting rules
  "react/jsx-closing-bracket-location": ["error", "tag-aligned"];
  "react/jsx-closing-tag-location": "error";
  "react/jsx-indent": ["error", 2, IndentOptions];
  "react/jsx-indent-props": ["error", 2];
  "react/jsx-tag-spacing": ["error", TagSpacingOptions];
  
  // JSX safety rules
  "react/jsx-no-undef": ["error", { allowGlobals: true }];
  "react/jsx-no-duplicate-props": "error";
  "react/jsx-no-target-blank": ["error", { enforceDynamicLinks: "always" }];
  "react/jsx-key": ["error", { checkFragmentShorthand: true }];
  
  // JSX best practice rules
  "react/jsx-pascal-case": ["error", { allowAllCaps: false }];
  "react/jsx-handler-names": "error";
  "react/jsx-uses-vars": "error";
  "react/jsx-uses-react": "error";
  
  // Additional formatting and safety rules
  "react/jsx-curly-brace-presence": ["error", CurlyBraceOptions];
  "react/jsx-curly-newline": ["error", CurlyNewlineOptions];
  "react/jsx-curly-spacing": ["error", CurlySpacingOptions];
  "react/jsx-equals-spacing": ["error", "never"];
  "react/jsx-first-prop-new-line": ["error", "multiline-multiprop"];
  "react/jsx-no-comment-textnodes": "error";
  "react/jsx-props-no-multi-spaces": "error";
  "react/jsx-wrap-multilines": ["error", WrapMultilinesOptions];
  "react/no-children-prop": "error";
  "react/no-danger-with-children": "error";
  "react/no-deprecated": "error";
  "react/no-direct-mutation-state": "error";
  "react/no-find-dom-node": "error";
  "react/no-is-mounted": "error";
  "react/no-string-refs": ["error", { noTemplateLiterals: true }];
  "react/no-unescaped-entities": ["error", { forbid: [">", "}"] }];
  "react/no-render-return-value": "error";
  "react/require-render-return": "error";
  "react/self-closing-comp": "error";
}

interface IndentOptions {
  /** Check attribute alignment */
  checkAttributes: false;
  /** Indent logical expressions */
  indentLogicalExpressions: true;
}

interface TagSpacingOptions {
  /** Spacing before closing slash */
  closingSlash: "never";
  /** Spacing before self-closing tag end */
  beforeSelfClosing: "always";
  /** Spacing after opening bracket */
  afterOpening: "never";
  /** Spacing before closing bracket */
  beforeClosing: "never";
}

interface CurlyBraceOptions {
  /** Props curly brace presence */
  props: "never";
  /** Children curly brace presence */
  children: "never";
}

interface CurlyNewlineOptions {
  /** Multiline curly brace style */
  multiline: "consistent";
  /** Single line curly brace style */
  singleline: "consistent";
}

interface CurlySpacingOptions {
  /** Attribute curly spacing rules */
  attributes: {
    when: "never";
    allowMultiline: true;
  };
  /** Children curly spacing rules */
  children: {
    when: "never";
    allowMultiline: true;
  };
}

interface WrapMultilinesOptions {
  /** Declaration wrapping style */
  declaration: "parens-new-line";
  /** Assignment wrapping style */
  assignment: "parens-new-line";
  /** Return statement wrapping style */
  return: "parens-new-line";
  /** Arrow function wrapping style */
  arrow: "ignore";
  /** Condition wrapping style */
  condition: "ignore";
  /** Logical expression wrapping style */
  logical: "ignore";
  /** Prop wrapping style */
  prop: "ignore";
}