j1n
j1n

Configure Angular linting

Combination of ESLint, Prettier, Stylelint, Sheriff, Angular and SonarLint logo

In theory, at the latest after my blog post Power of Linting (JS/TS), we realised why linting is essential. What is still missing is the concrete implementation. Have you ever wondered how you can use the linter ESLint, Prettier, Stylelint, Sheriff and Sonarlint optimally in your Angular project? Find out in this guide!

You can find the corresponding code on GitHub.

Requirements

New Angular project

First, we create a new project with the Angular CLI.

ng new <insert project name>

ESLint

Followed directly by ESLint. The following code is executed in the root directory of the project just created.

Caution

Since ESLint version 9.x.x .eslint.json is not longer a supported config format, see New Default config format. But you can easily upgrade the final ESlint config from this article with the Migration Guide.

ng add @angular-eslint/schematics

We now find the ESLint configuration file .eslintrc.json in the root directory.

Prettier u. eslint-plugin-prettier

Adding Prettier and the eslint-plugin-prettier starts with installing the packages via npm.

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

The .eslintrc.json must be extended by "plugin:prettier/recommended". This adapts the ESLint rules to the Prettier rules.

The .eslintrc.json should look like this.

{
  "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": {}
    }
  ]
}

You can see the error messages visually through ESlint, depending on the IDE you may need a plugin (vs-code-eslint-plugin for vs-code) or you can display the errors via terminal with ng lint.

Sheriff

Install sheriff via npm.

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

Extend the eslintrc.json in the extends field with "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

Once again, we execute the commands below in the root directory of the app.

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

The .stylelintrc.json just created must also be edited. Adapt stylelint-config-standard to stylelint-config-standard-scss and add stylelint-prettier/recommended.

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

Stylelint-order

npm install stylelint-order --save-dev

Add stylelint-order to plugins and stylelint-config-clean-order to extends of .stylelintrc.json.

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

For the Stylelint output via terminal.

npx stylelint "**/*.scss"

Caution

Most IDEs require a plugin for the visual feedback, similar to ESLint (vs-code stylelint at vs-code). Make sure that it is set for your type of stylesheet, in this case scss.

If you use Stylelint below version 15, you still have to include stylelint-prettier.

SonarLint

Add the SonarLint plugin to your IDE.

Optional

Add the script "lint:style": "npx stylelint '**/*.scss'" to .package.json and integrate the linters into the pre-commit-hook and the CI/CD of the project.

Next
Creating a Docker Image for a Hugo Website