Lesson 7 / 27
Popular ESLint Plugins
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.
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
Quick check: What does eslint-plugin-react check?
- Only JavaScript syntax errors.
- 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.