The Best ESLint Rules for React Projects

• eslint-plugin-react

  67 8,818 8.4 JavaScript

  React-specific linting rules for ESLint

  

An obvious pick for React projects, but eslint-plugin-react along with their plugin:react/recommended rule set is a must. This will give you some sensible rules such as requiring a key to be specified in JSX arrays. eslint-config-airbnb is another good (if a bit loose) base rule set on top of eslint-plugin-react to start from.

• javascript

  132 141,848 6.5 JavaScript

  JavaScript Style Guide

  

An obvious pick for React projects, but eslint-plugin-react along with their plugin:react/recommended rule set is a must. This will give you some sensible rules such as requiring a key to be specified in JSX arrays. eslint-config-airbnb is another good (if a bit loose) base rule set on top of eslint-plugin-react to start from.

• SurveyJS

  surveyjs.io sponsored

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• eslint-plugin-react-refresh

  1 152 6.2 TypeScript

  Validate that your components can safely be updated with fast refresh

react-refresh. Requires that .tsx/.jsx files only export components. Why? Because this optimises your app for fash refresh to get a smoother development experience. If you're using Vite, you'll be utilising fash refresh under the hood and will want to enable this rule.

• eslint-plugin-jsx-a11y

  16 3,321 7.1 JavaScript

  Static AST checker for a11y rules on JSX elements.

  

jsx-a11y is all about ensuring your DOM elements are accessible. This plugin will prompt you to include the correct ARIA attributes such as labels and roles, in addition to things like alt text.

• typescript-eslint

  123 14,568 9.9 TypeScript

  :sparkles: Monorepo for all the tooling which enables ESLint to support TypeScript

  

By convention, React components should be named in PascalCase. @typescript-eslint has the config we need, and though we can't specifically target React components, we can target variables (and set some other conventions while we're at it):

• eslint-plugin-filename-rules

  1 33 10.0 JavaScript

Then we can enforce our file names to be PascalCase via filename-rules:

• eslint-plugin-import

  45 5,299 8.4 JavaScript

  ESLint plugin with rules that help validate proper imports.

  

Finally, I'd also suggest requiring named exports via import:

• InfluxDB

  www.influxdata.com sponsored

  Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

  

• eslint-plugin-prefer-arrow-functions

  1 37 6.6 TypeScript

  Auto-fix plain Functions into Arrow Functions, in all cases where conversion would result in the same behaviour

I prefer to set a standard for function declarations, so require use of arrow functions with an implicit return if possible. prefer-arrow-functions can do this for us, noting we also need to override some default ESLint rules:

Suggest a related project