Frontend Dev Guidelines, tools

Code style - Prettier

Non-default options:

// .prettierrc
{
  "printWidth": 120,
  "singleQuote": true,
  "arrowParens": "always"
}

Note: the Require Prama option might be useful while transitioning

CI

Configure a pre-commit hook

Extra

Check out the Editor Integrations

TypeScript

Using tslint-config-airbnb, tslint-config-prettier

// tslint.json
{
  "defaultSeverity": "error",
  "extends": [
      "tslint:recommended",
      "tslint-config-airbnb",
      "tslint-config-prettier"
  ],
  "jsRules": {},
  "rules": {
    ...
    "ter-arrow-parens": [true, "always"],
    ...
  },
  "rulesDirectory": []
}

Styling & Templates

BEM

We use BEM CSS class naming. In short:

Block: Standalone entity that is meaningful on its own.

Eg. header, container, menu, checkbox, input

Element: A part of a block that has no standalone meaning and is semantically tied to its block.

Eg. menu__item, list__item, checkbox__caption, header__title

Modifier: A flag on a block or element. Use them to change appearance or behavior.

Eg. menu__item--disabled, list__item--highlighted, checkbox--checked, button--primary

Templates

Use angular-bem for BEM classes.

<div class="header">
  <h1 class="header__title">
    Hello, and welcome to <span class="header__title--accented">Bitrise</span>
  </h1>
</div>

SCSS

Linting with stylelint

We use an extended version of stylelint-config-recommended with a list of property orders. See .stylelintrc for the list of rules.

Plugins: stylelint-order

Mixin naming convention:

TODO

package.json scripts

{
  ...
  "scripts": {
    ...
    "lint:style": "stylelint \"./**/*.scss\""
  }
}