VTEX ESLint Config for React

9.1.0 verified Sat Apr 25 auth: no javascript

VTEX's ESLint shared configuration for React projects, currently at version 9.1.0. It extends the base eslint-config-vtex and adds React-specific rules, including presets for general React, VTEX IO, and React Native. The package is maintained by VTEX and follows the release cadence of the VTEX Typescript monorepo. Key differentiators: opinionated, tailored for VTEX IO ecosystem, integrates with Prettier and TypeScript, and provides three presets for different React contexts.

Common errors

error Failed to load plugin 'vtex' declared in 'vtex-react' ↓

cause Missing eslint-plugin-vtex dependency.

fix

Run 'yarn add -D eslint-plugin-vtex'.

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

cause Invalid rule configuration.

fix

Check that your rule overrides are valid; refer to the eslint-plugin-react documentation.

error Cannot find module 'eslint-config-vtex' ↓

cause Missing base config 'eslint-config-vtex'.

fix

Run 'yarn add -D eslint-config-vtex' (automatically installed as a dependency of eslint-config-vtex-react, but ensure it's present).

error Parsing error: Cannot read file 'tsconfig.json' ↓

cause TypeScript project without a tsconfig.json.

fix

Create a tsconfig.json in the project root or ensure the parser can find it.

Warnings

gotcha Do not use the full package name 'eslint-config-vtex-react' in the extends field; ESLint expects the shorthand 'vtex-react'. ↓

fix Use "extends": ["vtex-react"] instead.

breaking Version 9.x dropped support for ESLint 6 and below. Requires ESLint ^7 or ^8. ↓

fix Upgrade ESLint to version 7 or 8.

deprecated The 'vtex-react/io' preset may become deprecated in future versions as VTEX IO evolves. ↓

fix Monitor release notes for migration guidance.

gotcha Make sure Prettier is installed as a peer dependency; the config assumes Prettier formatting. ↓

fix Run 'yarn add -D prettier' if not present.

gotcha TypeScript must be installed as a peer dependency for linting TypeScript files. ↓

fix Run 'yarn add -D typescript' if not present.

Install

npm install eslint-config-vtex-react

yarn add eslint-config-vtex-react

pnpm add eslint-config-vtex-react

Imports

eslint-config-vtex-react
wrong
```
extend 'eslint-config-vtex-react'
```
correct
```
extend 'vtex-react' in .eslintrc
```
ESLint resolves 'vtex-react' automatically; do not include the full package name.

vtex-react/io

wrong

extend 'eslint-config-vtex-react/io'

correct

extend 'vtex-react/io' in .eslintrc

Sub-preset for VTEX IO React applications.

vtex-react/native

wrong

extend 'eslint-config-vtex-react/native'

correct

extend 'vtex-react/native' in .eslintrc

Sub-preset for React Native applications.

Quickstart

Shows how to install and configure eslint-config-vtex-react in a React project.

// 1. Install dependencies
// yarn add -D eslint-config-vtex-react typescript prettier eslint

// 2. Create .eslintrc with:
{
  "extends": ["vtex-react"],
  "rules": {
    // Override rules if needed
  }
}

// 3. Optionally add a lint script to package.json:
// "lint": "eslint src --ext .ts,.tsx"