# 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\""
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://bitforce.gitbook.io/the-anatomy-of-an-angular-app/naming-conventions.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.