GitLab Documentation

Style guides and linting

See the relevant style guides for our guidelines and for information on linting:

JavaScript

We defer to Airbnb on most style-related conventions and enforce them with eslint.

See our current .eslintrc for specific rules and patterns.

Common

ESlint

  // bad
  /* eslint-disable */

  // better
  /* eslint-disable some-rule, some-other-rule */

  // best
  // nothing :)
  // bad
  /* eslint-disable no-new */

  import Foo from 'foo';

  new Foo();

  // better
  import Foo from 'foo';

  // eslint-disable-next-line no-new
  new Foo();
  // bad
  /* global Foo */
  /* eslint-disable no-new */
  import Bar from './bar';

  // good
  /* eslint-disable no-new */
  /* global Foo */

  import Bar from './bar';
  // bad
  /* globals Flash, Cookies, jQuery */

  // good
  /* global Flash */
  /* global Cookies */
  /* global jQuery */
  // bad
  fn(p1, p2, p3, p4) {}

  // good
  fn(options) {}

Modules, Imports, and Exports

  // bad
  require('foo');

  // good
  import Foo from 'foo';

  // bad
  module.exports = Foo;

  // good
  export default Foo;

Unless you are writing a test, always reference other scripts using relative paths instead of ~

In app/assets/javascripts:

  // bad
  import Foo from '~/foo'

  // good
  import Foo from '../foo';

In spec/javascripts:

  // bad
  import Foo from '../../app/assets/javascripts/foo'

  // good
  import Foo from '~/foo';
  // bad
  window.MyClass = class { /* ... */ };

  // good
  export default class MyClass { /* ... */ }
  // bad
  export default class MyClass { /* ... */ }

  document.addEventListener("DOMContentLoaded", function(event) {
    new MyClass();
  }

Data Mutation and Pure functions

  // bad
  const values = {foo: 1};

  function impureFunction(items) {
    const bar = 1;

    items.foo = items.a * bar + 2;

    return items.a;
  }

  const c = impureFunction(values);

  // good
  var values = {foo: 1};

  function pureFunction (foo) {
    var bar = 1;

    foo = foo * bar + 2;

    return foo;
  }

  var c = pureFunction(values.foo);
  const users = [ { name: 'Foo' }, { name: 'Bar' } ];

  // bad
  users.forEach((user, index) => {
    user.id = index;
  });

  // good
  const usersWithId = users.map((user, index) => {
    return Object.assign({}, user, { id: index });
  });

Parse Strings into Numbers

  // bad
  +'10' // 10

  // good
  Number('10') // 10

  // better
  parseInt('10', 10);

CSS classes used for JavaScript

Vue.js

Basic Rules

  export default {
    template: `<h1>I'm a component</h1>
  }

Naming

  // bad
  import cardBoard from 'cardBoard';

  // good
  import CardBoard from 'cardBoard'

  // bad
  components: {
    CardBoard: CardBoard
  };

  // good
  components: {
    cardBoard: CardBoard
  };
  // bad
  <component class="btn">

  // good
  <component css-class="btn">

  // bad
  <component myProp="prop" />

  // good
  <component my-prop="prop" />

Alignment

  // bad
  <component v-if="bar"
      param="baz" />

  <button class="btn">Click me</button>

  // good
  <component
    v-if="bar"
    param="baz"
  />

  <button class="btn">
    Click me
  </button>

  // if props fit in one line then keep it on the same line
  <component bar="bar" />

Quotes

  // bad
  template: `
    <button :class='style'>Button</button>
  `

  // good
  template: `
    <button :class="style">Button</button>
  `

Props

  // bad
  props: ['foo']

  // good
  props: {
    foo: {
      type: String,
      required: false,
      default: 'bar'
    }
  }
  // bad
  props: {
    foo: {
      type: String,
    }
  }

  // good
  props: {
    foo: {
      type: String,
      required: false,
      default: 'bar'
    }
  }
  // bad
  props: {
    foo: {
      type: String,
      required: false,
    }
  }

  // good
  props: {
    foo: {
      type: String,
      required: false,
      default: 'bar'
    }
  }

  // good
  props: {
    foo: {
      type: String,
      required: true
    }
  }

Data

  // bad
  data: {
    foo: 'foo'
  }

  // good
  data() {
    return {
      foo: 'foo'
    };
  }

Directives

  // bad
  <component v-on:click="eventHandler"/>


  // good
  <component @click="eventHandler"/>
  // bad
  <component v-bind:class="btn"/>


  // good
  <component :class="btn"/>

Closing tags

  // bad
  <component></component>

  // good
  <component />

Ordering

SCSS