Skip to content

General Style Guide

Contents:

General Conventions

Favor Very Explicit Variable Names

In general, variables should be self-explanatory.

// Favor this:
const netTotal = 0.0;

// Over these:
const tot = 0.0;
const val = 0.0;
const x = 0.0;

Also avoid using variables such as val, counter, x unless: a) the meaning can be easily derived from the context, or b) the meaning is not actually used / important in the context.

// Example for (a):
arrayOfValues.foreach((val) => {
  sumOfValues += val;
});

// Example for (b):
someApiCallObservable.subscribe((x) => {
  alert("The operation is complete");
});

Favor Line Lengths Less Then 80 Characters

As a rule of thumb, lines of code / comments should be < 80 characters in width. However, there are certainly circumstances in which this isn't practicable.

Avoid Hard-Coded Pixel Values

Specific / hard-coded pixel values should generally be avoided. In cases where they are practical, however, values should be defined in a central configuration file. This improves the odds those values can be re-used elsewhere in the app, or at least standardized to some degree.

E.g. values such as the min-width of a mat-dialog can be standardized into small, medium, and large values that live in a central config:

// Do this...
this._dialog.open(SomeComponent, {
  minWidth: this._config.dialogMinWidthMedium,
});

// Instead of...
this._dialog.open(SomeComponent, {
  minWidth: "600px",
});

Favor Formatted Strings / Template Strings

Favor formatted strings / template strings rather than concatenating strings using the + symbol. It is by far easier to read and understand at a glance.

In TS:

const foo = `${bar} - ${baz}`;

In C#:

var foo = $"{bar} - {baz}";

Conditional Logic

Favor Separate Variables in Conditional Logic

// Favor this:
const isTrue = x === y;

if (isTrue) {
  // ...
}

// Over this:
if (x === y) {
  // ...
}