@tuomashatakka/eslint-config 2.6.2 → 3.0.0

package/.github/workflows/ci.yml

@@ -0,0 +1,23 @@
+name: CI
+
+on:
+  push:
+    branches: ['**']
+  pull_request:
+    branches: [main]
+
+jobs:
+  lint-and-test:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [20, 22]
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: npm
+      - run: npm ci
+      - run: npm run lint
+      - run: npm run test

package/.github/workflows/publish.yml

@@ -0,0 +1,45 @@
+name: Publish to npm
+
+on:
+  push:
+    tags: ['v*']
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          ref: main
+          token: ${{ secrets.GITHUB_TOKEN }}
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          registry-url: https://registry.npmjs.org
+          cache: npm
+
+      - name: Extract version from tag
+        id: version
+        run: echo "VERSION=${GITHUB_REF#refs/tags/v}" >> "$GITHUB_OUTPUT"
+
+      - name: Sync package.json version with tag
+        run: npm version ${{ steps.version.outputs.VERSION }} --no-git-tag-version
+
+      - run: npm ci
+      - run: npm run test
+
+      - name: Publish to npm
+        run: npm publish --access public
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+      - name: Commit version bump back to main
+        run: |
+          git config user.name "github-actions[bot]"
+          git config user.email "github-actions[bot]@users.noreply.github.com"
+          git add package.json package-lock.json
+          git commit -m "${{ steps.version.outputs.VERSION }}" || echo "No changes to commit"
+          git push origin main

package/eslint.config.mjs

@@ -1,3 +1,4 @@
 import { config } from './index.mjs'
 
+
 export default config

package/index.mjs

@@ -1,6 +1,4 @@
 import stylistic from '@stylistic/eslint-plugin'
-import stylisticJsx from '@stylistic/eslint-plugin-jsx'
-import tsplugin from '@typescript-eslint/eslint-plugin'
 import importPlugin from 'eslint-plugin-import'
 import noInlineMultilineTypesPlugin from 'eslint-plugin-no-inline-multiline-types'
 import whitespacedPlugin from 'eslint-plugin-whitespaced'
@@ -9,6 +7,7 @@ import react from 'eslint-plugin-react'
 import reactHooks from 'eslint-plugin-react-hooks'
 import globals from 'globals'
 import tseslint from 'typescript-eslint'
+import reactStrictPlugin from './plugins/react-strict/index.mjs'
 import { rules } from './rules.mjs'
 
 
@@ -17,10 +16,11 @@ const plugins = {
   'react-hooks':        reactHooks,
   'import':             importPlugin,
   '@stylistic':         stylistic,
-  '@typescript-eslint': tsplugin,
+  '@typescript-eslint': tseslint.plugin,
   'omit':               omitPlugin,
   'no-inline-types':    noInlineMultilineTypesPlugin,
   'whitespaced':        whitespacedPlugin,
+  'react-strict':       reactStrictPlugin,
 }
 
 export { rules }
@@ -38,17 +38,7 @@ export const baseConfig = {
     'import/internal-regex': '^@/(.+)',
   },
   ignores: [ '**/node_modules/**' ],
-  plugins: {
-    ...plugins,
-    // Merge stylistic JSX plugin into the main stylistic namespace
-    '@stylistic': {
-      ...stylistic,
-      rules: {
-        ...stylistic.rules,
-        ...stylisticJsx.rules,
-      }
-    }
-  },
+  plugins,
   rules,
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tuomashatakka/eslint-config",
-  "version": "2.6.2",
+  "version": "3.0.0",
   "description": "Default eslint configuration",
   "type": "module",
   "main": "index.mjs",
@@ -26,28 +26,22 @@
     "typescript": "*"
   },
   "dependencies": {
-    "eslint": "^9.31.0",
-    "@stylistic/eslint-plugin": "^5.2.0",
-    "@stylistic/eslint-plugin-jsx": "^2.13.0",
-    "typescript-eslint": "^8.37.0",
-    "globals": "^16.3.0",
-    "typescript": "^5.8.3",
+    "eslint": "^9.39.0",
+    "@stylistic/eslint-plugin": "^5.10.0",
+    "typescript-eslint": "^8.58.0",
+    "globals": "^16.5.0",
+    "typescript": "^5.9.0",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-import": "^2.32.0",
-    "@typescript-eslint/eslint-plugin": "^8.37.0",
     "eslint-plugin-no-inline-multiline-types": "^0.0.5",
     "eslint-plugin-omit-unnecessary": "^0.0.3",
     "eslint-plugin-whitespaced": "^1.0.2"
   },
   "devDependencies": {
-    "@eslint/compat": "^1.3.1",
-    "@eslint/eslintrc": "^3.3.1",
-    "@eslint/js": "^9.31.0",
-    "@stylistic/eslint-plugin-ts": "^4.4.1",
+    "@eslint/eslintrc": "^3.3.5",
+    "@eslint/js": "^9.39.0",
     "@types/eslint__eslintrc": "^2.1.2",
-    "@types/eslint__js": "^8.42.3",
-    "@typescript-eslint/parser": "^8.37.0",
-    "eslint-plugin-block-padding": "^0.0.3"
+    "@types/eslint__js": "^8.42.3"
   }
 }

