DEV Community

Cover image for How to Add ESLint and prettier to an Angular Application
Aditya
Aditya Subscriber

Posted on

How to Add ESLint and prettier to an Angular Application

#angular #eslint #prettier #howto

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.

linting

Prerequisites

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

Configuring ESLint

Add ESLint to your Angular project:

ng add @angular-eslint/schematics
Enter fullscreen mode Exit fullscreen mode

Fix fixable linting issues:

ng lint --fix
Enter fullscreen mode Exit fullscreen mode

Linting SCSS with Stylelint

Install Stylelint and SCSS config:

npm install --save-dev stylelint stylelint-config-standard-scss
Enter fullscreen mode Exit fullscreen mode

Create a .stylelintrc.json file:

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

Add SCSS linting to package.json scripts:

"scripts": {
  "lint": "ng lint && npx stylelint '**/*.scss'"
}
Enter fullscreen mode Exit fullscreen mode

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

Configuring Prettier

Install Prettier:

npm install --save-dev prettier
Enter fullscreen mode Exit fullscreen mode

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
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Update .eslintrc.json to include Prettier config:

update

{
  "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" }]
      }
    }
  ]
}
Enter fullscreen mode Exit fullscreen mode

Setting Up Husky for Git Hooks

Install Husky:

npm install --save-dev husky
npx husky-init
npm install
Enter fullscreen mode Exit fullscreen mode

Add a pre-commit hook using lint-staged:

npx husky add .husky/pre-commit "npx lint-staged"
Enter fullscreen mode Exit fullscreen mode

Configure lint-staged in package.json:

"lint-staged": {
  "**/*": "prettier --write --ignore-unknown"
}
Enter fullscreen mode Exit fullscreen mode

If Git is not initialized yet:

git init
Enter fullscreen mode Exit fullscreen mode

Install and configure Husky scripts:

npm pkg set scripts.prepare="husky install"
npx husky install
Enter fullscreen mode Exit fullscreen mode

Enforcing Commit Message Standards with Commitlint

Install Commitlint:

npm install --save-dev @commitlint/config-angular @commitlint/cli
Enter fullscreen mode Exit fullscreen mode

Create a .commitlintrc.json file:

{
  "extends": ["@commitlint/config-angular"]
}
Enter fullscreen mode Exit fullscreen mode

Future Enhancements

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

npx husky add .husky/pre-push "npm run test"
Enter fullscreen mode Exit fullscreen mode

thank you

Top comments (0)