edenspiekermann / espi-eslint-config Goto Github PK

I would propose the following approach:

1. 3rd party imports, sorted alphabetically based on the from 'blah';
2. ---newline---
3. global imports, sorted from farthest to nearest and then alphabetically from '../../../blubb;
4. ---newline---
5. local imports, sorted alphabetically from './nuff;

Since we used named imports as well, they should also be sorted here: import { Ahh, Beh, Ceh } from './alphabet;

Example:

import { Field, Fromik } from 'formik';
import { Link } from 'gatsby';
import nanoid from 'nanoid';
import { bool, number, string } from 'prop-types';
import React, { useCallback, useMemo } from 'react';
import BEMHelper from 'react-bem-helper';

import { Button } from '../../shared/button';
import { Container, Layout } from '../../shared/layout';
import { Banner, Text } from '../commons';

import { Item } from './item';
import 'example.scss';

Use quoting for object properties only when needed. If needed, use it consistently:

• No need for quoting, this will be reported

const obj = {
    'foo': 'bar',
};

• No need for quoting, this is correct

const obj = {
    foo: 'bar',
};

• A need for quoting

const obj = {
    '0': 'zero',
    'non-valid-if-unquoted-prop': true,
};

• A need for quoting, but inconsistently used – this will be reported

const obj = {
    '0': 'zero',
    'non-valid-if-unquoted-prop': true,
    foo: 'bar', // needs quoting because of the rest
};

Add the following rule:

'quote-props': ['error', 'consistent-as-needed'],

See: https://eslint.org/docs/rules/quote-props#consistent-as-needed

The current validation configuration enforces the following format of switch/case statements:

switch(a){
case "a":
    break;
case "b":
    break;
}

We should use the eslint default configuration that looks like this:

switch(a){
  case "a":
    break;
  case "b":
    break;
}

See: https://eslint.org/docs/rules/indent

Add react-hooks plugin by default for a react configs: https://reactjs.org/docs/hooks-rules.html#eslint-plugin

This should extend from plugin:react-hooks/recommended configuration: https://github.com/facebook/react/tree/master/packages/eslint-plugin-react-hooks#eslint-plugin-react-hooks

When running eslint with the espi config, the following warning appears:

(node:3767) [ESLINT_LEGACY_OBJECT_REST_SPREAD] DeprecationWarning: The
'parserOptions.ecmaFeatures.experimentalObjectRestSpread' option is deprecated. Use
'parserOptions.ecmaVersion' instead. (found in "node_modules/eslint-config-airbnb-base/index.js")

Probably due to an outdated version of the Airbnb config.

https://www.npmjs.com/package/eslint-plugin-react-hooks

The export rule for modules disallows only named modules and prefers a default export:

export default const Component = () => { ... };

Disabling the rule import/prefer-default-export would allow the usage of named exports:

export const Component = () => { ... };

Benefits:

• Multiple exports per file (if necessary)
• Consistent names between exports and imports (easier refactoring and searchability in project)
• Possibly better three shaking

See: https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/prefer-default-export.md

Change current setting to:

'import/prefer-default-export': ['off'],

The no-param-reassign rule does not allow props reassignment.

To fix the behaviour and allow props reassignment, add the following rule: 'no-param-reassign': ['error', { 'props': false }]

The dependencies @typescript-eslint/eslint-plugin and @typescript-eslint/parser needed to be updated >=2.7.0 to support TypeScript 3.7 features like optional chaining.

https://github.com/typescript-eslint/typescript-eslint/releases

Should we allow props speading (react/jsx-props-no-spreading) like:

const Component = (props) => (
  <OtherComponent {...props} />
);