package/plugins/react-strict/index.mjs

@@ -0,0 +1,19 @@
+import noStyleProp from './rules/no-style-prop.mjs'
+import noNestedDivs from './rules/no-nested-divs.mjs'
+import noComplexJsxMap from './rules/no-complex-jsx-map.mjs'
+import preferNoUseEffect from './rules/prefer-no-use-effect.mjs'
+import noJsxValueCalculations from './rules/no-jsx-value-calculations.mjs'
+import jsxPropLayout from './rules/jsx-prop-layout.mjs'
+
+
+export const rules = {
+                       'no-style-prop':             noStyleProp,
+                       'no-nested-divs':            noNestedDivs,
+                       'no-complex-jsx-map':        noComplexJsxMap,
+                       'prefer-no-use-effect':      preferNoUseEffect,
+                       'no-jsx-value-calculations': noJsxValueCalculations,
+                       'jsx-prop-layout':           jsxPropLayout,
+                     }
+
+
+export default { rules }

package/plugins/react-strict/rules/jsx-prop-layout.mjs

@@ -0,0 +1,100 @@
+const RESERVED_PROPS                                                             = new Set([
+                                                                                 'key',
+                                                                                 'ref',
+                                                                               ])
+const STYLE_PROPS                                                          = new Set([
+                                                                                       'className',
+                                                                                       'style',
+                                                                                       'id',
+                                                                                     ])
+
+
+function getPropName (attr) {
+  if (attr.type === 'JSXSpreadAttribute')
+    return null
+
+  if (attr.name.type === 'JSXIdentifier')
+    return attr.name.name
+
+  if (attr.name.type === 'JSXNamespacedName')
+    return `${attr.name.namespace.name}:${attr.name.name.name}`
+
+  return null
+}
+
+
+function getPropGroup (name) {
+  if (!name)
+    return 4 // spread attributes — middle
+
+  if (RESERVED_PROPS.has(name))
+    return 0
+
+  if (STYLE_PROPS.has(name))
+    return 1
+
+  if (name.startsWith('data-') || name.startsWith('aria-'))
+    return 2
+
+  if (name.startsWith('on') && name[2] === name[2].toUpperCase())
+    return 5
+
+  return 3
+}
+
+
+export default {
+  meta: {
+                         type:    'suggestion',
+                         docs:    { description: 'Enforce consistent JSX prop ordering: key/ref first, className/style next, data/aria attrs, then regular props, callbacks last' },
+                         fixable: 'code',
+                         schema:  [],
+                         messages: {
+      propOrder: '`{{ current }}` should be placed before `{{ previous }}` ({{ currentGroup }} props should come before {{ previousGroup }} props).',
+    },
+                       },
+  create (context) {
+    const groupNames = [
+                         'reserved',
+                         'style/class',
+                         'data/aria',
+                         'regular',
+                         'spread',
+                         'callback',
+                       ]
+
+    return {
+             JSXOpeningElement (node) {
+        const attrs = node.attributes
+
+        if (attrs.length < 2)
+          return
+
+        let lastGroup = -1
+        let lastName  = null
+
+        for (const attr of attrs) {
+          const name  = getPropName(attr)
+          const group = getPropGroup(name)
+
+          if (group < lastGroup) {
+            context.report({
+              node:      attr,
+              messageId: 'propOrder',
+              data:      {
+                current:       name || '{...spread}',
+                previous:      lastName || '{...spread}',
+                currentGroup:  groupNames[group],
+                previousGroup: groupNames[lastGroup],
+              },
+            })
+            break
+          }
+
+          lastGroup = group
+          lastName = name
+        }
+      },
+           }
+  },
+}

package/plugins/react-strict/rules/no-complex-jsx-map.mjs

