# Popular ESLint Plugins — ESLint and Prettier: Code Quality and Formatting

Source: https://www.skillbyai.com/en/eslint-prettier/eslint-prettier-07

> Extend ESLint with plugins for React, accessibility and imports using flat config.

## What plugins do

Plugins add domain-specific rules. eslint-plugin-react checks JSX, eslint-plugin-vue checks Vue templates. Install and enable them to catch framework-specific errors.

## Using React plugin

Install and configure eslint-plugin-react in a flat config.

```bash
npm install --save-dev eslint-plugin-react

// eslint.config.js
import react from 'eslint-plugin-react';

export default [
  react.configs.flat.recommended,
  {
    files: ['**/*.{jsx,tsx}'],
    settings: { react: { version: 'detect' } },
    rules: { 'react/prop-types': 'warn' },
  },
];
```

Output:

```
React plugin installed and configured
```

## Plugin ecosystem

Popular plugins include eslint-plugin-import (imports), eslint-plugin-jsx-a11y (accessibility), and eslint-plugin-node. Each adds rules relevant to its domain.

Quick check

**Quiz:** What does eslint-plugin-react check?

- [ ] Only JavaScript syntax errors.
- [x] React-specific code like JSX and component patterns.
- [ ] Performance issues.
- [ ] Only HTML templates

*Answer:* React-specific code like JSX and component patterns.. eslint-plugin-react provides rules for React-specific patterns, hooks, and best practices.