How to Add ESLint and prettier to an Angular Application

This content originally appeared on DEV Community and was authored by Aditya

Introduction

This guide walks you through configuring ESLint, Prettier, Stylelint, and Husky in an Angular project. These tools help maintain code quality and consistency by automating linting, formatting, and enforcing checks before code is committed.

Prerequisites

• Node.js and npm installed
• An existing Angular project

Configuring ESLint

Add ESLint to your Angular project:

ng add @angular-eslint/schematics

Fix fixable linting issues:

ng lint --fix

Linting SCSS with Stylelint

Install Stylelint and SCSS config:

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

Create a .stylelintrc.json file:

{
  "extends": "stylelint-config-standard-scss",
  "rules": {
    "no-empty-source": null
  }
}

Add SCSS linting to package.json scripts:

"scripts": {
  "lint": "ng lint && npx stylelint '**/*.scss'"
}

Create a .stylelintignore file to exclude specific files or directories (similar to .gitignore).

Configuring Prettier

Install Prettier:

npm install --save-dev prettier

Create a .prettierrc.json file with your formatting preferences:

{
  "tabWidth": 2,
  "useTabs": false,
  "singleQuote": true,
  "semi": true,
  "bracketSpacing": true,
  "arrowParens": "avoid",
  "trailingComma": "es5",
  "bracketSameLine": true,
  "printWidth": 80
}

Create a .prettierignore file to ignore files and directories.

Integrating Prettier with ESLint

Install required dependencies:

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

Update .eslintrc.json to include Prettier config:

{
  "root": true,
  "overrides": [
    {
      "files": ["*.ts"],
      "extends": ["...", "plugin:prettier/recommended"]
    },
    {
      "files": ["*.html"],
      "extends": ["plugin:@angular-eslint/template/recommended"],
      "rules": {}
    },
    {
      "files": ["*.html"],
      "excludedFiles": ["inline-template-.component.html"],
      "extends": ["plugin:prettier/recommended"],
      "rules": {
        "prettier/prettier": ["error", { "parser": "angular" }]
      }
    }
  ]
}

Setting Up Husky for Git Hooks

Install Husky:

npm install --save-dev husky
npx husky-init
npm install

Add a pre-commit hook using lint-staged:

npx husky add .husky/pre-commit "npx lint-staged"

Configure lint-staged in package.json:

"lint-staged": {
  "**/*": "prettier --write --ignore-unknown"
}

If Git is not initialized yet:

git init

Install and configure Husky scripts:

npm pkg set scripts.prepare="husky install"
npx husky install

Enforcing Commit Message Standards with Commitlint

Install Commitlint:

npm install --save-dev @commitlint/config-angular @commitlint/cli

Create a .commitlintrc.json file:

{
  "extends": ["@commitlint/config-angular"]
}

Future Enhancements

Add a pre-push hook to run tests before pushing:

npx husky add .husky/pre-push "npm run test"

This content originally appeared on DEV Community and was authored by Aditya