j1n
j1n

Angular-Linting konfigurieren

Kombination aus ESLint-, Prettier-, Sheriff, Stylelint, Angular und SonarLint-logo

In der Theorie ist uns spätestens nach meinem Blog-Beitrag Die Macht des Linting (JS/TS) klar, warum Linting unerlässlich ist. Was noch fehlt, ist die konkrete Umsetzung. Hast du dich schon gefragt, wie du die Linter ESLint, Prettier, Stylelint, Sheriff und Sonarlint optimal in deinem Angular-Projekt einsetzen kannst? In diesem Guide erfährst du es!

Den dazugehörigen Code findest du auf GitHub.

Vorraussetzungen

Neues Angularprojekt

Als erstes erstellen wir, mit der Angular CLI, ein neues Projekt.

ng new <insert project name>

ESLint

Folgender Code wird im Root-Verzeichnis, des gerade erstellten Projektes, ausgeführt.

Achtung

Seit ESLint version 9.x.x ist .eslint.json nicht mehr das standard Configformat (New Default config format). Das Updaten ist mit der finalen ESLint-Config, aus diesem Artikel und dem Migration Guide schnell möglich.

ng add @angular-eslint/schematics

Im Root-Verzeichnis finden wir nun die ESLint-Konfigurationsdatei .eslintrc.json.

Prettier u. eslint-plugin-prettier

Das Hinzufügen von Prettier und dem eslint-plugin-prettier beginnt mit dem Installieren der packages über npm.

npm install --save-dev eslint-plugin-prettier eslint-config-prettier
npm install --save-dev --save-exact prettier

Die .eslintrc.json muss um "plugin:prettier/recommended" erweitert werden. Dadurch werden die ESLint-Regeln an die Prettier-Regeln angepasst.

Die .eslintrc.json sollte wie folgt aussehen.

{
  "root": true,
  "ignorePatterns": [
    "projects/**/*"
  ],
  "overrides": [
    {
      "files": [
        "*.ts"
      ],
      "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended",
        "plugin:@angular-eslint/recommended",
        "plugin:@angular-eslint/template/process-inline-templates",
        "plugin:prettier/recommended"
      ],
      "rules": {
        "@angular-eslint/directive-selector": [
          "error",
          {
            "type": "attribute",
            "prefix": "app",
            "style": "camelCase"
          }
        ],
        "@angular-eslint/component-selector": [
          "error",
          {
            "type": "element",
            "prefix": "app",
            "style": "kebab-case"
          }
        ]
      }
    },
    {
      "files": [
        "*.html"
      ],
      "extends": [
        "plugin:@angular-eslint/template/recommended",
        "plugin:@angular-eslint/template/accessibility"
      ],
      "rules": {}
    }
  ]
}

Du siehst die Fehlermeldungen visuell durch ESlint, je nach IDE brauchst du ggf. ein Plugin (vs-code-eslint-plugin für vs-code) oder du gibst dir die Fehler per terminal mit ng lint aus.

Sheriff

Installiere Sheriff via npm.

npm install @softarc/sheriff-core @softarc/eslint-plugin-sheriff --save-dev

Erweitere die eslintrc.json im Feld extends um "plugin:@softarc/sheriff/default".

{
  "root": true,
  "ignorePatterns": [
    "projects/**/*"
  ],
  "overrides": [
    {
      "files": [
        "*.ts"
      ],
      "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended",
        "plugin:@angular-eslint/recommended",
        "plugin:@angular-eslint/template/process-inline-templates",
        "plugin:prettier/recommended",
        "plugin:@softarc/sheriff/default"
      ],
      "rules": {
        "@angular-eslint/directive-selector": [
          "error",
          {
            "type": "attribute",
            "prefix": "app",
            "style": "camelCase"
          }
        ],
        "@angular-eslint/component-selector": [
          "error",
          {
            "type": "element",
            "prefix": "app",
            "style": "kebab-case"
          }
        ]
      }
    },
    {
      "files": [
        "*.html"
      ],
      "extends": [
        "plugin:@angular-eslint/template/recommended",
        "plugin:@angular-eslint/template/accessibility"
      ],
      "rules": {}
    }
  ]
}

Styelint

Erneut führen wir die unten stehenden Befehle im Root-Verzeichnis der App aus.

 npm init stylelint --save-dev
 npm install stylelint-config-standard-scss --save-dev
 npm install stylelint-prettier --save-dev

Die gerade erstellte .stylelintrc.json muss ebenfalls bearbeitet werden. Passe stylelint-config-standard zu stylelint-config-standard-scss an und füge stylelint-prettier/recommended hinzu.

{
  "extends": [
    "stylelint-config-standard-scss",
    "stylelint-prettier/recommended",
  ]
}

Stylelint-order

npm install stylelint-order --save-dev

Füge stylelint-order unter plugins und stylelint-config-clean-order unter extends der .stylelintrc.json hinzu.

{
  "plugins": [
		"stylelint-order"
	],
  "extends": [
    "stylelint-config-standard",
    "stylelint-prettier/recommended",
    "stylelint-config-clean-order/error"
  ]
}

Für die Stylelintausgabe per terminal kann das untensteheden Kommando.

npx stylelint "**/*.scss"

Achtung

Die meisten IDEs benötigen für das visuelle Feedback, ähnlich wie bei ESLint, ein Plugin (vs-code stylelint bei vs-code). Achte darauf, dass es für deinen Typ von Stylesheets einzustellen ist (in diesem Fall scss).

Wenn du Stylelint unterhalb von Version 15 nutzt, musst du noch stylelint-prettier einbinden.

SonarLint

Füge deiner IDE das SonarLint-Plugin hinzu.

Optional

Füge der .package.json das Script "lint:style": "npx stylelint '**/*.scss'" hinzu und integriere die Linter in die pre-commit-hook und die CI/CD des Projekts.

Danach
Dockerimage für eine Hugo Webseite erstellen