Skip to content

Coding Style

Elizabeth Craig edited this page Mar 19, 2019 · 7 revisions

Auto formatting

We use Prettier to keep our code style consistent. You do not have to worry about formatting your source code as Prettier will take care of it for you. We ensure the code stays consistent by running Prettier as a pre-commit hook.

If you use VS Code, you can use this plugin to help you run the formatter on save. If you don't use the plugin, we still format the code as part of the pre-commit hook.

Prettier handles elements of formatting including:

  • Single quotes
  • 2 spaces for indentation
  • Semicolons
  • Curly braces around conditionals and loops
  • Open curly braces don't go on a separate line

In addition, we use TSLint rules to enforce certain other formatting guidelines. TSLint is run while building and as a pre-commit hook.

Other guidelines

Some of these guidelines are enforced by TSLint rules, while others are just considered good practice.

JSDoc

Use JSDoc style comments for function, interfaces, enums, and classes. Be sure to include comments that describes the functionality of the function, interface, enum, or class.

Use camelCase when naming objects, functions, and instances.

This applies regardless of whether the function is internal or exported.

Good

const thisIsMyObject = {};
function thisIsMyFunction() {}

For utility files exporting a single function, the filename should be identical to the function's name (casing and all).

Use PascalCase for classes / components / interfaces

Good

class User {
  constructor(options) {
    this.name = options.name;
  }
}

// React component
const MyComponent = props => <div>{props.name}</div>;

interface ISampleInterface {
  name: string;
}

Bad

class user {
  constructor(options) {
    this.name = options.name;
  }
}

// React component
const myComponent = props => <div>{props.name}</div>;

interface sampleInterface {
  name: string;
}

Avoid default exports

We typically don't use default exports in Fabric. If you do want to export something as default, you should also export it as a named entity.

// Good
export function foo() { ... }

// Acceptable
export default foo;
// Bad
export default function foo() {}
Clone this wiki locally
You can’t perform that action at this time.