Mattermost Style Guide

  1. Go
  2. Javascript
  3. React-JSX

Go

All go code must follow the golang official Style Guide

In addition all code must be run though the official go formatter tool gofmt

Javascript

Part of the build process is running ESLint. ESLint is the final authority on all style issues. PRs will not be accepted unless there are no errors running ESLint. The ESLint configuration file can be found in: web/react/.eslintrc

Instructions on how to use ESLint with your favourite editor can be found here: http://eslint.org/docs/user-guide/integrations

You can run eslint using the makefile by using make check

The following is a subset of what ESLint checks for. ESLint is always the authority.

Whitespace

// Correct
function myFunction(parm1, parm2) {
    stuff...;

    morestuff;
}

// Incorrect
function myFunction ( parm1, parm2 ){
  stuff...;


  morestuff;
}

Semicolons

// Correct
let x = 1;

// Incorrect
let x = 1

Variables

// Correct
let myVariable = 4;

// OK
var myVariable = 4;

// Incorrect
myVariable = 4;
var my_variable = 4;

Blocks

// Correct
if (something) {
    stuff...;
} else if (otherthing) {
    stuff...;
}

// Incorrect
if (something)
{
    stuff...;
}
else
{
    stuff...;
}

// Incorrect
if (something) stuff...;
if (something)
    stuff...;

Strings

// Correct
function getStr(stuff) {
    return "This is the ${stuff} string";
}

// Incorrect
function wrongGetStr(stuff) {
    return "This is the " + stuff + " string";
}

React-JSX

Part of the build process is running ESLint. ESLint is the final authority on all style issues. PRs will not be accepted unless there are no errors running ESLint. The ESLint configuration file can be found in: web/react/.eslintrc

Instructions on how to use ESLint with your favourite editor can be found here: http://eslint.org/docs/user-guide/integrations

You can run eslint using the makefile by using make check

The following is a subset of what ESLint checks for. ESLint is always the authority.

General

Alignment

// Correct
<Tag
    propertyOne="1"
    propertyTwo="2"
>
  <Child />
</Tag>

// Correct
<Tag propertyOne="1" />

Naming

// Correct
<ReactComponent propertyOne="value" />