You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 7-8.RSVP
Sign inDemoInstall


Package Overview
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies



ESLint configuration and custom rules for Fluent UI

Version published
Weekly downloads
decreased by-28.93%
Weekly downloads




ESLint configuration and custom rules for Fluent UI


Usage: in your ESLint config file, add { "extends": ["plugin:@fluentui/<name>"] } or { "extends": ["plugin:@fluentui/eslint-plugin/<name>"] } (the two are equivalent).

  • react: react specific configuration for fluentui vNext
  • node: node specific configuration for fluentui vNext
  • react--legacy: react specific configuration for fluentui v7,8
  • node--legacy: node specific configuration for fluentui v7,8
  • react-northstar: For @fluentui/react-northstar and related packages
  • imports: auto import statements sorting configuration

Helpers for customizing configuration are exported under a configHelpers object.



Exporting context objects as a part of the public API can lead to unexpected usages of context by customers and might impede future refactoring. To allow customers use context while encapsulating our internals correctly, the developer should export a provider and hook.

❌ Don't

// src/context.ts
import * as React from 'react';
export const MyContext = React.createContext();

// src/index.ts
export { MyContext } from './context';

✅ Do

// src/context.ts
import * as React from 'react';
const MyContext = React.createContext();
export const MyContextProvider = MyContext.Provider;
export const useMyContext = () => React.useContext(MyContext);

// src/index.ts
export { MyContextProvider, useMyContext } from './context';


Ban importing or re-exporting from certain paths or modules. You can either ban the entire path, or only certain names. (Inspired by TSLint's import-blacklist.)

Requires one or more options objects. Either path or pathRegex is required.

  • path (string): Path or module to ban importing from (non-regex)
  • pathRegex (string): Regex for path or module to ban importing from
  • names ((string | { regex: string })[], optional): If provided, only ban imports of these names and/or regular expressions. Otherwise, ban all imports from the path.
  • message (string[], optional): Custom message to show with errors


"@fluentui/ban-imports": [
  { "path": "lodash" },
  { "path": "foo", "names": ["bar", { "regex": "^baz" }] },
  { "pathRegex": "^\.", message: "no relative imports" },
  { "pathRegex": "^\.\./(foo|bar)$", "names": ["baz"] }


Prevent using deprecated KeyboardEvent props which and keyCode, and recommend using @fluentui/keyboard-key instead.


Enforces max line length, more performantly than ESLint's max-len.

This rule is significantly faster than the default max-len rule because it does not support:

  • Expanding tabs (only handles spaces for indentation)
  • Multi-byte unicode characters (they will be counted as multiple characters)
  • Extra options for handling comments, strings, or URLs

(Skipping these extra features lets us do a basic string length check before running any regular expressions or other extra logic, which makes the huge majority of line length checks very fast.)


The rule requires an options object containing:

  • max (required): the maximum line length
  • ignorePatterns (optional): ignore the line if it matches any of these regular expressions


Ban references to the React global namespace (in favor of explicitly importing React). Implicit global references cause problems for API Extractor and potentially other tools.


Prevents imports from forbidden packages. If a corresponding preferred import is provided, the lint error will be automatically fixable.

Example Configuration:

"@fluentui/no-restricted-imports": [
    paths: [
        forbidden: ['@fluentui/react-theme', '@griffel/react`],
        preferred: '@fluentui/react-components',

❌ Don't

import * as React from 'react';
import { webDarkTheme } from '@fluentui/react-theme';
import { makeStyles } from '@griffel/react';

✅ Do

import * as React from 'react';
import { makeStyles, webDarkTheme } from '@fluentui/react-components';


Ban tslint:disable and tslint:enable comments.


Prevent visibility modifiers (public, protected, private) from being specified on class members/methods.

Used in Fluent UI only by @fluentui/react-northstar, not @fluentui/react.


Restricts usage of default values on React context creation. Imports should be provided to declare where the createContext function is coming from. For more information why this is necessary please consult #23624

Example Configuration:

"@fluentui/no-context-default-value": [
    imports: ["react", "@fluentui/react-context-selector"]

❌ Don't

import * as React from 'react';
const context = React.createContext({ someValue: undefined });

✅ Do

import * as React from 'react';
const context = React.createContext(undefined);


Bans usage of instanceof HTMLElement binary expressions as they might cause problems on multiple realms environments.

The alternative is to use isHTMLElement helper method provided by @fluentui/react-utilities packages, since that method does the proper verifications to ensure proper instance comparison.

❌ Don't instanceof HTMLElement; instanceof HTMLInputElement;

✅ Do

import { isHTMLElement } from '@fluentui/react-components';


isHTMLElement(, { constructorName: 'HTMLInputElement' });


Package last updated on 24 Jun 2024

Did you know?


Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.


Related posts

SocketSocket SOC 2 Logo


  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog


Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc