Setup Angular

1. Add dependencies

To get started, add the following dependencies your devDependencies in the package.json.

package.json

{
  "devDependencies": {
    "eslint": "^9",
    "@eslint/js": "^9",
    "eslint-plugin-unicorn": "^56",
    "@stylistic/eslint-plugin-js": "^2",
    "@stylistic/eslint-plugin-plus": "^2",
    "@stylistic/eslint-plugin-ts": "^2",
    "typescript-eslint": "^8",
    "angular-eslint": "^18",
    "globals": "^15"
  }
}

2. Add ESLint config

ESLint can be configured trough multiple ways. An excerpt from the official documentationen states:

The ESLint configuration file may be named any of the following:
eslint.config.js
eslint.config.mjs
eslint.config.cjs
eslint.config.ts (requires additional setup)
eslint.config.mts (requires additional setup)
eslint.config.cts (requires additional setup)

If you are facing issues while integrating ESLint, consult ESLint docs for help.

Syntax

When enabling our linter rules, make sure to use the correct syntax for the configuration file. We provide an example in ECMAScript JavaScript (.mjs) as it is the de facto standard.

eslint.config.mjs

import {
  TS_RULES_PRESET
} from "@ogs-gmbh/linter";
import globals from "globals";
import stylisticJs from "@stylistic/eslint-plugin-js";
import stylisticPlus from "@stylistic/eslint-plugin-plus";
import { defineConfig } from "eslint/config";
import unicorn from "eslint-plugin-unicorn";
import tseslint from "typescript-eslint";
import angular from "angular-eslint";

export default defineConfig(
  {
    plugins: {
      "@tseslint": tseslint.plugin,
      "@unicorn": unicorn,
      "@stylistic/js": stylisticJs,
      "@stylistic/ts": stylisticTs,
      "@stylistic/plus": stylisticPlus,
      "@angular": angular.tsPlugin,
      "@angular-template": angular.templatePlugin
    }
  },
  {
    files: [
      "**/*.ts",
      "**/*.cts",
      "**/*.mts"
    ],
    processor: angular.processInlineTemplates,
    languageOptions: {
      parser: tseslint.parser,
      globals: { ...globals.browser },
      parserOptions: {
        projectService: true,
        tsconfigRootDir: import.meta.dirname
      }
    },
    rules: getAngularTsPreset({
      selectorPrefix: "app"
    })
  },
  {
    files: [ "**/*.html" ],
    languageOptions: {
      parser: angular.templateParser
    },
    rules: ANGULAR_TEMPLATE_RULES_PRESET
  }
);

3. (Optional) Integrate Lint-Staged

Recommendation

We recommend to integrate Lint-Staged.

It enables faster lint times while ensuring consitency across the project.

To integrate Lint-Staged, follow their guide: Lint-Staged integration

4. (Optional) Integrate Husky

Recommendation

We recommend to integrate Husky.

Enforce consistent code quality by Git hooks, before it can enter your codebase.

To integrate Husky, follow their guide: Husky integration

5. Try it out

Run ESLint against your project, to see results. Either by using the inbuilt LSP of your IDE or by running following command:

npm

$ npx eslint .

pnpm

$ pnpx eslint .

yarn

$ yarn dlx eslint .

bun

$ bunx eslint .