eslint-config-noise-react v0.14.0

ESLint Config Noise Node

An opinionated ESLint config based on the Airbnb JavaScript Style Guide for Node.js development.

Plugins

Includes these plugins.

• eslint-plugin-import
• eslint-plugin-prettier
• eslint-plugin-promise
• eslint-plugin-react
• eslint-plugin-react-hooks
• eslint-plugin-unicorn

Install

npm install --save-dev eslint eslint-config-noise-react
npx install-peerdeps --dev eslint-config-noise-react

Configure

There are many ways to configure ESLint in the official documentation.

.eslintrc

{ "extends": ["eslint-config-noise-node"], "root": true };

Components / attributes / labels

Some rules depend on proper configuration. Make sure to configure these when you wrap relevant DOM elements.

Eg. with Gatsby and Next.js you'd use a Link component instead of an a element.

.eslintrc.js

const { extendRules } = require('eslint-noise-utils');
const { pluginJsxA11y } = require('eslint-config-noise-react/rules');
module.exports = {
  rules: extendRules(pluginJsxA11y, {
    'jsx-a11y/anchor-has-content': { components: ['Link'] },
    'jsx-a11y/anchor-is-valid': { components: ['Link'], specialLink: ['to'] },
    'jsx-a11y/control-has-associated-label': {
      controlComponents: [],
      labelAttributes: ['label'],
    },
    'jsx-a11y/heading-has-content': { components: [] },
    'jsx-a11y/img-redundant-alt': { components: ['Image'] },
    'jsx-a11y/interactive-supports-focus': { tabbable: [] },
    'jsx-a11y/label-has-associated-control': {
      controlComponents: [],
      labelAttributes: [],
      labelComponents: [],
    },
    'jsx-a11y/media-has-caption': { audio: [], track: [], video: [] },
  }),
};