@@ -0,0 +1,66 @@
+function isInsideJSXExpression (node) {
+  let current = node.parent
+
+  while (current) {
+    if (current.type === 'JSXExpressionContainer')
+      return true
+
+    current = current.parent
+  }
+
+  return false
+}
+
+
+function hasComplexBody (callbackBody) {
+  if (callbackBody.type === 'BlockStatement') {
+    const hasIfOrSwitch = callbackBody.body.some(stmt =>
+      stmt.type === 'IfStatement' || stmt.type === 'SwitchStatement')
+
+    if (hasIfOrSwitch)
+      return true
+
+    if (callbackBody.body.length > 3)
+      return true
+  }
+
+  return false
+}
+
+
+export default {
+  meta: {
+                         type:    'suggestion',
+                         docs:    { description: 'Disallow complex .map() callbacks with inline logic inside JSX' },
+                         fixable: null,
+                         schema:  [],
+                         messages: {
+      noComplexMap: 'Extract complex .map() callback into a separate component. Move conditional logic outside the JSX return block.',
+    },
+                       },
+  create (context) {
+    return {
+             CallExpression (node) {
+        if (
+          node.callee.type !== 'MemberExpression' ||
+          node.callee.property.type !== 'Identifier' ||
+          node.callee.property.name !== 'map'
+        )
+          return
+
+        if (!isInsideJSXExpression(node))
+          return
+
+        const callback = node.arguments[0]
+
+        if (!callback)
+          return
+
+        if (callback.type === 'ArrowFunctionExpression' || callback.type === 'FunctionExpression') {
+          if (hasComplexBody(callback.body))
+            context.report({ node, messageId: 'noComplexMap' })
+        }
+      },
+           }
+  },
+}

package/plugins/react-strict/rules/no-jsx-value-calculations.mjs

@@ -0,0 +1,99 @@
+function isComponentFunction (node) {
+  let current = node
+
+  while (current) {
+    if (
+      current.type === 'ArrowFunctionExpression' ||
+      current.type === 'FunctionExpression' ||
+      current.type === 'FunctionDeclaration'
+    ) {
+      const parent = current.parent
+
+      if (parent && parent.type === 'VariableDeclarator' && parent.id.type === 'Identifier') {
+        const name = parent.id.name
+
+        if (name[0] === name[0].toUpperCase() && name[0] !== name[0].toLowerCase())
+          return true
+      }
+
+      if (current.type === 'FunctionDeclaration' && current.id) {
+        const name = current.id.name
+
+        if (name[0] === name[0].toUpperCase() && name[0] !== name[0].toLowerCase())
+          return true
+      }
+    }
+
+    current = current.parent
+  }
+
+  return false
+}
+
+
+function isInsideReturnJSX (node) {
+  let current = node.parent
+
+  while (current) {
+    if (current.type === 'ReturnStatement')
+      return true
+
+    if (current.type === 'ArrowFunctionExpression' && current.body.type !== 'BlockStatement')
+      return true
+
+    if (
+      current.type === 'FunctionDeclaration' ||
+      current.type === 'FunctionExpression' ||
+      current.type === 'ArrowFunctionExpression'
+    )
+      return false
+
+    current = current.parent
+  }
+
+  return false
+}
+
+
+export default {
+  meta: {
+                         type:    'suggestion',
+                         docs:    { description: 'Disallow value calculations and assignments inside JSX return blocks' },
+                         fixable: null,
+                         schema:  [],
+                         messages: {
+      noJsxCalculations: 'Move value calculations and assignments outside the return block. Compute values before the return statement.',
+    },
+                       },
+  create (context) {
+    return {
+             JSXExpressionContainer (node) {
+        if (!isComponentFunction(node) || !isInsideReturnJSX(node))
+          return
+
+        const expr = node.expression
+
+        if (!expr || expr.type === 'JSXEmptyExpression')
+          return
+
+        if (expr.type === 'AssignmentExpression') {
+          context.report({ node: expr, messageId: 'noJsxCalculations' })
+          return
+        }
+
+        if (expr.type === 'SequenceExpression') {
+          const hasAssignment = expr.expressions.some(e => e.type === 'AssignmentExpression')
+
+          if (hasAssignment)
+            context.report({ node: expr, messageId: 'noJsxCalculations' })
+        }
+      },
+             VariableDeclaration (node) {
+        if (!isComponentFunction(node) || !isInsideReturnJSX(node))
+          return
+
+        context.report({ node, messageId: 'noJsxCalculations' })
+      },
+           }
+  },
+}

package/plugins/react-strict/rules/no-nested-divs.mjs

