code-style.md

Code Style

• Code Style
  • Angular Style Guide
  • Visual Studio Code
    • Needed extensions
    • Minimal configuration settings
  • Prettier auto formatter
  • Lint rules
  • Other recommended rules
  • Links

Angular Style Guide

All Angular code must follow the styles dictated by the official Angular Style Guide.
As long as you use Angular CLI and don't skip the git hooks, we shouldn't need to worry about missing something.

Visual Studio Code

Needed extensions

• Angular Language Service (angular.ng-template): rich editing experience for Angular templates, both inline and external templates.
• Nx Console (nrwl.angular-console): UI for Nx commands in an easy way.
• Prettier - Code formatter (esbenp.prettier-vscode): VSCode plugin for prettier.
• Jest Runner (firsttris.vscode-jest-runner): A simple way to run or debug tests.
• ESLint (dbaeumer.vscode-eslint): integrates ESLint JavaScript into VS Code.
• markdownlint (davidanson.vscode-markdownlint): markdown linting and style checking for Visual Studio Code.
• axe Accessibility Linter (deque-systems.vscode-axe-linter)

These extensions will appear in your extension VSCODE manager, under "recommended". For a real view of recommended extensions, please take a look at it.

Minimal configuration settings

Under .vscode/settings.json there are some configurations needed for this project repository.

Prettier auto formatter

We use prettier for automatic code formatting on save. The minimal configuration lives in .prettierrc and .prettierignore project root files.

Lint rules

These are the manually added rules to the .eslintrc.json base file:

• eslint-plugin-ngrx: with its default configuration to automatically lint all code while running nx lint.

  

• no-console: warns about any console related methods in the code.
• @typescript-eslint/prefer-readonly: require private members to be marked as readonly if they're never modified outside of the constructor.
• eslint-plugin-jsdoc:
  • adds the recommended linting rules for JSDoc.
  • adds a regex match for description text in order to begin it in Uppercase and always end with a ".".
• @angular-eslint/schematics: enables ESLint to lint Angular projects. Added accessibility related rules. For more information visit accessibility.md.

Other recommended rules

• Do not use enums. Use instead union types. Enums increment bundle size.

  // instead of this 🛑
  export enum NotificationType {
    Error = 'ERROR',
    Warning = 'WARNING',
    Info = 'INFO',
    Success = 'SUCCESS',
  }
  // use this 💚
  export type NotificationType = 'ERROR' | 'WARNING' | 'INFO' | 'SUCCESS';

Links

• Angular Style Guide
• Angular lint
• prettier
• ESLint