Sign in Subscribe
Angular

Setting Up Prettier and ESLint 9 in Your Angular 19+ Project

Learn how to set up Prettier and ESLint 9 in your Angular 19+ project for clean, consistent code with auto-save for a seamless dev experience.

Tim Dodd

• 5 min read
Setting Up Prettier and ESLint 9 in Your Angular 19+ Project

Maintaining clean and consistent code is essential for any project, especially in a collaborative environment. Prettier and ESLint are popular tools that help enforce code quality and formatting standards. This guide walks you through setting up Prettier and ESLint in your Angular project and configuring auto-save for a seamless developer experience. This method should work in older Angular versions as well.

I put together a test project that does all these steps, you can check it out here:

GitHub - timothydodd/prettier-eslint-angular-example
Contribute to timothydodd/prettier-eslint-angular-example development by creating an account on GitHub.
GitHubtimothydodd

Why Use Prettier and ESLint?

Prettier

Prettier is an opinionated code formatter that enforces consistent code style by automatically formatting your code.

ESLint

ESLint is a static analysis tool that identifies and fixes problems in your JavaScript or TypeScript code. It helps enforce coding conventions and catches potential errors early.

By combining Prettier and ESLint, you can achieve consistent code style while catching potential issues in your Angular project.

I'm using Eslint version 9 in this example.

Step 1: Install Dependencies

Run the following command in your Angular project directory:

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

Installed Packages:

  • eslint: Linter for identifying and fixing problems in JavaScript and TypeScript code.
  • prettier: Opinionated code formatter for consistent code style.
  • angular-eslint: ESLint integration for Angular projects with Angular-specific linting rules.
  • prettier-eslint: Integrates Prettier and ESLint to format code while respecting ESLint rules.
  • typescript-eslint: Adds TypeScript support to ESLint with TypeScript-specific linting rules.
  • eslint-config-prettier : Disables ESLint rules that conflict with Prettier.
  • eslint-plugin-prettier: Runs Prettier as an ESLint rule to highlight formatting issues.

Step 2: Configure ESLint

Delete .eslintrc.json if it exists in your project root. Create a eslint.config.js file to integrate Prettier in your project root folder (same place as the package.json file):

// @ts-check
const prettierPlugin = require('eslint-plugin-prettier');
const typescriptParser = require('@typescript-eslint/parser');
const tsPlugin = require('@typescript-eslint/eslint-plugin');
const angularPlugin = require('@angular-eslint/eslint-plugin');
const angularTemplateParser = require('@angular-eslint/template-parser');
const eslintPluginPrettierRecommended = require('eslint-plugin-prettier/recommended');
module.exports = [
  {
    ignores: ['.cache/', '.git/', '.github/', 'node_modules/'],
  },
  {
    files: ['**/*.ts'],
    languageOptions: {
      parser: typescriptParser,
      parserOptions: {
        project: ['./tsconfig.json', './tsconfig.app.json', './tsconfig.spec.json'],
      },
    },
    plugins: {
      '@typescript-eslint': tsPlugin,
      '@angular-eslint': angularPlugin,
      prettier: prettierPlugin,
    },
    rules: {
      ...tsPlugin.configs.recommended.rules,
      ...angularPlugin.configs.recommended.rules,
      ...prettierPlugin.configs?.rules,
      '@angular-eslint/directive-selector': [
        'warn',
        {
          type: 'attribute',
          prefix: 'app',
          style: 'camelCase',
        },
      ],
      '@angular-eslint/component-selector': [
        'warn',
        {
          type: 'element',
          prefix: 'app',
          style: 'kebab-case',
        },
      ],
      'import/order': 'off',
      '@typescript-eslint/no-explicit-any': ['off'],
      '@typescript-eslint/member-ordering': 0,
      '@typescript-eslint/naming-convention': 0,
      '@angular-eslint/no-host-metadata-property': 'off',
      '@angular-eslint/no-output-on-prefix': 'off',
      '@typescript-eslint/ban-types': 'off',
      '@typescript-eslint/no-inferrable-types': 'off',
    },
  },
  {
    files: ['**/*.html'],
    languageOptions: {
      parser: angularTemplateParser,
    },
    plugins: {
      '@angular-eslint': angularPlugin,
      '@angular-eslint/template': angularPlugin,
      prettier: prettierPlugin,
    },
    rules: {
      'prettier/prettier': ['error', { parser: 'angular' }],
    },
  },
  eslintPluginPrettierRecommended,
];

