Project Structure / Naming conventions / Code style

Project Structure

We are following the official Angular style guide which cover the best practice about how to organise folders / modules / services / shared components etc...

Naming conventions

We are following the official Angular style guide which cover naming conventions. You must read that entirely :)

Exceptions: We want to prefix the interfaces with a capital I eg: ISorting

Misc

Prefer explicit names instead short names, a dev should understand what that variable or method do without asking or wondering.

Good: sendEmailToShareApp() Bad: sendEmail()

Boolean flag A bool flag is presented with the prefix is

Good: isSelected, isValid, isEnabled Bad: selected, valid, enabled

Class props declaration order

1. Input()

2. Output()

3. private vars

4. public vars

5. getters / setters

Code Formatting and checking

Javascript formatting

For code formatting we'll use prettier, please configure your IDE to run prettier on file save.

We are using this small config file: prettierrc.json, all the rest is handled by prettier, no more time waste in code formatting

{
  "printWidth": 100,
  "singleQuote": true,
  "trailingComma": "es5"
}

We could have to ignore some files and folders the mandatory are the following. Add this file `.prettierignore` in the root of the project

src/assets/
package.json

Javascript formatting Code checking

For code checking we are using tslint (already configured by the Angular CLI). In your IDE you have to enable tslint check to show you tslint errors

CSS

here we are leveraging the VS Code css formatting, we have this project settings setup to be consistent in every Editor. This file is stored in .vscode/settings.json

{
  "editor.formatOnPaste": true,
  "prettier.singleQuote": true,
  "prettier.trailingComma": "none",
  "editor.formatOnSave": true,
  "editor.rulers": [100],
  "html.format.wrapAttributes": "force",
  "html.format.enable": true,
  "html.format.wrapLineLength": 100
}

Tips: check out this cool video about why is important to write clean code!

Automation

Automation is so important! We want to run prettier and tslint when a dev do a commit, so we can be 100% sure that our codebase il properly styled and without "static errors"

we are using Husky to do that: and the precommit hook is this one (we should run tslint-fix on staged files too)

"tslint-fix": "tslint --fix -c ./tslint.json 'src/**/*.ts'",
"precommit": "pretty-quick --staged && npm run tslint-fix"

we have also a script to run prettier in the whole codebase (just in case)

"prettier": "prettier --write \"src/**/*.ts\""