|
| 1 | +# Code Style Guidelines |
| 2 | + |
| 3 | +This document outlines the code style guidelines for the EczEase project. |
| 4 | + |
| 5 | +## TypeScript/JavaScript Style Guide |
| 6 | + |
| 7 | +### Quotes |
| 8 | + |
| 9 | +- **Single quotes** (`'`) are used for string literals |
| 10 | +- Double quotes (`"`) should only be used when necessary to avoid escaping (e.g., `'I\'m a string'` vs `"I'm a string"`) |
| 11 | +- **Template literals** (backticks `` ` ``) are preserved and should be used for: |
| 12 | + - Multi-line strings |
| 13 | + - String interpolation with expressions: `` `Hello ${name}` `` |
| 14 | + - HTML templates or complex text formatting |
| 15 | + |
| 16 | +### Semicolons |
| 17 | + |
| 18 | +- **No semicolons** at the end of statements |
| 19 | +- Relying on JavaScript's Automatic Semicolon Insertion (ASI) |
| 20 | +- Be careful with: |
| 21 | + - Lines starting with `(`, `[`, or `/` - consider prefixing with a semicolon if needed |
| 22 | + - Immediately Invoked Function Expressions (IIFEs) |
| 23 | + |
| 24 | +## Angular-Specific Guidelines |
| 25 | + |
| 26 | +### Dependency Injection |
| 27 | + |
| 28 | +- Always use the `inject()` function instead of constructor injection |
| 29 | +- Declare dependencies as `private readonly` class properties: |
| 30 | + |
| 31 | +```typescript |
| 32 | +export class ExampleComponent { |
| 33 | + private readonly http = inject(HttpClient); |
| 34 | + private readonly userService = inject(UserService); |
| 35 | + |
| 36 | + // Rest of the component... |
| 37 | +} |
| 38 | +``` |
| 39 | + |
| 40 | +### Signals and State Management |
| 41 | + |
| 42 | +- Use Angular's signals for reactive state management |
| 43 | +- Declare read-only signals with `signal<T>()` and models with `model<T>()` |
| 44 | +- Access signal values directly with parentheses: `this.mySignal()` |
| 45 | + |
| 46 | +## Running Linting |
| 47 | + |
| 48 | +To check for code style issues or fix them automatically: |
| 49 | + |
| 50 | +```bash |
| 51 | +# Check for linting issues |
| 52 | +npx nx lint webapp |
| 53 | + |
| 54 | +# Fix linting issues automatically |
| 55 | +npx nx lint webapp --fix |
| 56 | +``` |
| 57 | + |
| 58 | +### Automatic Linting with Git Hooks |
| 59 | + |
| 60 | +This project uses Git hooks to automatically run linting before each commit: |
| 61 | + |
| 62 | +1. When you commit changes, a pre-commit hook will run |
| 63 | +2. The hook will run `eslint --fix` on all staged files with .ts, .js, and .html extensions |
| 64 | +3. If linting fails or cannot automatically fix issues, the commit will be blocked |
| 65 | +4. Fix the issues manually and try committing again |
| 66 | + |
| 67 | +To temporarily bypass the pre-commit hook (not recommended), use: |
| 68 | + |
| 69 | +```bash |
| 70 | +git commit -m "Your message" --no-verify |
| 71 | +``` |
| 72 | + |
| 73 | +## Best Practices |
| 74 | + |
| 75 | +1. **Always check linting before committing code** |
| 76 | +2. **Configure your editor to format on save** to avoid manual style fixes |
| 77 | +3. **Don't disable style rules** without team discussion |
0 commit comments