3. Coding convention

We try to follow certain guidelines while developing code in in each of our project. The idea is to make it feel like it is the same person who wrote the code.

General

Indentation and great variable and function naming are a must.

• Use tabs as indentation. Avoid placing spaces has it creates lots of inconsistencies under different IDEs. There is no better approach (tab or space), it is just an initial approach.
• Make sure your IDE is configured to use the .editorconfig file at the root of each project. This file enforce code standardization.

HTML

IDs are in camel case and attributes classes are separated by hyphens.

<div id="containerOne" class="container-main" v-ripple>
  Hello
</div>

Comment grouping

Working on large components might require a lot of HTML code and sub-sections. To improve code readability, organize your code and comment groups in UPPERCASE of elements in order to quickly distinguish them from the rest.

<div>

    <!-- COMMENTS -->
    <div class="pa-4" style="flex: 1">
      .. HTML comments content
    </div>

    <!-- FORM -->
    <div class="pa-4" style="flex: 0">
      .. HTML form content
    </div>
</div>

CSS (SCSS)

If you think you need to write CSS, thing again. Vuetify is used in our front-end projects in order to handle most of our UI. Make sure to look-up the documentation to make sure the component, the styling or the visual behaviour you are looking for is not already provided and handled by the library.

Spacing, margining, centering, aligning, etc. This should all be handled by Vuetify's styling classes. Only write CSS if you need to override, fix issues or create specific components that aren't part of Vuetify yet.

JavaScript

Variables

Variables are in camel case. Strings in single-quote. If your variable isn't updated further in your process, declare it as a const otherwise a let. Try to never use var unless it is necessary.

const firstName = 'Danny';
const lastName = 'Coulombe';
let age = Math.random() * 100;
if (age > 50) {
  age = 50; // Never older than 50..
}

Functions

Prioritize arrow functions over standard function. The idea is to NOT create a new context unless necessary.

const callback = (val1, val2) => {
  const result = val1 + val2;
  return result;
};
callback(2, 3);

If your function only contains one line of code, make it a one-liner:

const callback = (param) => console.log(param);
callback(123);

Events

While working with templates, you'll have to bind functions to certain HTML component. Always wrap the event logic within a handle[ActionName] function. It might feel like some superficial wrapping over your straight forward function, but it facilitates code reutilization by separating specific event logic and function.

<div @click="handleBoingClick">Boing!</div>

handleBoingClick(event) {
  event.stopPropagation();
  this.doBoing();
  this.googleAnalytics('a user manually clicked on the button');
}

doBoing() {
  alert('boing');
}

This practice allows us to better organize code and create functions that does ONLY what they were intended to do. If we would have binded doBoing directly on the @click event, we would have being obligated to refactor or add conditioning validation within the function if we would have being required to use this function from an external event other than the one applied on the div element.