or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

index.md
tile.json

tessl/npm-eslint-config-fbjs

ESLint configuration that matches Facebook's internal ESLint rules for JavaScript projects

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/eslint-config-fbjs@4.0.x

To install, run

npx @tessl/cli install tessl/npm-eslint-config-fbjs@4.0.0

index.mddocs/

ESLint Config FBJS

ESLint Config FBJS provides ESLint configuration rules that closely match Facebook's internal JavaScript coding standards. It offers comprehensive linting rules covering possible errors, best practices, stylistic issues, ECMAScript 6 features, React/JSX patterns, and accessibility checks for JavaScript and TypeScript projects.

Package Information

  • Package Name: eslint-config-fbjs
  • Package Type: npm
  • Language: JavaScript
  • Installation: 
    npm install --save-dev eslint-config-fbjs
    Peer Dependencies (must be installed separately): 
    npm install --save-dev hermes-eslint@">=0.8.0" eslint@"^8.0.0" eslint-plugin-babel@"^5.3.1" eslint-plugin-ft-flow@"^2.0.1" eslint-plugin-jsx-a11y@"^6.6.0" eslint-plugin-react@"^7.30.1"

Core Imports

The package is designed to be used primarily through ESLint's configuration system:

.eslintrc.json:

{
  "extends": "fbjs"
}

.eslintrc.js:

module.exports = {
  extends: 'fbjs'
};

For programmatic access:

const config = require('eslint-config-fbjs');

Basic Usage

Standard Configuration

Add the Facebook ESLint configuration to your project:

{
  "extends": "fbjs"
}

This provides the complete Facebook-style ESLint configuration with warnings for style issues and errors for critical problems.

Strict Configuration

For projects requiring all warnings to be treated as errors:

{
  "extends": "fbjs/strict"
}

This is useful in CI environments where warnings should cause build failures.

Capabilities

Main Configuration Export

The primary ESLint configuration that matches Facebook's internal coding standards. The export is the result of merging a base configuration with open-source specific overrides.

/**
 * Complete ESLint configuration object matching Facebook's internal standards
 * Created by merging base configuration with extended configuration for open source
 * Includes parser settings, plugins, rules, and environment configurations
 */
const config: ESLintConfig;

interface ESLintConfig {
  parser: string;
  parserOptions: ParserOptions;
  plugins: string[];
  rules: Rules;
  env: Environment;
  globals: Globals;
}

interface ParserOptions {
  ecmaVersion: number;
  sourceType: 'module' | 'script';
}

interface Rules {
  [ruleName: string]: RuleConfig;
}

type RuleConfig = 0 | 1 | 2 | 'off' | 'warn' | 'error' | [0 | 1 | 2 | 'off' | 'warn' | 'error', ...any[]];

interface Environment {
  browser?: boolean;
  es6?: boolean;
  node?: boolean;
  jest?: boolean;
  jasmine?: boolean;
}

interface Globals {
  [globalName: string]: boolean;
}

Usage:

// Direct import for programmatic use
const eslintConfig = require('eslint-config-fbjs');

// Standard ESLint configuration usage
module.exports = {
  extends: 'fbjs'
};

Strict Configuration Export

A strict version of the main configuration that converts all warnings to errors.

/**
 * Strict ESLint configuration where all warnings become errors
 * Built using the main configuration with modified error levels
 */
const strictConfig: ESLintConfig;

Usage:

// Direct import for programmatic use
const strictConfig = require('eslint-config-fbjs/strict');

// ESLint configuration usage
module.exports = {
  extends: 'fbjs/strict'
};

Shared Configuration Utilities

Shared utilities and configurations used across different configuration files.

/**
 * Shared configuration utilities and global definitions
 * Actual export: { globals: globals, maxLenIgnorePattern: maxLenIgnorePattern }
 */
const shared: {
  globals: Globals;
  maxLenIgnorePattern: string;
};

interface Globals {
  /** Facebook-specific development flag */
  __DEV__: boolean;
  /** Haste module system globals */
  require: boolean;
  requireDynamic: boolean;
  requireLazy: boolean;
  /** Flow React type definitions */
  ReactComponent: boolean;
  ReactClass: boolean;
  ReactElement: boolean;
  ReactPropsCheckType: boolean;
  ReactPropsChainableTypeChecker: boolean;
  ReactPropTypes: boolean;
  SyntheticEvent: boolean;
  SyntheticClipboardEvent: boolean;
  SyntheticCompositionEvent: boolean;
  SyntheticInputEvent: boolean;
  SyntheticUIEvent: boolean;
  SyntheticFocusEvent: boolean;
  SyntheticKeyboardEvent: boolean;
  SyntheticMouseEvent: boolean;
  SyntheticDragEvent: boolean;
  SyntheticWheelEvent: boolean;
  SyntheticTouchEvent: boolean;
  /** Flow utility types */
  $Either: boolean;
  $All: boolean;
  $Tuple: boolean;
  $Supertype: boolean;
  $Subtype: boolean;
  $Shape: boolean;
  $Diff: boolean;
  $Keys: boolean;
  $Enum: boolean;
  $Exports: boolean;
  Class: boolean;
  function: boolean;
  Iterable: boolean;
  /** Flow suppress types */
  $FlowIssue: boolean;
  $FlowFixMe: boolean;
  $FixMe: boolean;
  /** Flow core definitions */
  Iterator: boolean;
  IteratorResult: boolean;
  $await: boolean;
  ArrayBufferView: boolean;
  /** Flow Facebook definitions */
  FbtResult: boolean;
  $jsx: boolean;
  FBID: boolean;
  AdAccountID: boolean;
  UID: boolean;
  ReactNode: boolean;
  Fbt: boolean;
  /** LiveRail definitions */
  LRID: boolean;
  /** PowerEditor definitions */
  UkiAccount: boolean;
  UkiAdgroup: boolean;
  UkiCampaign: boolean;
  UkiCampaignGroup: boolean;
  /** WebRTC type definitions */
  RTCConfiguration: boolean;
  RTCIceServer: boolean;
  RTCOfferOptions: boolean;
  RTCStatsReport: boolean;
  RTCStatsCallback: boolean;
  RTCPeerConnection: boolean;
  RTCPeerConnectionErrorCallback: boolean;
  RTCSessionDescription: boolean;
  RTCSessionDescriptionInit: boolean;
  RTCSessionDescriptionCallback: boolean;
  RTCIceCandidate: boolean;
  RTCIceCandidateInit: boolean;
  RTCPeerConnectionIceEvent: boolean;
  RTCPeerConnectionIceEventInit: boolean;
  RTCDataChannel: boolean;
  RTCDataChannelInit: boolean;
  RTCDataChannelEvent: boolean;
  RTCDataChannelEventInit: boolean;
}

