@heinzelman-labs/eslint-config-react NPM

@heinzelman-labs/eslint-config-react

A personal ESLint shareable config for React projects based on eslint-config-airbnb.

References

This config ...

extends eslint-config-airbnb 19.0.4.
extends @heinzelman-labs/eslint-config-base.
is compatible with ESLint 8.x.

Source code of this package can be found on ...

Installation

yarn

yarn add -D @heinzelman-labs/eslint-config-react

npm

npm i -D @heinzelman-labs/eslint-config-react

Usage

Basic `.eslintrc.js`

module.exports = {
    extends: [
        '@heinzelman-labs/eslint-config-react'
    ],
    rules: {
        // Adjust rules ...
    },
    env: {
        // Environments as needed ...
    }
};

Mono-Repo `.eslintrc.js`

For mono-repos don't forget to add your package directories.

const { resolve } = require('path');

module.exports = {
    // ...
    rules: {
        'import/no-extraneous-dependencies': ['error', { 
            packageDir: [
                __dirname,
                resolve(__dirname, 'packages/foo'),
                resolve(__dirname, 'packages/bar')
            ]
        }]
    },
    // ...
};

CLI

I would recommend to not use glob patterns or filenames, but to use directories to specify target files where possible. Then use the --ext option to define relevant file extensions. You may also use .eslintignore to exclude files from the result set as needed. This way ESLint will not complain if you end up not having a certain file type among your sources anymore, e.g. .mjs.

eslint ./src --ext .js,.mjs,.jsx

Base Rule Optimizations

  'no-unused-vars': ['error', { 
+     varsIgnorePattern: '^React$',
      vars: 'all', 
      args: 'none', 
      ignoreRestSiblings: true 
  }],

Diff `eslint-config-airbnb`

Note that unlike with eslint-config-airbnb, the rules for React hooks are integrated by default.

React

- 'react/jsx-indent-props': ['error', 2],
+ 'react/jsx-indent-props': ['error', 4],

- 'react/jsx-indent': ['error', 2],
+ 'react/jsx-indent': ['error', 4],
  
- 'react/jsx-filename-extension': ['error', { extensions: ['.jsx'] }],
+ 'react/jsx-filename-extension': ['error', { extensions: ['.js', '.jsx', '.tsx']}],
  
- 'react/jsx-one-expression-per-line': ['error', { allow: 'single-child' }],
+ 'react/jsx-one-expression-per-line': 'off',
  
- 'react/jsx-fragments': ['error', 'syntax'],
+ 'react/jsx-fragments': 'off',
  
  'react/jsx-props-no-spreading': ['error', {
-     html: 'enforce',
+     html: 'ignore',
-     custom: 'enforce',
+     custom: 'ignore',
      exceptions: [],
  }]
  
- 'react/function-component-definition': ['error', {
-     namedComponents: ['function-declaration', 'function-expression'],
-     unnamedComponents: 'function-expression',
- }],
+ 'react/function-component-definition': 'off'