Skip to content

Style Guide

AJ Harvey edited this page Sep 13, 2019 · 2 revisions

Line Length

Lines should be limited to 150 characters although lines up to 200 characters in length are acceptable.

Line Wrapping

Where possible, lines should be wrapped by expanding brackets, parameter lists, or ternary expressions over multiple lines. Where this is not possible and the 200 character length limit is exceeded, lines may be broken after a comma or infix operator with all resulting lines but the first being indented.

Incorrect Example:

Realm.FileLogger({resultOK: result.ok, path: path1, status: result.status},
        {append:true, logPath:path1})

Correct Example:

Realm.FileLogger({
    resultOK: result.ok,
    path: path1,
    status: result.status
}, {append:true, logPath:path1})

Indention

Four spaces should be used for indentation.

Interface Properties

Interface properties should be terminated with semicolons rather than commas.

Incorrect Examples:

interface Props {
    avgPain?: number
    avgTime: number
    avgScore: number
}

interface Props {
    avgPain?: number,
    avgTime: number,
    avgScore: number
}

Correct Example:

interface Props {
    avgPain?: number;
    avgTime: number;
    avgScore: number;
}

Operator Spacing

Operators such as =, ==, +, etc. should have a balanced number of spaces surrounding them.

Incorrect Examples:

flex= {1}
flex ={1}

Correct Examples:

flex={1}
flex = {1}

Ternary Operator Spacing

Ternary operators should have an equal number of spaces surrounding each of their colon and question mark symbols. The number of spaces used should be zero or one and this spacing must be consistent before and after both symbols in the ternary expression.

Incorrect Examples:

let boolAsString = bool ? "True":"False";
let boolAsString = bool? "True": "False";
let boolAsString = bool ?"True" :"False";
let boolAsString = bool?"True" : "False";

Correct Examples:

let boolAsString = bool ? "True" : "False";
let boolAsString = bool?"True":"False";

Block Whitespace Trimming

Content wrapped in brackets and jsx tags should not have leading or trailing internal spaces.

Incorrect Examples:

data: { time: string, type: string, pain: number, score: number }[];
data: { time: string, type: string, pain: number, score: number}[];
data: {time: string, type: string, pain: number, score: number }[];
<Header flex={1}> Time </Header>
<Header flex={ 1 }>Time</Header>

Correct Example:

data: {time: string, type: string, pain: number, score: number}[];
<Header flex={1}>Time</Header>
<Header flex={1}>
    Time
</Header>

Colon and Comma Spacing

Colons and commas that do not preceed a newline should be followed by exactly zero or one spaces and should follow directly from the previous token without whitespace. This applies to colons used to initialize object properties and data type specifications.

Incorrect Examples:

data : {time: string, type: string}[];
data: {time : string, type: string}[];
data: {time: string , type: string}[];

Correct Examples:

data: {time: string, type: string}[];
data:{time:string,type:string}[];

Notes:

  • An empty line should be present at the end of all .ts and .tsx files
  • All statements should be terminated with a semicolon when possible
  • When using quotes, ' characters should be used for short terms, characters, and string tokens
  • When using quotes, " characters should be used for longer strings
  • When using quotes, ` characters should be used for complex strings containing variable elements