Code formatting - MotivationalModelling/mm-local-editor GitHub Wiki

Code formatting

It's good to be a bit fussy about code formatting because it makes the project feel like a coherent whole rather than an assembled collection of peoples' work.

Typescript

Indentation

Use 4 space indentation, not 2. It makes the flow of control in the code stand out more and acts as an incentive to refactor as it runs across the page. People can't hold more than 7 things in mind and as code gets more deeply indented it becomes harder to understand. Break things out into smaller components. That's how React prefers things to work anyway.

Spaces inside braces

Please don't put spaces inside braces. It just pads the code out for very little improvement in legibility. Having a reasonable level of density of code on the page is helpful when reading.

Always wrap arguments in arrow functions

You only need to wrap arguments to arrow functions in parentheses when there are zero or more than one argument being declared. Just always use parentheses because it makes that pattern stand out.

Lists of dicts

This is a common thing to see in Typescript code. Try to make things compact but readable to maximise the information for the person reading:

export const defaultTreeData: TreeItem[] = [{
    id: 1,
    content: "Do",
    type: "Do",
    children: [{
        id: 6,
        content: "Do1",
        type: "Do",
        children: [{
            id: 7,
            content: "Do2",
            type: "Do",
            children: []
        }]
    }, {
        id: 8,
        content: "Do3",
        type: "Do",
        children: []
    }]
}, {
    [...]
}];