eslint-config-prettier-react

0.0.24 verified Sat Apr 25 auth: no javascript maintenance

An ESLint configuration preset that combines eslint-config-airbnb, eslint-config-prettier, and related plugins for a React + Prettier setup. Current version 0.0.24. Low maintenance; last updated in 2019. Key differentiator: simple one-line extend and peer dependency auto-install via install-peerdeps. Not recommended for new projects; consider eslint-config-airbnb with eslint-config-prettier separately.

Common errors

error Error: Cannot find module 'eslint-config-prettier-react' ↓

cause The package is not installed or its peer dependencies are missing.

fix

Run npx install-peerdeps --dev eslint-config-prettier-react.

error Failed to load plugin 'react' declared in 'BaseConfig': Cannot find module 'eslint-plugin-react' ↓

cause Missing peer dependency for eslint-plugin-react.

fix

Install the missing peer dep: npm install --save-dev eslint-plugin-react.

error Error: ESLint configuration in package.json is invalid ↓

cause Both package.json eslintConfig and .eslintrc exist, causing conflict.

fix

Remove one of them, e.g., delete the eslintConfig from package.json.

Warnings

breaking Peer dependencies are not installed automatically by npm v7+; manual install or use install-peerdeps is required. ↓

fix Use `npx install-peerdeps --dev eslint-config-prettier-react` or manually install all peer deps.

deprecated Package is outdated; no updates since 2019. ESLint and plugin versions have breaking changes. ↓

fix Consider using eslint-config-airbnb with eslint-config-prettier directly.

gotcha If you have an eslintConfig field in package.json, it will conflict with the .eslintrc file. ↓

fix Delete the eslintConfig field from package.json when using an .eslintrc file.

Install

npm install eslint-config-prettier-react

yarn add eslint-config-prettier-react

pnpm add eslint-config-prettier-react

Imports

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

Quickstart

Shows how to configure ESLint with the preset and add lint scripts to package.json.

{
  "scripts": {
    "lint": "eslint .",
    "lint:fix": "eslint . --fix"
  },
  "eslintConfig": {
    "extends": [
      "prettier-react"
    ]
  }
}

// Run in terminal:
// npx install-peerdeps --dev eslint-config-prettier-react
// eslint .