eslint-config-ooo

eslint-config-ooo

Table of content

Unified Code Style config based on Airbnb's JavaScript Code Style for OOO JavaScript-based application.

Integrated Support

• Prettier
• Flow type

Usage

// .eslintrc.js
module.exports = {
    extends: ['ooo'],
};

Code Style Guidelines

Importing

Common

• 3rd party stuff
• new line
• Flow types
• new line
• utils, other stuff, …

// @flow
import { ApolloClient } from 'apollo-client';
import { createHttpLink } from 'apollo-link-http';
import { InMemoryCache } from 'apollo-cache-inmemory';

import type { MyType } from '../types';

import Config from './Config';
import { someUtility } from '../utils';

React Component

• 3rd party stuff
• new line
• our React Components
• new line
• styled components
• new line
• Flow types
• new line
• utils, other stuff, ...

// @flow
import React, { Component } from 'react';
import { withApollo } from 'react-apollo';
import { Col, Row } from 'react-grid-system';

import MyDialog from '../MyDialog';
import MyFloatInput from '../MyFloatInput';

import * as Styled from './styledComponents';

import type { MyType } from '../../types.js';

import ImageLogo from '../../../assets/my-logo';
import { Normalizer } from '../../utils';

styled-components

• export each Styled Component individually
• import as a Object so we can use prefix Styled

// styledComponents.js
export const MyDiv = styled.div`
	color: 'red';
`;

export const MySpan = styled.span`
	color: 'black';
`;

// index.jsx - use in Component
// ... other imports
import * as Styled from './styledComponents';

// usage
<Styled.MyDiv>Yay!</Styled.MyDiv>

Tests

- located in folder `__test__`
-  `{fileNameWhichWeAreTesting}.test.js(x)`
- Use `test`  for Test cases implementation

Folder structure

someFolder/
	MyComponent/
		index.jsx
		graphql.js
		styledComponents.js
		__test__/
			index.test.jsx

Test example

// test example
describe('<MyComponent />', () => {
	test('Renders successfully', () => {
		// ...
	)
})

Common Guidelines

JavaScript

• Strictly go with ES6+ features
  • prefer Arrow Functions
  • Object/Array spread/rest operators
  • String template literals
  • prefer async / await in try catch construct to handle asynchronous operations
  • create small composable functions, no 200 line monsters!
  • if possible avoid function definitions in render() method, you can define it outside
  • …

React

• prefer Stateless Functional Components
• prefer .jsx extension on files which contains JSX syntax

React Native

• sadly, does not support .jsx :(

Formatting

• indent: 4 spaces
• max-len: 100
• string literals: single-quote const example = ’example’;

• should be handled by Prettier

Complex Example

// @flow
import React, { Component } from 'react';
import { withApollo } from 'react-apollo';
import { Col, Row } from 'react-grid-system';

import MyDialog from '../MyDialog';
import MyFloatInput from '../MyFloatInput';

import * as Styled from './styledComponents';

import type { MyType } from '../../types.js';

import ImageLogo from '../../../assets/my-logo';
import { Normalizer } from '../../utils';

type Props = {
	someNiceText: string,
	someNestedStructure: MyType,
};

type State = {
	isOpen: boolean,
};

// sometimes we need to export not-connected component (for tests, ...)
export class ExampleComponent extends Component<Props, State> {
	static defaultProps = {
		someNiceText: 'Das ist sauberer Code!',
		someNestedStructure: {},
	};

	state = {
		isOpen: false;
	};

	toggleDialog = () => 
		this.setState(state => ({ isOpen: !state.isOpen }));

	render() {
		const { someNiceText, someNestedStructure } = this.props;
		const { isOpen } = this.state;

		return (
			<Styled.Container>
				<Styled.Logo imgSrc={ImageLogo} />
				{isOpen && <MyDialog toggle={this.toggleDialog} />}
				<Styled.Something>
					{someNiceText}
				</Styled.Something>
				{someNestedStructure.text}
				<Row>
					<Col xs={6}>My float input:</Col>
					<Col xs={6}>
						<MyFloatInput 
							fullWidth
							normalize={Normalizer.normalizeFloat}
						/>
					</Col xs>
				</Row>
			</Styled.Container>
		);
	}	
}

// export connected component
export default withApollo(ExampleComponent);