> For the complete documentation index, see [llms.txt](https://bitforce.gitbook.io/the-anatomy-of-an-angular-app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bitforce.gitbook.io/the-anatomy-of-an-angular-app/naming-conventions.md).

# Project Structure / Naming conventions / Code style

## Project Structure

We are following the official [Angular style guide](https://angular.io/guide/styleguide) 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](https://prettier.io/), 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](https://www.youtube.com/watch?v=56mETnrByBM) 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\""
```