Code style rules not covered by eslint
Component Sequence:
Static props (propTypes - defaultProps - contextType - manifest - others) - props - constructor (avoid if possible) - lifecycle - methods - render.- Put isRequired props on top and props without isRequired on bottom inside propTypes.
- Prefer specifying defaultProps for all props without isRequired.
- Semicolon after "fat arrow methods" and class properties (including static) is required.
- Prefer using async functions (with try ... catch if needed) instead of .then().catch() when working with Promises.
- super(props) must be followed with empty line (like after const/let).
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
Use arrow func methods instead of binding.
Ternary operator should look like this:
condition ? statement : statement; // OR condition ? statement : statement; // BUTT NOT condition ? statement : statement;
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.