@@ -0,0 +1,59 @@
+const SEMANTIC_ALTERNATIVES = [
+  'main',
+  'section',
+  'article',
+  'aside',
+  'header',
+  'footer',
+  'nav',
+  'figure',
+  'figcaption',
+  'details',
+  'summary',
+  'dialog',
+]
+
+
+function getElementName (node) {
+  if (node.type === 'JSXElement' && node.openingElement.name.type === 'JSXIdentifier')
+    return node.openingElement.name.name
+
+  return null
+}
+
+
+export default {
+  meta: {
+                         type:    'suggestion',
+                         docs:    { description: 'Disallow nested div elements; prefer semantic HTML5 tags' },
+                         fixable: null,
+                         schema:  [],
+                         messages: {
+      noNestedDivs: 'Avoid nesting <div> inside <div>. Use semantic HTML5 elements instead ({{ alternatives }}).',
+    },
+                       },
+  create (context) {
+    return {
+             JSXElement (node) {
+        const name = getElementName(node)
+
+        if (name !== 'div')
+          return
+
+        const parent = node.parent
+
+        if (parent.type !== 'JSXElement')
+          return
+
+        const parentName = getElementName(parent)
+
+        if (parentName === 'div') 
+context.report({
+                                                   node:      node.openingElement,
+                                                   messageId: 'noNestedDivs',
+                                                   data:      { alternatives: SEMANTIC_ALTERNATIVES.join(', ') },
+                                                 })
+      },
+           }
+  },
+}

package/plugins/react-strict/rules/no-style-prop.mjs

@@ -0,0 +1,43 @@
+const DRAG_DROP_HANDLERS = new Set([
+  'onDrag',
+  'onDragStart',
+  'onDragEnd',
+  'onDragEnter',
+  'onDragLeave',
+  'onDragOver',
+  'onDrop',
+])
+
+
+export default {
+  meta: {
+                         type:    'suggestion',
+                         docs:    { description: 'Disallow inline style props unless used with drag/drop interactions' },
+                         fixable: null,
+                         schema:  [],
+                         messages: {
+      noStyleProp: 'Avoid inline style props. Use CSS classes or styled components instead. Inline styles are only acceptable for dynamic user interaction scenarios like drag/drop.',
+    },
+                       },
+  create (context) {
+    return {
+             JSXAttribute (node) {
+        if (node.name.type !== 'JSXIdentifier' || node.name.name !== 'style')
+          return
+
+        const opening = node.parent
+
+        if (opening.type !== 'JSXOpeningElement')
+          return
+
+        const hasDragHandler = opening.attributes.some(attr =>
+          attr.type === 'JSXAttribute' &&
+          attr.name.type === 'JSXIdentifier' &&
+          DRAG_DROP_HANDLERS.has(attr.name.name))
+
+        if (!hasDragHandler)
+          context.report({ node, messageId: 'noStyleProp' })
+      },
+           }
+  },
+}

package/plugins/react-strict/rules/prefer-no-use-effect.mjs

@@ -0,0 +1,26 @@
+export default {
+  meta: {
+                         type:    'suggestion',
+                         docs:    { description: 'Discourage useEffect in favor of React context, custom hooks, or event-driven patterns' },
+                         fixable: null,
+                         schema:  [],
+                         messages: {
+      preferNoUseEffect: 'Consider alternatives to useEffect. Extract side effects into React context, a custom hook in a separate module, or use event-driven patterns.',
+    },
+                       },
+  create (context) {
+    return {
+             CallExpression (node) {
+        const isDirectCall = node.callee.type === 'Identifier' &&
+          node.callee.name === 'useEffect'
+
+        const isMemberCall = node.callee.type === 'MemberExpression' &&
+          node.callee.property.type === 'Identifier' &&
+          node.callee.property.name === 'useEffect'
+
+        if (isDirectCall || isMemberCall)
+          context.report({ node, messageId: 'preferNoUseEffect' })
+      },
+           }
+  },
+}

package/rules.mjs

