Javascript

Tabs/indentering skal være 4 mellomrom lik reglene for php.

// Dårlig praksis
function greet(name) {
  return `Hello ${name}`;
}

// God praksis
function greet(name) {
    return `Hello ${name}`;
}

Alle funksjonskall etc. skal avsluttes med semikolon ; på samme måte som i php.

// Dårlig praksis
let redirect = function () {
    window.location.href = '/contact-us'
}

redirect()

// God praksis
let redirect = function () {
    window.location.href = '/contact-us';
};

redirect();

Alle steder hvor vi kan ha avsluttene komma , så skal vi ha det.

// Dårlig praksis
let user = {
    firstname: 'John',
    lastname: 'Doe'
};

// God praksis
let user = {
    firstname: 'John',
    lastname: 'Doe',
};

La koden puste!

// Dårlig praksis
if(true){
    // ...
}else{
    // ...
}

// God praksis
if (true) {
    // ...
} else {
    // ...
}

// Dårlig praksis
const two = 1+1;

// God praksis
const two = 1 + 1;

Krøllparanteser skal starte på samme linje.

// Dårlig praksis
if (true)
{

}

// God praksis
if (true) {

}

Funksjoner med navn skal ikke ha mellomrom mellom navn og parantes.

// Dårlig praksis
function save (user) {
    // ...
}

// God praksis
function save(user) {
    // ...
}

Anonyme funksjoner skal ha mellomrom.

// Dårlig praksis
save(user, function(response) {
    // ...
});

// God praksis
save(user, function (response) {
    // ...
});

Alltid bruk enkelt fnutter når mulig.

// Dårlig praksis
const company = "Empatix";
const company = `Empatix`;
import from "./foo";

// God praksis
const company = 'Empatix';
import from './foo';

Aldri skjøte strenger, men bruk interpolering.

// Dårlig praksis
function greet(name) {
    return 'Hello ' + name + '!';
};

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

Aldri bruk forkortelser for variabelnavn.

// Dårlig praksis
function saveUser(u) {
    localStorage.set('user', u);
}

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

Vuejs

I Empatix så benytter vi oss av vuejs når vi utvikler applikasjoner og pakker. God praksis når vi oppretter logikk så skal dette legges i .vue filter selv om en benytter seg av inline-templates eller ikke. Dette er for å kunne ha en konvensjon som alle forstår og benyttes i samtlige prosjekter.

En fullstendig .vue fil skal defineres på følgende måte(Legg merke til rekkefølgen på bruken av de forskjellige delene i vue, mellomrommene mellom de forskjellige seksjonene osv.):

<template>
    <div>
        <icon :path="iconPath"></icon>
        <h1 class="title" v-text="title"></h1>
        <p>{{ description | spam }}</p>
    </div>
</template>

<script>
    import Icon from './Icon.vue';

    export default {
        components: {
            Icon,
        },

        props: ['title'],

        data() {
            return {
                description: null,
            };
        },

        computed: {
            iconPath() {
                return `/icons/${this.title}`;
            },
        },

        filters: {
            spam(string) {
                return string.replace('Microsoft', 'Linux');
            },
        },

        async mounted() {
            await this.fetchDescription();
        },

        methods: {
            async fetchDescription() {
                let response = await axios.get(`/posts/${this.title}`);

                this.description = response.data.description;
            },
        },
    };
</script>

<style>
    .title {
        color: red;
    }
</style>

Veldig ofte når vi benytter vue i html så kan listen over parametere inn til komponentene bli mange. Disse kan da brytes ned på hver sin linje med 4 mellomrom som indentering.

// Dårlig praksis
<my-component v-if="shouldDisplay"
        myProp="value"
        @change="handleEvent">
</my-component>

// God praksis
<my-component myProp="value"></my-component>

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