# @fluentui/eslint-plugin

**ESLint configuration and custom rules for Fluent UI**

## Configs

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

- `react`: For `@fluentui/react` (`office-ui-fabric-react`) and related packages
  - `react--legacy`: Like `react` but requiring an `I` prefix for interfaces
  - `node`: Like `react` but for packages which run in a Node environment (not the browser)
  - `node--legacy`: Like `node` but requiring an `I` prefix for interfaces
- `react-northstar`: For `@fluentui/react-northstar` and related packages

Helpers for customizing configuration are exported under a `configHelpers` object.

## Rules

### `ban-imports`

Ban importing from certain paths or modules. You can either ban the entire path, or only certain names. (Inspired by TSLint's [`import-blacklist`](https://palantir.github.io/tslint/rules/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[]`, optional): If provided, only ban imports of these names. Otherwise, ban all imports from the path.
- `message` (`string[]`, optional): Custom message to show with errors

Example:

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

### `deprecated-keyboard-event-props`

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

### `max-len`

Enforces max line length, more performantly than [ESLint's `max-len`](https://eslint.org/docs/rules/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.)

#### Options

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

### `no-tslint-comments`

Ban `tslint:disable` and `tslint:enable` comments.

### `no-visibility-modifiers`

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

Used in Fluent UI only by [`@fluentui/react-northstar`](https://aka.ms/fluent-ui), not `@fluentui/react`.