eslint-config-twilio-react

2.0.0 verified Sat Apr 25 auth: no javascript

Twilio's official ESLint configuration for React projects. Current stable version is 2.0.0. This package extends eslint-config-twilio, eslint-plugin-react, eslint-plugin-react-hooks, eslint-plugin-jsx-a11y, and eslint-plugin-no-unsanitized. It provides a comprehensive set of linting rules for React codebases, including accessibility, security, and code formatting via Prettier. The project is actively maintained by Twilio Labs and follows semantic versioning. Major breaking change in v2.0.0: dropped support for ESLint versions below 8, now requires ESLint ^8.

Common errors

error Error: Cannot find module 'eslint-config-twilio' ↓

cause eslint-config-twilio is not installed; it's a transitive dependency but may need to be installed explicitly.

fix

Install eslint-config-twilio: npm install eslint-config-twilio --save-dev

error Configuration for rule 'react/jsx-uses-react' is invalid ↓

cause Conflicting React versions or outdated plugin.

fix

Update eslint-plugin-react to the latest version: npm install eslint-plugin-react@latest --save-dev

error ESLint couldn't find the plugin 'eslint-plugin-jsx-a11y' ↓

cause Missing required plugin.

fix

Install the plugin: npm install eslint-plugin-jsx-a11y --save-dev

Warnings

breaking ESLint version 8 is required; versions 5, 6, and 7 are no longer supported. ↓

fix Upgrade ESLint to version 8 (npm install eslint@8 --save-dev).

gotcha The extends value must be 'twilio-react' (without the prefix). Using 'eslint-config-twilio-react' will not work. ↓

fix Use 'twilio-react' in the extends array.

deprecated Using require() for ESLint configs is discouraged; use JSON or JS config files. ↓

fix Use .eslintrc.json or .eslintrc.js with module.exports = { extends: ['twilio-react'] }.

gotcha Prettier configuration: manually import base config from eslint-config-twilio; this package does not do it automatically. ↓

fix Create .prettierrc.js and import base rules from 'eslint-config-twilio/rules/prettier'.

Install

npm install eslint-config-twilio-react

yarn add eslint-config-twilio-react

pnpm add eslint-config-twilio-react

Imports

twilio-react
wrong
```
{
  "extends": ["eslint-config-twilio-react"]
}
```
correct
```
{
  "extends": ["twilio-react"]
}
```
Use the unprefixed name 'twilio-react' in the extends array, not the full package name.

Quickstart

Installation and configuration of eslint-config-twilio-react for React projects.

// Install
npm install eslint eslint-config-twilio-react --save-dev

// .eslintrc.json
{
  "extends": ["twilio-react"],
  "rules": {
    // optional overrides
  }
}

// package.json scripts
{
  "scripts": {
    "lint": "eslint --ext js --ext jsx src/",
    "lint:fix": "npm run lint -- --fix"
  }
}

// Run
npm run lint