Lint Check

Lint Check and Auto-Fix

Run linting and fix common issues for Fluent UI packages.

Steps

1. Determine scope. If $ARGUMENTS is provided, lint that specific package. Otherwise, lint affected packages:

   # Specific package
   yarn nx run @fluentui/$ARGUMENTS:lint
   
   # Or affected packages
   yarn nx affected -t lint
   

2. Parse the output and categorize errors by the custom Fluent UI ESLint rules:

   Rule	What it catches	How to fix
   @fluentui/ban-context-export	Context exported from wrong layer	Move to react-shared-contexts package
   @fluentui/ban-instanceof-html-element	instanceof HTMLElement (breaks iframes)	Use element.tagName or feature detection
   @fluentui/no-global-react	React.FC, React.useState etc.	Use named imports: import { useState } from 'react'
   @fluentui/no-restricted-imports	Banned import paths	Use the allowed import path from the error message
   @fluentui/no-context-default-value	Context created without undefined default	Use createContext(undefined) and add a guard hook

3. Auto-fix any issues found by editing the source files directly. For each fix:

   • Read the file
   • Apply the fix
   • Verify the fix by re-running lint on that specific file

4. Report a summary of what was found and fixed.

References

• ESLint plugin source: packages/eslint-plugin/src/rules/
• Design tokens guide: docs/architecture/design-tokens.md
• Component patterns: docs/architecture/component-patterns.md