AQ Styleguide

Appearance

Whitespace ​

At Altruistiq we love whitespace. Just like a good book, or an online article, breaking up chunks of code using linebreaks makes your code easier to use. Of course reabability is a subjective matter, and so is adding linebreaks. But we still want to mention some general guidelines for adding whitespace:

Vue

  • Use linebreaks between component attributes (props, data, computed, methods, etc). The name, mixin and component attributes at the top of your component can be grouped.
  • Seperate all methods (computed and methods) by a linebreak.
  • Add linebreaks after imports
  • Use whitespace between style declarations

Backend

  • Add linebreaks after imports
  • Seperate all methods (whether in objects or not) by a linebreak.
  • Add 2 linebreaks between test methods in .spec files

General

  • seperate variable declarations and logic using linebreaks. As an example:

    Don't

    js
    const myFunction = () => {
    const something = "lorem ipsum";
    const anotherThing = "that";
    if (something !== anotherThing) return "correct";
    return "incorrect";
};
    const myFunction = () => {
    const something = "lorem ipsum";
    const anotherThing = "that";
    if (something !== anotherThing) return "correct";
    return "incorrect";
};

    But instead seperate logic from const declarations.

    js
    const myFunction = () => {
    const something = "lorem ipsum";
    const anotherThing = "that";

    if (something !== anotherThing) return "correct";
    return "incorrect";
};
    const myFunction = () => {
    const something = "lorem ipsum";
    const anotherThing = "that";

    if (something !== anotherThing) return "correct";
    return "incorrect";
};

    This is a litte subjective, because you can over-do it, for example:

    js
    const myFunction = () => {
    const something = "lorem ipsum";
    const anotherThing = "that";

    if (something !== anotherThing) return "correct";

    const x = 10;

    if (x === 10) return "incorrect";
    return "incorrect";
};
    const myFunction = () => {
    const something = "lorem ipsum";
    const anotherThing = "that";

    if (something !== anotherThing) return "correct";

    const x = 10;

    if (x === 10) return "incorrect";
    return "incorrect";
};

    would be better grouped like:

    js
    const myFunction = () => {
    const something = "lorem ipsum";
    const anotherThing = "that";

    if (something !== anotherThing) return "correct";

    // this is basically a new block of logic in the code, so group it using linebreaks
    const x = 10;
    if (x === 10) return "incorrect";

    return "incorrect";
};
    const myFunction = () => {
    const something = "lorem ipsum";
    const anotherThing = "that";

    if (something !== anotherThing) return "correct";

    // this is basically a new block of logic in the code, so group it using linebreaks
    const x = 10;
    if (x === 10) return "incorrect";

    return "incorrect";
};

  • Add spaces in object, variable and function declarations

    Don't

    js
    const x = "hello";
const x = "hello";

const y = { key1: "name", key2: "name2" };
const y = { key1: "name", key2: "name2" };
const y = { key1: "name", key2: "name2" };

const myFunction = ({ param1, param2 }) => {};
    const x = "hello";
const x = "hello";

const y = { key1: "name", key2: "name2" };
const y = { key1: "name", key2: "name2" };
const y = { key1: "name", key2: "name2" };

const myFunction = ({ param1, param2 }) => {};

    Do

    js
    const x = "hello";
const y = { key1: "name", key2: "name2" };

const myFunction = ({ param1, param2 }) => {};
    const x = "hello";
const y = { key1: "name", key2: "name2" };

const myFunction = ({ param1, param2 }) => {};

Function params ​

When you write functions that accept multiple params, use an object as param. Example

Don't

js
const myFunc = (id, name, description, text) => {};
const myFunc = (id, name, description, text) => {};

Do

js
const myFunc = ({ id, name, description, text }) => {};
const myFunc = ({ id, name, description, text }) => {};

This solves a couple of common confusions while developing and avoids bugs when running code:

  • it makes sure that the order you put the params in the function call isn't important anymore (and you don't have the overhead of having to remember that order), for example you can now do:

    js
    myFunc({
    id: "lorem",
    description: "ipsem",
    text: "dolor",
    name: "sit",
});
    myFunc({
    id: "lorem",
    description: "ipsem",
    text: "dolor",
    name: "sit",
});

    instead of having to remember the exact order to place params in

    js
    myFunc("lorem", "sit", "ipsem", "dolor");
    myFunc("lorem", "sit", "ipsem", "dolor");

  • it makes sure that you can omit params from the function call, for example

    js
    myFunc({
    id: "lorem",
    text: "ipsem",
});
    myFunc({
    id: "lorem",
    text: "ipsem",
});

    instead of

    js
    myFunc("lorem", null, null, "ipsem");
    myFunc("lorem", null, null, "ipsem");

  • it makes it clear what you're passing around when calling the function. For example when using normal params you have no idea what value is what

    js
    myFunc("lorem", "sit", "ipsem", "dolor");
    myFunc("lorem", "sit", "ipsem", "dolor");

    but when calling the function with an object param you can clearly see what you're passing around:

    js
    myFunc({
  id: 'lorem',
  name: 'sit'
  description: 'ipsem',
  text: 'dolor',
})
    myFunc({
  id: 'lorem',
  name: 'sit'
  description: 'ipsem',
  text: 'dolor',
})

Policy to import from Lodash ​

When using Lodash make sure to only import what you need:

Do

js
import { reduce } from 'lodash'

_.reduce(....)
import { reduce } from 'lodash'

_.reduce(....)

Don't

js
import _ from 'lodash'

_.reduce(....)
import _ from 'lodash'

_.reduce(....)