JavaScript

ESLint

Code style

Spacing en indendations in statements

Code moet een indenting hebben van 4 spaties.

// Goed
function hello(name) {
    return `Hello ${name}!`;
}

// Fout, only 2 spaces.
function hello(name) {
  return `Hello ${name}!`;
}

Gebruik altijd spaties in je statements, zodat het leesbaar blijft.

// Goed
if (true) {
    // ...
} else {
    // ...
}

// Fout, meer spaties nodig.
if(true){
    // ...
}else{
    // ...
}

Infix operators laat ruimte tussen waarden.

// Goed
const two = 1 + 1;

// Fout, meer spaties nodig.
const two = 1+1;

Opening braces moeten altijd op dezelfde regel beginnen.

// Goed
if (true) {
    // ...
}

// Fout
if (true)
{
    // ...
}

Functies met namen hebben geen space voor de parameters, anonieme functies hebben wel een functies.

// Goed
function save(user) {
    // ...
}

// Fout, geen spatie voor de parameters.
function save (user) {
    // ...
}
// Goed
save(user, function (response) {
    // ...
});

// Fout, anonieme functies hebben een spatie nodig voor de paramaters.
save(user, function(response) {
    // ...
});

Spacing en indentation in objecten en arrays

Objecten en arrays hebben een spatie nodig tussen de braces en brackets.

// Goed
const person = { name: 'Jeroen', job: 'Developer' };

// Fout, geen spaties tussen braces.
const person = {name: 'Jeroen', job: 'Developer'};

// Goed
const person = {
    name: 'Jeroen',
    job: 'Developer',
};

// Fout, geen komma op het einde.
const person = {
    name: 'Jeroen',
    job: 'Developer'
};

// Goed
const pairs = [['a', 'b'], ['c', 'd']];
const people = [{ name: 'Tim' }, { name: 'Jeroen' }];

// Fout, geen extra spaties in array die arrays of objecten bevat.
const pairs = [ ['a', 'b'], ['c', 'd'] ];
const people = [ { name: 'Tim' }, { name: 'Jeroen' } ];

Line height

Regels zouden niet langer dan 100 karakters en mogen niet langer dan 120 karakters zijn. Comments mogen niet langer dan 80 karakters zijn.

Quotes

Gebruik single quotes als mogelijk. Bij interpolatie gebruik template strings.

// Goed
const company = 'Vormkracht10';

// Fout, enkele aanhalingstekens kunnen worden gebruikt.
const company = "Vormkracht10";

// Fout, enkele aanhalingstekens kunnen worden gebruikt.
const company = `Vormkracht10`;

Bij het gebruik van een template string een backtick / accent grave.

// Goed
function greet(name) {
    return `Hello ${name}!`;
}

// Fout, template strings hebben de voorkeur.
function greet(name) {
    return 'Hello ' + name + '!';
}

Als je een HTML template definieert begin met een nieuwe regel indien mogelijk.

function createLabel(text) {
    return `
        <div class="label">
            ${text}
        </div>
    `;
}

Semicolons

Gebruik altijd puntkomma's.

Variabelen toewijzen

Geef de voorkeur aan const in plaats van let. Gebruik let als je een variabele later wilt overschrijven. Gebruikt geen var om een variabele toe te wijzen.

Variabele namen

Variabele namen moeten over het algemeen niet worden afgekort.

// Goed
function saveUser(user) {
    localStorage.set('user', user);
}

// Fout, omdat in langere functies de betekenis niet meer duidelijk is.
function saveUser(u) {
    localStorage.set('user', u);
}

Vergelijkingen

Gebruik altijd drie vergelijkingstekens om variabelen te vergelijken. Als niet zeker weet wat het variabele type is zet het eerst om met een parser.

// Goed
const one = 1;
const another = "1";

if (one === parseInt(another)) {
    // ...
}

// Fout
const one = 1;
const another = "1";

if (one == another) {
    // ...
}

Objecten en arrays opbreken

Opbreken heeft de voorkeur boven het toewijzen van extra variabelen.

// Goed
const [hours, minutes] = '12:00'.split(':');

// Fout, onnodig uitgebreid en er zijn extra toewijzingen nodig
const time = '12:00'.split(':');
const hours = time[0];
const minutes = time[1];

Vue templates

Een Vue component heeft veel properties en het past al snel niet meer op één regel. Elke regel moet ingesprongen zijn met 4 spaties. De sluit tag komt op de volgende regel.

<template>
    <!-- Goed -->
    <my-component myProp="value"><my-component>
</template>

<template>
    <!-- Goed -->
    <my-component
        v-if="shouldDisplay"
        myProp="value"
        @change="handleEvent"
    ></my-component>
</template>