Linting

Shareable linting and formatting configuration files for Angular and Azure Functions consumer repos.

Files

| File | Purpose | Copy to | | ----------------------------- | --------------------------------------------------- | ------------------- | | eslint.angular.config.mjs | ESLint flat config for Angular (TypeScript + HTML) | eslint.config.mjs | | eslint.functions.config.mjs | ESLint flat config for Azure Functions (TypeScript) | eslint.config.mjs | | .prettierrc.json | Prettier formatting rules | .prettierrc.json | | .prettierignore | Prettier ignore patterns | .prettierignore | | .editorconfig | Editor-agnostic formatting settings | .editorconfig | | .stylelintrc.json | Stylelint config for Angular SCSS projects | .stylelintrc.json |

Quick Setup

Angular App

Copy files to your Angular repo root, then install dependencies:

cp eslint.angular.config.mjs eslint.config.mjs
cp .prettierrc.json .prettierignore .editorconfig .stylelintrc.json .

npm install --save-dev \
  @angular-eslint/eslint-plugin \
  @angular-eslint/eslint-plugin-template \
  @angular-eslint/template-parser \
  @typescript-eslint/eslint-plugin \
  @typescript-eslint/parser \
  eslint \
  eslint-config-prettier \
  eslint-plugin-prettier \
  prettier \
  stylelint \
  stylelint-config-standard-scss \
  stylelint-config-prettier-scss

Add scripts to package.json:

{
  "scripts": {
    "lint": "eslint .",
    "lint:fix": "eslint . --fix",
    "lint:styles": "stylelint '**/*.scss' '**/*.css'",
    "lint:styles:fix": "stylelint '**/*.scss' '**/*.css' --fix",
    "format": "prettier --write .",
    "format:check": "prettier --check ."
  }
}

Azure Functions App

cp eslint.functions.config.mjs eslint.config.mjs
cp .prettierrc.json .prettierignore .editorconfig .

npm install --save-dev \
  @typescript-eslint/eslint-plugin \
  @typescript-eslint/parser \
  eslint \
  eslint-config-prettier \
  eslint-plugin-prettier \
  globals \
  prettier

Add the same scripts block to package.json as above.

ESLint Rule Highlights

Angular config (eslint.angular.config.mjs)

• @angular-eslint rules: component/directive naming, lifecycle hooks, input/output renames, OnPush preference
• @typescript-eslint rules: no floating promises, prefer-readonly, no unused vars
• Template rules: banana-in-box, negated async, accessibility (alt-text, labels, ARIA)
• Prettier integration: enforced as ESLint errors

Azure Functions config (eslint.functions.config.mjs)

• @typescript-eslint rules: require-await, no-misused-promises, await-thenable, no floating promises
• no-process-exit — Azure Functions runtime manages the lifecycle
• no-sync warning — prefer async I/O in function handlers
• Node.js globals pre-configured

Prettier Settings

| Setting | Value | Reason | | --------------------------- | -------- | --------------------------------- | | printWidth | 120 | Matches VS Code ruler setting | | tabWidth | 2 | Consistent with EditorConfig | | singleQuote | true | TypeScript convention | | trailingComma | es5 | Safe for all modern runtimes | | endOfLine | lf | Cross-platform consistency | | htmlWhitespaceSensitivity | ignore | Clean Angular template formatting |

HTML templates have a wider printWidth of 140 to accommodate Angular binding syntax.

Integration with Azure DevOps Pipelines

Add a lint step to your pipeline using the shared install-node.yml template:

steps:
  - template: templates/shared/install-node.yml@infrastructure

  - script: npm run lint
    displayName: 'ESLint'

  - script: npm run format:check
    displayName: 'Prettier check'

Integration with Husky

The husky/pre-commit hook in this repo runs npm run lint:fix and npm run format on staged files via lint-staged. See the husky/ folder for the full pre-commit configuration.

Add this to your package.json when using the Husky hooks:

{
  "lint-staged": {
    "*.{ts,html}": ["eslint --fix", "prettier --write"],
    "*.{scss,css,json,yaml,yml,md}": ["prettier --write"]
  }
}