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.