eslint-config-blueflag

Blue Flag linting configurations

Installation

npm install eslint-config-blueflag

// .eslintrc
{
    "extends": [
        "eslint-config-blueflag",
        "eslint-config-blueflag/flow.js" // With flow types
    ]
}

Global linters (Sublime Linter)

If your linter can't handle using the current directory to find binaries you will need to install the plugins globally. Make sure you install eslint 2.4.0 though. The babel parser is having issues with later versions.

# Defaults 
# eslint@2.4.0 
# eslint-plugin-react 
#  
# Flow Types 
# eslint-plugin-flow-vars 
# eslint-plugin-flowtype 
 
# one liner 
npm install -g eslint@2.4.0 eslint-plugin-flow-vars eslint-plugin-flowtype eslint-plugin-react@5.2.0 babel-eslint
 

Style Guide

JSX

Return JSX elements directly

// Good
return <ul className="List">
    <li>list items</li>
    <li>list items</li>
</ul>;
 
// Bad
return (
    <ul className="List">
        <li>list items</li>
        <li>list items</li>
    </ul>
);

Find and replace

Find: return(\s+?)\((\s+?)<

Automatic find and replaces are hard for this. You can replace return(\s+?)\((\s+?)< with return <, find the closing ); and replace it with ; and de-indent all lines between.

Use self-closing tags for elements without children

// Good
return <span />;
 
// Bad
return <span></span>;

Multiple line components should have each prop on a new line, indented once

// Good
return <ExampleComponent
    title="Example"
    author="Robert"
>
    <p>Child elements</p>
</ExampleComponent>;
 
return <ExampleComponent
    title="Example"
    author="Robert"
/>
 
// Bad
return <ExampleComponent title="Example"
    description="Hello"
>
    <p>Child elements</p>
</ExampleComponent>;
 
return <ExampleComponent
        title="Example"
        description="Hello">
    <p>Child elements</p>
</ExampleComponent>;

Find and replace

Find: \s+?$\s+?(/?>;?)(\s*?) Replace: $1\n and then fix up indentation

JS

Chains of functions should be indented by 4 spaces

// Good
return fromJS(list)
    .map(ii => ii.get('id'))
    .sort()
    .toJS();
 
// Bad
return fromJS(list).map(ii => ii.get('id')).sort().toJS();
 
return fromJS(list)
       .map(ii => ii.get('id'))
       .sort()
       .toJS();
 
 

Named imports should not have spaces between braces and words

// Good
import React, {Component, Children} from 'react';
 
// Bad
import React, { Component, Children } from 'react';

Naming

• Never pluralize.

Filenames should use TitleCase

// Good
Button.jsx
CreateRoutes.js
 
// Bad
button.jsx
createRoutes.js

Folders should always be camelCase

// Good
src/users/
src/learningPlan/
 
// Bad
src/Users/
src/learning_plan/

Route paths should be kebab-case

// Good
http://example.com/free-hugs
 
// Bad
http://example.com/freeHugs
http://example.com/free_hugs

Action Names should follow SEGMENT_NOUN_VERB

Underscores are reserved for the division of concept not word spaces

// Good
COURSE_ASSIGNEE_CHANGE
COURSE_DEFAULTASSIGNEE_CHANGE
 
 
// Bad
COURSECHANGE
CHANGE_COURSE_DEFAULT_ASSIGNEE
CHANGE_COURSE
courseChange

Action Creators should be lowerCamelCase of ActionName

// Good COURSE_ASSIGNEE_CHANGE
courseAssigneeChange()
 
// Bad COURSE_ASSIGNEE_CHANGE
changeCourseAssignee()
dispatchCourseAssignee()
COURSE_ASSIGNEE_CHANGE()
 
 

Errors

"Expected string but got object"

Often caused by a require() requiring a file that's using export default. Ensure all require()s of components with export default use import instead.

"inst.render is not a function"

In React <0.15 this can happen when functional components try to return null. They must return an empty <span/> instead. This has been fixed as of React 0.15