@@ -4,7 +4,7 @@
  */
 
 export const rules = {
-  'multiline-comment-style':         [ 'warn', 'separate-lines', { checkJSDoc: false }],
+  '@stylistic/multiline-comment-style':        [ 'warn', 'separate-lines', { checkJSDoc: false }],
   '@stylistic/lines-around-comment': [ 'warn', {
     beforeBlockComment: true,
     beforeLineComment:  false,
@@ -35,21 +35,40 @@ export const rules = {
   'no-undef':                                  [ 0 ],
   'use-isnan':                                 [ 'error' ],
   'no-obj-calls':                              [ 'error' ],
-  'no-new-symbol':                             [ 'error' ],
+  'no-new-native-nonconstructor':              [ 'error' ],
   'no-func-assign':                            [ 'error' ],
   'no-class-assign':                           [ 'error' ],
   'no-array-constructor':                      [ 'error' ],
   'omit/omit-unnecessary-parens-brackets':     [ 'warn' ],
   'no-inline-types/no-inline-multiline-types': [ 'warn' ],
-  'whitespaced/consistent-line-spacing':       [ 'off', {
+  // Whitespaced plugin — structural spacing
+  'whitespaced/block-padding':                 [ 'off' ],
+  'whitespaced/aligned-assignments':           [ 'off' ],
+  'whitespaced/consistent-line-spacing':       [ 'warn', {
     beforeClass:        2,
     afterClass:         2,
     beforeImports:      0,
     afterImports:       2,
+    beforeExports:      2,
+    afterExports:       1,
     beforeFunction:     2,
     afterFunction:      2,
+    beforeComment:      1,
     ignoreTopLevelCode: false,
-    skipImportGroups:   true
+    skipImportGroups:   true,
+  }],
+  'whitespaced/class-property-grouping':       [ 'warn', {
+    paddingBetweenGroups:       1,
+    enforceAlphabeticalSorting: false,
+  }],
+  'whitespaced/multiline-format':              [ 'warn', {
+    allowSingleLine:    true,
+    multilineStyle:     'consistent',
+    minItems:           3,
+    indentation:        2,
+    trailingComma:      'always',
+    consistentSpacing:  true,
+    objectAlignment:    'none',
   }],
   '@stylistic/function-call-spacing':         [ 'warn', 'never' ],
   '@stylistic/computed-property-spacing':     [ 'warn', 'never' ],
@@ -97,9 +116,8 @@ export const rules = {
   '@stylistic/template-tag-spacing':          [ 'warn', 'always' ],
   '@stylistic/yield-star-spacing':            [ 'warn', 'after' ],
   '@stylistic/quotes':                        [ 'warn', 'single', { avoidEscape: true, allowTemplateLiterals: 'always' }],
-  // JSX/React - Migrated to @stylistic plugin namespace (consistent)
+  // JSX/React — @stylistic plugin namespace
   '@stylistic/jsx-newline':                   [ 'warn', { prevent: true, allowMultilines: true }],
-  '@stylistic/jsx-props-no-multi-spaces':     [ 'warn' ],
   '@stylistic/jsx-equals-spacing':            [ 'warn', 'never' ],
   '@stylistic/jsx-max-props-per-line':        [ 'warn', { maximum: 1, when: 'multiline' }],
   '@stylistic/jsx-self-closing-comp':         [ 'warn', { component: true, html: true }],
@@ -111,6 +129,7 @@ export const rules = {
   '@stylistic/jsx-function-call-newline':     [ 'warn', 'always' ],
   '@stylistic/jsx-indent-props':              [ 'warn', { indentMode: 2, ignoreTernaryOperator: true }],
   '@stylistic/jsx-curly-spacing':             [ 'warn', { when: 'always', spacing: { objectLiterals: 'never' }}],
+  // React rules
   'react/no-unescaped-entities':              [ 'error', { forbid: [ '>', '}' ]}],
   'react/jsx-uses-vars':                      [ 'error' ],
   'react/jsx-uses-react':                     [ 'error' ],
@@ -128,7 +147,18 @@ export const rules = {
   'react/jsx-pascal-case':                    [ 'warn' ],
   'react/jsx-curly-brace-presence':           [ 'warn', { props: 'never', children: 'never' }],
   'react/display-name':                       [ 'warn', { checkContextObjects: true }],
+  'react/no-unstable-nested-components':      [ 'warn', { allowAsProps: true }],
+  'react/function-component-definition':      [ 'warn', { namedComponents: 'arrow-function', unnamedComponents: 'arrow-function' }],
+  'react/jsx-no-leaked-render':               [ 'warn', { validStrategies: [ 'ternary', 'coerce' ]}],
+  'react/jsx-sort-props':                     [ 'warn', {
+    callbacksLast:        true,
+    shorthandFirst:       true,
+    reservedFirst:        true,
+    multiline:            'last',
+    noSortAlphabetically: true,
+  }],
   'react-hooks/exhaustive-deps':              0,
+  // Formatting
   '@stylistic/no-multi-spaces':               [ 'warn', {
     exceptions: {
       Property:           true,
@@ -157,6 +187,13 @@ export const rules = {
     { blankLine: 'always', prev: [ 'block-like', 'block' ], next: [ 'multiline-expression', 'function', 'block-like', 'block' ]},
     { blankLine: 'any', prev: [ 'multiline-expression', 'function', 'block-like', 'block' ], next: [ 'multiline-expression', 'function', 'block-like', 'block' ]},
   ],
+  // React strict — opinionated component quality rules
+  'react-strict/no-style-prop':             [ 'warn' ],
+  'react-strict/no-nested-divs':            [ 'warn' ],
+  'react-strict/no-complex-jsx-map':        [ 'warn' ],
+  'react-strict/prefer-no-use-effect':      [ 'warn' ],
+  'react-strict/no-jsx-value-calculations': [ 'warn' ],
+  'react-strict/jsx-prop-layout':           [ 'warn' ],
 }
 
 export default rules

package/test/fixtures/react-strict.invalid.tsx

@@ -0,0 +1,33 @@
+/* eslint-disable whitespaced/consistent-line-spacing */
+
+
+import React, { useState, useEffect } from 'react'
+
+// expect-warning: react-strict/prefer-no-use-effect
+const BadComponent = () => {
+  const [ data, setData ] = useState([])
+  useEffect(() => {
+    fetch('/api').then(r => r.json())
+      .then(setData)
+  }, [])
+
+  return <div>
+    {/* expect-warning: react-strict/no-nested-divs */}
+    <div>
+      <p>Nested div is bad</p>
+    </div>
+
+    {/* expect-warning: react-strict/no-style-prop */}
+    <span style={{ color: 'red' }}>styled inline</span>
+
+    {/* expect-warning: react-strict/no-complex-jsx-map */}
+    {data.map((item: string) => {
+      if (item === 'special')
+        return <strong key={ item }>Special</strong>
+
+      return <span key={ item }>{item}</span>
+    })}
+  </div>
+}
+
+export default BadComponent

package/test/fixtures/react-strict.valid.tsx

@@ -0,0 +1,76 @@
+import React, { useState, useCallback, useMemo } from 'react'
+
+
+interface UserCardProps {
+  id:       string
+  name:     string
+  email:    string
+  isActive: boolean
+  onSelect: (id: string) => void
+}
+
+
+const UserCard: React.FC<UserCardProps> = ({ id, name, email, isActive, onSelect }) => {
+  const handleClick = useCallback(() => {
+    onSelect(id)
+  }, [ id, onSelect ])
+
+  const displayName = useMemo(() =>
+    isActive ? name : `${name} (inactive)`, [ isActive, name ])
+
+  return <article className="user-card">
+    <header>
+      <h3>{displayName}</h3>
+    </header>
+
+    <p>{email}</p>
+
+    <button
+      type="button"
+      onClick={ handleClick }>
+      Select
+    </button>
+  </article>
+}
+
+
+interface UserListProps {
+  users:    UserCardProps[]
+  onSelect: (id: string) => void
+}
+
+
+const UserListItem: React.FC<UserCardProps> = props =>
+  <UserCard { ...props } />
+
+
+const UserList: React.FC<UserListProps> = ({ users, onSelect }) => {
+  const [ filter, setFilter ] = useState('')
+
+  const filtered = useMemo(() =>
+    users.filter(u =>
+      u.name.toLowerCase().includes(filter.toLowerCase())), [ users, filter ])
+
+  const handleFilterChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    setFilter(e.target.value)
+  }, [])
+
+  return <section className="user-list">
+    <input
+      type="text"
+      placeholder="Filter users..."
+      value={ filter }
+      onChange={ handleFilterChange } />
+
+    <ul>
+      {filtered.map(user =>
+        <UserListItem
+          key={ user.id }
+          { ...user }
+          onSelect={ onSelect } />)}
+    </ul>
+  </section>
+}
+
+
+export default UserList

package/test/fixtures/whitespaced.valid.ts

@@ -0,0 +1,50 @@
+import path from 'path'
+import fs from 'fs'
+
+
+const shortName = 'hello'
+
+
+const longValue = 'world'
+
+
+class DataProcessor {
+  static defaultConfig = { verbose: false }
+
+  private name: string
+
+  private data: string[]
+
+  constructor (name: string) {
+    this.name = name
+
+    this.data = []
+  }
+
+  process (input: string) {
+    const trimmed   = input.trim()
+
+    const processed = trimmed.toLowerCase()
+
+    this.data.push(processed)
+
+    return processed
+  }
+}
+
+
+function formatOutput (value: string): string {
+  const prefix = '[OUT]'
+
+  const result = `${prefix} ${value}`
+
+  return result
+}
+
+
+function parseInput (raw: string): string[] {
+  return raw.split('\n').filter(Boolean)
+}
+
+
+export { DataProcessor, formatOutput, parseInput }

package/test/test-runner.mjs

@@ -9,32 +9,44 @@ import { fileURLToPath } from 'url'
 const execAsync = promisify(exec)
 const __dirname = path.dirname(fileURLToPath(import.meta.url))
 
+
 /**
  * Test runner for ESLint configuration
  * Validates that the config works with various code samples
+ *
+ * Fixture naming conventions:
+ *   *.valid.{ext}   — must produce zero errors AND zero warnings
+ *   *.invalid.{ext} — must produce expected warnings (annotated with expect-warning: rule-id)
+ *   *.<ext>         — must produce zero errors (warnings are tolerated)
  */
 
 
 class ESLintConfigTester {
   constructor () {
     this.fixturesDir = path.join(__dirname, 'fixtures')
-    this.configPath = path.join(__dirname, '../index.mjs')
-    this.results = {
+    this.configPath  = path.join(__dirname, '../index.mjs')
+    this.results     = {
       passed: 0,
       failed: 0,
-      errors: []
+      errors: [],
     }
   }
 
+
   async runTests () {
-    console.log('🚀 Running ESLint configuration tests...\n')
+    console.log('\n  Running ESLint configuration tests...\n')
 
     try {
       const fixtures  = await readdir(this.fixturesDir)
-      const testFiles = fixtures.filter(file => file.endsWith('.js') || file.endsWith('.tsx') || file.endsWith('.ts'))
+      const testFiles = fixtures.filter(file =>
+        file.endsWith('.js') ||
+        file.endsWith('.jsx') ||
+        file.endsWith('.ts') ||
+        file.endsWith('.tsx') ||
+        file.endsWith('.mjs'))
 
       if (testFiles.length === 0) {
-        console.log('⚠️  No test fixtures found in test/fixtures/')
+        console.log('  No test fixtures found in test/fixtures/')
         return
       }
 
@@ -44,25 +56,50 @@ class ESLintConfigTester {
       this.printSummary()
     }
     catch (error) {
-      console.error('❌ Test runner failed:', error.message)
+      console.error('  Test runner failed:', error.message)
       process.exit(1)
     }
   }
 
+
+  getFixtureMode (filename) {
+    if (filename.includes('.valid.'))
+      return 'valid'
+
+    if (filename.includes('.invalid.'))
+      return 'invalid'
+
+    return 'standard'
+  }
+
+
+  async parseExpectedWarnings (filepath) {
+    const content  = await readFile(filepath, 'utf8')
+    const lines    = content.split('\n')
+    const expected = []
+
+    for (const line of lines) {
+      const match = line.match(/(?:\/\/|{\s*\/\*)\s*expect-warning:\s*([^\s*]+)/)
+
+      if (match)
+        expected.push(match[1].trim())
+    }
+
+    return expected
+  }
+
+
   async testFile (filename) {
     const filepath = path.join(this.fixturesDir, filename)
+    const mode     = this.getFixtureMode(filename)
 
     try {
-      console.log(`📝 Testing ${filename}...`)
+      console.log(`  Testing ${filename} [${mode}]...`)
 
-      // Run ESLint on the test file
-      const { stdout, stderr } = await execAsync(
+      const { stdout } = await execAsync(
         `npx eslint "${filepath}" --config "${this.configPath}" --format json`,
-        { cwd: path.join(__dirname, '..') }
-      )
-
-      if (stderr && stderr.trim())
-        throw new Error(`ESLint stderr: ${stderr}`)
+        { cwd: path.join(__dirname, '..'), maxBuffer: 1024 * 1024 }
+      ).catch(e => ({ stdout: e.stdout, stderr: e.stderr }))
 
       const results    = JSON.parse(stdout)
       const fileResult = results[0]
@@ -72,56 +109,103 @@ class ESLintConfigTester {
 
       const errorCount   = fileResult.errorCount
       const warningCount = fileResult.warningCount
+      const messages     = fileResult.messages
 
-      if (errorCount > 0) {
-        console.log(`  ❌ ${errorCount} errors, ${warningCount} warnings`)
-        fileResult.messages.forEach(msg => {
-          if (msg.severity === 2)
-            console.log(`     Error: ${msg.message} (${msg.ruleId})`)
-        })
-        this.results.failed++
-        this.results.errors.push({
-          file:   filename,
-          errors: fileResult.messages.filter(m => m.severity === 2)
-        })
-      }
-      else {
-        console.log(`  ✅ 0 errors, ${warningCount} warnings`)
-        this.results.passed++
-      }
+      if (mode === 'valid')
+        return this.assertValid(filename, errorCount, warningCount, messages)
+
+      if (mode === 'invalid')
+        return await this.assertInvalid(filename, filepath, errorCount, warningCount, messages)
+
+      return this.assertStandard(filename, errorCount, warningCount, messages)
     }
     catch (error) {
-      console.log(`  ❌ Test failed: ${error.message}`)
+      console.log(`    FAIL: ${error.message}`)
+      this.results.failed++
+      this.results.errors.push({ file: filename, error: error.message })
+    }
+  }
+
+
+  assertStandard (filename, errorCount, warningCount, messages) {
+    if (errorCount > 0) {
+      console.log(`    FAIL — ${errorCount} errors, ${warningCount} warnings`)
+      messages.filter(m => m.severity === 2).forEach(msg =>
+        console.log(`      Error: ${msg.message} (${msg.ruleId}) [line ${msg.line}]`))
+      this.results.failed++
+      this.results.errors.push({ file: filename, errors: messages.filter(m => m.severity === 2) })
+    }
+    else {
+      console.log(`    PASS — 0 errors, ${warningCount} warnings`)
+      this.results.passed++
+    }
+  }
+
+
+  assertValid (filename, errorCount, warningCount, messages) {
+    if (errorCount > 0 || warningCount > 0) {
+      console.log(`    FAIL — expected 0 issues, got ${errorCount} errors, ${warningCount} warnings`)
+      messages.forEach(msg =>
+        console.log(`      ${msg.severity === 2 ? 'Error' : 'Warn'}: ${msg.message} (${msg.ruleId}) [line ${msg.line}]`))
       this.results.failed++
-      this.results.errors.push({
-        file:  filename,
-        error: error.message
-      })
+      this.results.errors.push({ file: filename, errors: messages })
+    }
+    else {
+      console.log(`    PASS — clean (0 errors, 0 warnings)`)
+      this.results.passed++
     }
   }
 
+
+  async assertInvalid (filename, filepath, errorCount, warningCount, messages) {
+    const expected       = await this.parseExpectedWarnings(filepath)
+    const warningRuleIds = messages.filter(m => m.severity === 1).map(m => m.ruleId)
+
+    if (errorCount > 0) {
+      console.log(`    FAIL — unexpected errors found`)
+      messages.filter(m => m.severity === 2).forEach(msg =>
+        console.log(`      Error: ${msg.message} (${msg.ruleId}) [line ${msg.line}]`))
+      this.results.failed++
+      this.results.errors.push({ file: filename, errors: messages.filter(m => m.severity === 2) })
+      return
+    }
+
+    const missing = expected.filter(rule => !warningRuleIds.includes(rule))
+
+    if (missing.length > 0) {
+      console.log(`    FAIL — expected warnings not found: ${missing.join(', ')}`)
+      this.results.failed++
+      this.results.errors.push({ file: filename, error: `Missing expected warnings: ${missing.join(', ')}` })
+    }
+    else {
+      console.log(`    PASS — ${warningCount} expected warnings from ${expected.length} rules`)
+      this.results.passed++
+    }
+  }
+
+
   printSummary () {
-    console.log('\n📊 Test Summary:')
-    console.log(`✅ Passed: ${this.results.passed}`)
-    console.log(`❌ Failed: ${this.results.failed}`)
+    console.log('\n  Test Summary:')
+    console.log(`    Passed: ${this.results.passed}`)
+    console.log(`    Failed: ${this.results.failed}`)
 
     if (this.results.failed > 0) {
-      console.log('\n🔍 Failures:')
-      this.results.errors.forEach(error => {
-        console.log(`  ${error.file}: ${error.error || 'ESLint errors'}`)
-      })
+      console.log('\n  Failures:')
+      this.results.errors.forEach(error =>
+        console.log(`    ${error.file}: ${error.error || 'ESLint errors'}`))
       process.exit(1)
     }
     else
-      console.log('\n🎉 All tests passed!')
+      console.log('\n  All tests passed!\n')
   }
 }
 
 
-// Run tests if this file is executed directly
 if (import.meta.url === `file://${process.argv[1]}`) {
   const tester = new ESLintConfigTester()
+
   tester.runTests()
 }
 
+
 export default ESLintConfigTester