Pattern Inconsistency

Detects mixed coding patterns: styling approaches, state management, async patterns.

Rule ID:pattern-inconsistency

Examples#

BadMixed async patterns and styling approaches

// File A: async/await
const data = await fetchUser(id);

// File B: .then() chains
fetchUser(id).then(data => {
  return processData(data);
}).then(result => {
  updateUI(result);
}).catch(handleError);

// Mixed styling: Tailwind + CSS Modules + inline
<div className="flex gap-4">              {/* Tailwind */}
  <span className={styles.label}>Name</span> {/* CSS Modules */}
  <span style={{ color: 'red' }}>Error</span> {/* Inline */}
</div>

GoodOne pattern per concern

// Consistent async/await everywhere
const data = await fetchUser(id);
const result = await processData(data);
await updateUI(result);

// One styling approach: Tailwind only
<div className="flex gap-4">
  <span className="text-sm text-gray-500">Name</span>
  <span className="text-sm text-red-500">Error</span>
</div>

What It Detects#

mediumMixed async patterns (async/await + .then())

Mixed async patterns: {N} async/await and {N} .then()/.catch()

Fix: Standardize on the dominant async pattern.

mediumMixed styling approaches (Tailwind + CSS Modules + inline)

Mixed styling approaches: {list}

Fix: Pick ONE styling approach and use it consistently.

mediumMultiple state management libraries

Multiple state management approaches: {list}

Fix: Consolidate to one state management solution.

Configuration#

This rule is enabled by default. To disable it:

.vibertestrc.jsonjson

{
  "rules": {
    "pattern-inconsistency": {
      "enabled": false
    }
  }
}

#011 Style Inconsistency #013 Obsolete Patterns