Lesson 7 / 25
Popular ESLint Plugins
Extend ESLint with plugins for React, Vue, TypeScript, and more.
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 for React projects.
npm install --save-dev eslint-plugin-react
# In .eslintrc.json:
{
"extends": ["eslint:recommended", "plugin:react/recommended"],
"plugins": ["react"],
"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?
- React-specific code like JSX and component patterns.
- Only JavaScript syntax errors.
- Performance issues.
Answer
React-specific code like JSX and component patterns. — eslint-plugin-react provides rules for React-specific patterns, hooks, and best practices.