Usage:

const shared = require('eslint-config-fbjs/shared');

// Access global definitions (object with boolean flags for each global)
const globals = shared.globals;

// Access max-length ignore pattern (regex string for require/import statements)
const maxLenPattern = shared.maxLenIgnorePattern;

Change Error Level Utility

Utility function to modify error levels of ESLint rules in configuration objects.

/**
 * Changes the error level of all enabled rules in an ESLint configuration
 * Creates a deep clone of the config to avoid mutation
 * Skips rules that are already 'off' (0 or 'off')
 * Handles both array-format rules and simple value rules
 * @param config - ESLint configuration object to modify
 * @param level - New error level (0=off, 1=warning, 2=error)
 * @returns Deep-cloned configuration with modified error levels
 */
function changeErrorLevel(config: ESLintConfig, level: 0 | 1 | 2): ESLintConfig;

/**
 * Helper function to check if a rule is disabled
 * @param rule - Rule value to check (can be number, string, or array)
 * @returns true if rule is disabled (0 or 'off')
 */
function isOff(rule: RuleConfig): boolean;

Usage:

const changeErrorLevel = require('eslint-config-fbjs/utils/change-error-level');
const baseConfig = require('eslint-config-fbjs');

// Convert all warnings to errors
const strictConfig = changeErrorLevel(baseConfig, 2);

// Convert all errors to warnings
const lenientConfig = changeErrorLevel(baseConfig, 1);

Configuration Details

Supported Plugins

The configuration includes support for these ESLint plugins:

  • babel: Babel-specific linting rules (7 rules configured)
  • ft-flow: Flow type checking integration (2 rules configured)
  • jsx-a11y: JSX accessibility checking (30+ rules configured)
  • react: React-specific linting rules (40+ rules configured)

Rule Categories

The configuration includes over 550 ESLint rules across these categories:

  • Possible Errors (35+ rules): Rules that catch potential runtime errors and logic mistakes
  • Best Practices (40+ rules): Rules that enforce coding best practices and prevent common pitfalls
  • Strict Mode (1 rule): JavaScript strict mode enforcement
  • Variables (10+ rules): Variable declaration and usage rules
  • Node.js (8+ rules): Node.js-specific rules (disabled by default)
  • Stylistic Issues (50+ rules): Rules that enforce consistent code style and formatting
  • ECMAScript 6 (20+ rules): Rules specific to ES6+ language features
  • React/JSX (40+ rules): Rules for React component development and JSX syntax
  • Accessibility (30+ rules): Rules for ensuring accessible JSX/React code
  • Flow Type (2+ rules): Flow type annotation support

Parser Configuration

  • Parser: hermes-eslint (Facebook's JavaScript parser)
  • ECMAScript Version: ES6 (2015) with module support
  • Source Type: Module-based JavaScript

Environment Support

The main configuration includes both base and extended environments:

Base Environments:

  • Browser: DOM and browser global variables
  • ES6: ECMAScript 6 global variables and features

Extended Environments (for open source projects):

  • Node.js: Node.js global variables and scope
  • Jest: Jest testing framework globals
  • Jasmine: Jasmine testing framework globals

Configuration Constants

The implementation uses these internal constants:

const OFF = 0;        // Rule disabled
const WARNING = 1;    // Rule generates warnings
const ERROR = 2;      // Rule generates errors
const INDENT_SIZE = 2; // Standard indentation size

Types

interface ESLintConfig {
  /** JavaScript parser to use (hermes-eslint) */
  parser: string;
  /** Parser configuration options */
  parserOptions: {
    ecmaVersion: number;
    sourceType: 'module' | 'script';
  };
  /** ESLint plugins to load */
  plugins: string[];
  /** Linting rules configuration */
  rules: {
    [ruleName: string]: 0 | 1 | 2 | 'off' | 'warn' | 'error' | [0 | 1 | 2 | 'off' | 'warn' | 'error', ...any[]];
  };
  /** JavaScript environments to enable */
  env: {
    browser?: boolean;
    es6?: boolean;
    node?: boolean;
    jest?: boolean;
    jasmine?: boolean;
  };
  /** Global variables available in the code */
  globals: {
    [globalName: string]: boolean;
  };
}