How to configure Prettier in Angular
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Maintaining a consistent code style is essential for any professional Angular project to ensure long-term maintainability and seamless team collaboration. With over 25 years of experience in software development and as the creator of CoreUI, I’ve integrated Prettier into hundreds of enterprise-grade applications. Since 2014, I’ve specialized in Angular, and I’ve found that a robust Prettier configuration is the foundation of a clean, readable codebase. The most efficient way to configure Prettier in Angular is by combining it with ESLint to handle both formatting and code quality in a single, automated workflow.
Install the Prettier package and create a .prettierrc configuration file to define your project’s formatting rules.
Step 1: Install Dependencies
First, you need to install Prettier and the necessary plugins to make it work harmoniously with Angular’s template syntax and ESLint.
npm install --save-dev prettier \
eslint-config-prettier \
eslint-plugin-prettier \
prettier-plugin-organize-attributes
This installs the core Prettier library, eslint-config-prettier (disables ESLint rules that conflict with Prettier), eslint-plugin-prettier (reports formatting issues as lint errors), and prettier-plugin-organize-attributes to keep Angular component attributes (like *ngIf or [property]) consistently ordered — a pattern we follow in our Angular Dashboard Template.
Step 2: Create .prettierrc Configuration
The .prettierrc file is where you define your coding standards. Place it in the root directory of your Angular project.
{
"singleQuote": true,
"semi": true,
"useTabs": false,
"tabWidth": 2,
"printWidth": 100,
"trailingComma": "all",
"bracketSpacing": true,
"arrowParens": "avoid",
"endOfLine": "auto",
"overrides": [
{
"files": "*.html",
"options": {
"parser": "angular"
}
},
{
"files": "*.component.html",
"options": {
"printWidth": 120
}
}
]
}
This configuration enforces single quotes and requires semicolons, matching CoreUI’s coding standards. We also define a specific parser for HTML files to ensure that Angular templates are handled correctly. Increasing the printWidth for component templates prevents excessive line breaks in complex UI structures.
Step 3: Create .prettierignore
Just like .gitignore, the .prettierignore file tells Prettier which files or directories to skip during the formatting process.
# Artifacts
dist/
node_modules/
package-lock.json
# IDEs and Tools
.vscode/
.idea/
.angular/
# Coverage
coverage/
# Manifests
manifest.webmanifest
# Assets
src/assets/
By ignoring the dist and node_modules folders, you prevent Prettier from wasting resources on generated code or third-party libraries. It is also wise to ignore the assets folder if it contains large static files or minified assets that do not require formatting.
Step 4: Integrate with ESLint
To avoid conflicts between your linter and formatter, you must update your .eslintrc.json file. This ensures that ESLint delegates formatting responsibilities to Prettier.
{
"overrides": [
{
"files": ["*.ts"],
"extends": [
"plugin:@angular-eslint/recommended",
"plugin:@angular-eslint/template/process-inline-templates",
"plugin:prettier/recommended"
],
"rules": {
"prettier/prettier": [
"error",
{
"endOfLine": "auto"
}
]
}
},
{
"files": ["*.html"],
"extends": ["plugin:@angular-eslint/template/recommended", "plugin:prettier/recommended"],
"rules": {}
}
]
}
Adding plugin:prettier/recommended as the last item in the extends array is crucial. It enables the Prettier plugin for ESLint and ensures that formatting issues are reported as linting errors, so every new component is instantly checked against your formatting rules.
Step 5: Configure VS Code Settings
For the best developer experience, configure Visual Studio Code to format your files automatically every time you save.
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "always"
},
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
}
This .vscode/settings.json configuration ensures that the Prettier extension is the primary formatter. Enabling formatOnSave removes the manual burden of fixing indentation or quotes, allowing you to focus entirely on the logic of your Angular application.
Step 6: Add npm Scripts
Adding scripts to your package.json allows you to run Prettier across the entire project, which is particularly useful in CI/CD pipelines.
{
"scripts": {
"format:check": "prettier --check \"src/**/*.{ts,html,scss,json}\"",
"format:fix": "prettier --write \"src/**/*.{ts,html,scss,json}\""
}
}
The format:check command is ideal for pull request validation to ensure no unformatted code enters the main branch. The format:fix command provides a quick way to clean up the entire src directory before a release.
Step 7: Pre-commit Hooks with Husky
To guarantee that only formatted code is committed to your repository, you can use Husky and lint-staged.
# Install Husky (v9) and lint-staged
npm install --save-dev husky lint-staged
npx husky init
# Update the pre-commit hook to run lint-staged
echo 'npx lint-staged' > .husky/pre-commit
Then, add a lint-staged configuration to your package.json:
{
"lint-staged": {
"src/**/*.{ts,html,scss,json}": [
"prettier --write"
]
}
}
This setup runs Prettier only on the files staged for commit. It prevents “formatting fix” commits and keeps your Git history clean and professional. See how to set up Husky with Angular for a deeper walkthrough of the full hook configuration.
Best Practice Note:
Always place the Prettier plugin last in your ESLint configuration. This ensures that Prettier has the final word on formatting, preventing “infinite loops” where the linter and formatter fight over things like double vs. single quotes. In our CoreUI projects, we use this exact hierarchy to maintain consistency across dozens of contributors. If you are building a complex dashboard, using a pre-configured Free Angular Admin Template can save you hours of setup time.
