Code style rules not covered by eslint

Owned by Anastasia Hahanova
Last updated: Aug 23, 2019 by Oleksandr Yehorov
2 min read

  1. Component Sequence:
    Static props (propTypes - defaultProps - contextType - manifest - others) - props - constructor (avoid if possible) - lifecycle - methods - render.

  2. Put isRequired props on top and props without isRequired on bottom inside propTypes.

  3. Prefer specifying defaultProps for all props without isRequired.

  4. Semicolon after "fat arrow methods" and class properties (including static) is required.

  5. Prefer using async functions (with try ... catch if needed) instead of .then().catch() when working with Promises.

  6. super(props) must be followed with empty line (like after const/let).

  7. Imports from React
    (including prop-types, react-intl and others) - imports from libraries
    - empty line -
    imports from folio
    - empty line -
    own components imports - own helpers/utils functions - own constants imports - own other imports
    - empty line -
    styles imports.

    Prefer absolute imports instead of imports with ../ 
    Default imports first.
    And in addition to this sequence imports must be sorted from far (more '/' in path) imports to close (less '/' in path) imports.
    Correct:

    import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {
  get,
  sortBy,
} from 'lodash';

import { Button } from '@folio/stripes/components';

import PreviewJobs from '../../../components/PreviewsJobs'; // far component
import { sortCollection } from '../../../../utils/sortCollection'; // far util function
import sortRunningJobs from './sortRunningJobs'; // close util function
import { jobPropTypes } from '../../../Job/jobPropTypes'; // far constant
import { RUNNING } from '../../jobStatuses'; // close constant
import { DataFetcherContext } from '../../../DataFetcher/DataFetcherContext'; // other import

import css from './Job.css';

    Incorrect:

    import JobsList from '../JobsList'; // close component (close components must be below far components)
import PreviewJobs from '../../../components/PreviewsJobs'; // far component (far components must be above close components)

// Very incorrect (randomly placed imports):
import JobsList from '../JobsList'; // close component
import { DataFetcherContext } from '../../../DataFetcher/DataFetcherContext'; // other import
import PreviewJobs from '../../../components/PreviewsJobs'; // far component
import { sortCollection } from '../../../../utils/sortCollection'; // far util function
import { RUNNING } from '../../jobStatuses'; // close constant
import sortRunningJobs from './sortRunningJobs'; // close util function
import { jobPropTypes } from '../../../Job/jobPropTypes'; // far constant

  8. Use arrow func methods instead of binding.

  9. Ternary operator should look like this:

    condition ? statement : statement;

// OR
condition
? statement
: statement;

// BUTT NOT
condition ?
statement :
statement;

  10. If there is more than one property passed in component than each property must be placed on its own line.

    Correct:

    <FormattedMessage id="ui-data-import.loading" />
<Icon
  icon="spinner-ellipsis"
  size="small"
/>

    Incorrect:

    <FormattedMessage
  id="ui-data-import.loading"
/>
<Icon icon="spinner-ellipsis" size="small" />

    NOTE: there is no eslint rule for that.