Key Point:

The eslintPluginPrettierRecommended extension ensures that Prettier rules are applied and formatting issues are reported as ESLint errors.

Step 3: Configure Prettier

Create a .prettierrc file in your project root with the following settings:

{
  "semi": true,
  "trailingComma": "es5",
  "singleQuote": true,
  "printWidth": 120,
  "tabWidth": 2,
  "endOfLine": "auto",
   "bracketSpacing": true,
  "overrides": [
    {
      "files": "*.scss",
      "options": {
        "singleQuote": false
      }
    },  {
      "files": "*.html",
      "options": {
        "printWidth": 120 
      }
    }
  ]
}

These settings control Prettier’s behavior, such as line width and quote style.

Optional: .prettierignore

To exclude specific files or directories, create a .prettierignore file. For example:

build
coverage
e2e
node_modules

Step 4: Install VS Code Extensions

To work seamlessly with Prettier and ESLint in Visual Studio Code, install the following extensions:

  1. ESLint: Provides ESLint integration in VS Code.
  2. Prettier - Code formatter: Enables Prettier formatting in VS Code.

Ensure these extensions are installed and enabled in your workspace.

Step 5: Configure Auto-Format when save in VS Code

To enable auto-format with Prettier and ESLint in Visual Studio Code:

  1. Install Extensions:
  2. Update VS Code Settings:

Open your workspace settings.json and add:

{
    "angular-schematics.schematicsDefaultOptions": {
        "angular-*": {
            "style": "scss"
        }
    },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": "explicit"
    },
    "editor.formatOnSave": false
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  "[typescript]": {

    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.codeActionsOnSave": {
      "source.organizeImports": "explicit",
      "source.fixAll.eslint":"explicit",
      "source.fixAll.tslint": "explicit",
      "source.fixAll.stylelint": "explicit",
    },
    "editor.formatOnSave": true
  },
  "editor.suggest.snippetsPreventQuickSuggestions": false,
  "editor.inlineSuggest.enabled": true
}

Packages

Here are the packages that I'm using.

"dependencies": {
    "@angular/animations": "^19.1.6",
    "@angular/common": "^19.1.6",
    "@angular/compiler": "^19.1.6",
    "@angular/core": "^19.1.6",
    "@angular/forms": "^19.1.6",
    "@angular/platform-browser": "^19.1.6",
    "@angular/platform-browser-dynamic": "^19.1.6",
    "@angular/router": "^19.1.6",
    "rxjs": "~7.8.1",
    "tslib": "^2.8.1",
    "zone.js": "~0.15.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^19.1.7",
    "@angular/cli": "^19.1.7",
    "@angular/compiler-cli": "^19.1.6",
    "@types/jasmine": "~5.1.6",
    "angular-eslint": "19.1.0",
    "eslint": "^9.20.1",
    "eslint-config-prettier": "^10.0.1",
    "eslint-plugin-prettier": "^5.2.3",
    "jasmine-core": "~5.6.0",
    "karma": "~6.4.4",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.1",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "prettier": "^3.5.1",
    "typescript": "^5.7",
    "typescript-eslint": "8.24.0"
  }

How It Works:

  • editor.formatOnSave: Automatically formats files on save.
  • eslint.validate: Ensures ESLint checks for the specified file types.

Step 6: Test it

Your project file layout should look this:

Restart your vscode and make sure your opening the project in the root folder , not a parent folder.

Once the project is open, any file issues should show up in vscode like this:

Saving the file should automatically fix the file.

Conclusion

By integrating Prettier and ESLint into your Angular project, you ensure clean and consistent code while minimizing manual formatting efforts. With auto-save configured in VS Code, your development process becomes even smoother. Happy coding!