JavaScript - HealthTeacher/style-guide GitHub Wiki

Much of this was inspired by idiomatic-js. Please add to this guide if you find any particular patterns or styles that we've adopted internally.

Table of Contents

1. General
2. Naming
3. Marionette

General

• We lint all our JavaScript with StandardJS.

Naming

• JavaScript hooks should follow the js-myJsHook pattern.
• Testing hooks should follow the qa-myTestHook pattern.
• Do NOT apply styles to js- or qa- prefixed classes.

Marionette

• Label Views with className exclusively, not id.
• Order view properties/methods as follows:
  1. View properties (alphabetically)
  2. Child view properties (alphabetically)
  3. Marionette methods (by lifecycle of the view)
  4. Custom methods (alphabetically)

React

• Use static propTypes and static defaultProps at the top of React classes. (This does not work in the teacher app currently)

class MyComponent extends React.Component {
  static propTypes = {
    ...
  };
  
  static defaultProps = {
    ...
  };

  render() {
    ...
  }
}