Extreme Angular is a pre-configured Angular starter template with strict development tools that enforce best practices, ensure consistent code quality, and promote accessibility. It remains fully compatible with the official Angular documentation.
The underlying Angular project was generated with:
ng new --strict --style=scss --ssr=false
- Skip weeks of setup — ESLint, Prettier, Stylelint, CSpell, Git hooks, and CI work out of the box
- Zero configuration conflicts — all tools are tested to work together seamlessly
- Focus on what matters — discuss logic and architecture instead of arguing about formatting
- Consistent quality — automatic code standards and accessibility checks across your team
- Clean foundation — no custom code or complex workarounds needed
We welcome contributions! Please see our Contributing Guidelines for details on how to get started.
Found an issue? Check the existing issues first, then create a new one if needed.
- Getting Started
- Dev Tools Implemented
- Optional Configuration
- Tips & Tricks
- Updating
- License Considerations
If you have a GitHub account, an easy way to get started is to select "Use this template" in the top right corner of the GitHub page for Extreme Angular and then select "Create a new repository". This will allow you to rename your repository and set it to private.
Alternatively, if you do not have a GitHub account, I recommend cloning only the most recent commit and renaming the remote branch to 'upstream'. (Replace new_project_name with the name of your project):
git clone --depth=1 --origin=upstream https://github.com/joematthews/extreme-angular.git new_project_nameChange to the new project directory and install the dependencies:
cd new_project_name
npm installCustomize your project:
Use CTRL+SHIFT+H in VS Code to search and replace extreme-angular with your chosen project name.
Start developing:
npm startTip
If you're using VS Code and Chrome, then press F5 on the keyboard to start the app in debug mode. For more information check out: TypeScript in Visual Studio Code.
Tip
The "Dev Tools Implemented" section below is project-agnostic -- consider adding it to your project's README.md or CONTRIBUTING.md!
This section outlines how each tool is configured, and how they can be leveraged to ensure clean and maintainable code.
Use this script to run all checks against all project files:
npm run lint:allCaution
These tools are not perfect and they are not a substitute for learning and utilizing the best practices outlined in the Angular guides for Style, Security, Accessibility, and Performance.
Beyond Angular's default strict mode, this template enables additional TypeScript strictness in tsconfig.json to catch more potential issues at compile time:
Enhanced compiler options:
- exactOptionalPropertyTypes — Prevents assigning
undefinedto optional properties, ensuring type safety when properties are explicitly optional vs. potentially undefined - noUnusedLocals — Reports errors for unused local variables, helping keep your code clean and reducing bundle size
- noUnusedParameters — Reports errors for unused function parameters, encouraging cleaner function signatures and better code maintainability
- noUncheckedIndexedAccess — Adds
undefinedto array access and object property access, forcing explicit checks and preventing runtime errors - useUnknownInCatchVariables — Changes catch clause variables from
anytounknown, requiring explicit type checking for better error handling safety
Type checking commands:
npm run lint:tsc:app # Check app files (*.ts)
npm run lint:tsc:spec # Check test files (*.spec.ts)
npm run lint:tsc:all # Check all TypeScript filesESLint is used for linting JavaScript, TypeScript, HTML, and JSON files in the project. The linting configuration is set in eslint.config.js, with specific overrides for the following file types: *.js, *.ts, *.spec.ts, *.html, and *.json.
To ensure effective linting for all project files, the following ESLint plugins are used:
- @angular-eslint
- Uses recommended TypeScript and template rules unless explicitly disabled or modified.
- @angular-eslint rules configuration matrix.
- @angular-eslint/template rules configuration matrix.
- @typescript-eslint
- Uses both strict-type-checked and stylistic-type-checked rule sets.
- typescript-eslint rules configuration matrix.
- eslint-plugin-jasmine
- Uses
recommendedrule set. - eslint-plugin-jasmine rules configuration matrix.
- Uses
- eslint-plugin-jsonc
- Uses
recommendedrule set. - eslint-plugin-jsonc rules configuration matrix.
- Uses
- eslint-config-prettier
- Disables rules that may conflict with Prettier formatting.
To lint all relevant files in the project (not just those in src/):
npm run lintESLint output is formatted using eslint-formatter-mo. To use normal formatting, remove the -f mo option from the lint script in package.json:
"lint": "eslint -f mo \"**/*.{js,ts,html,json}\"",Tip
Suppress the urge to immediately set rules to "off" or "warn". First, look up the rule and the problem it is correcting for and discuss the rule with other developers on the project.
This project enables all the accessibility rules provided by angular-eslint by default (denoted by 
in the @angular-eslint/template rules configuration matrix linked above).
Includes rules for image alt text, form labels, no autofocus, valid ARIA, and more.
These rules are easier to work with if enabled early in the development process and early adoption of these rules is also very helpful for avoiding common accessibility antipatterns.
The Accessibility in Angular guide is a great place to start learning about accessibility in Angular, and it provides resources on the topic of accessibility.
Stylelint is used to lint CSS and SCSS files in the project. It is configured with the stylelint-config-standard and stylelint-config-standard-scss configurations.
Rules for linting are applied separately to .css and .scss files, and they can be customized in .stylelintrc.json.
To lint all CSS and SCSS files:
npm run lint:stylePrettier is used to enforce consistent code formatting, reducing diffs by minimizing formatting changes.
In .prettierrc.json, the htmlWhitespaceSensitivity option is set to ignore to better format templates. This setting trims unnecessary whitespace around and inside HTML elements. Use (non-breaking space) when you need to explicitly maintain spacing between inline elements.
The following Prettier plugins are used:
- prettier-plugin-sh: Formats shell scripts, such as Git hooks.
- prettier-plugin-css-order: Automatically organizes SCSS/CSS properties using concentric-css
- prettier-plugin-organize-imports: Automatically organizes, arranges, and removes unused imports.
To format files within the project:
npm run formatTo check if all files are properly formatted:
npm run lint:formatImportant
Angular v20 dropped the .component suffix from component templates, so an override has been setup in .prettierrc.json to parse ["src/app/*.html"] using the Angular parser. If you add additional Angular applications to the project, make sure to update the overrides array to include their HTML file paths (e.g., 'src/new-app/*.html') so Prettier can properly parse those template files.
CSpell is used for spell checking for all project files.
To add project-specific words, update .cspell.json.
The Code Spell Checker Extension for VS Code allows you to quickly add misspelled words to the configuration by selecting "Add to config: .cspell.json" from the 'Quick Fix' menu.
The following dictionaries have been enabled: bash, companies, cpp, csharp, css, filetypes, fonts, go, html, latex, misc, node, npm, php, powershell, python, softwareTerms, and typescript.
To find misspelled words in all files within the project:
npm run lint:spellingThe following VS Code extensions will be recommended when opening the project (.vscode/extensions.json):
The following VS Code settings have been set in .vscode/settings.json:
- Set Prettier as default formatter.
- Turn on format on save
- Turn on auto-save and set delay for 3 seconds (does not format).
- Disable VS Code linter for CSS/SCSS.
- Enable Stylelint linter CSS & SCSS.
- Switch to workspace version of TypeScript for IntelliSense
Husky is used to manage the pre-commit, pre-push, and commit-msg git hooks.
Commitlint is used to enforce good commit messages according to the @commitlint/config-conventional configuration in the commit-msg git hook. Additional Commitlint configuration is kept in commitlint.config.js.
Lint-staged is used to run Prettier, ESLint, Stylelint, CSpell, and tsc-files in the pre-commit git hook against all staged files. Lint-staged configuration is kept in .lintstagedrc.json
You can bypass the git hooks using git commit --no-verify and git push --no-verify. Or, use the shove script in emergencies when progress needs to be backed up quickly:
npm run shoveThe shove script will stage all files, commit with the commit message wip: shoved, and then push.
Note
The shove script sets git config push.autoSetupRemote true to increase the likelihood that the push will be successful. If you prefer to set the remote branch names manually you may need to set this option back to false.
Warning
The --no-verify flag cannot be disabled. To protect against untested code use a Continuous Integration solution.
The on-pull-request.yml action checks all files and run tests when a branch is pushed that is associated with a GitHub pull request.
Pull requests on GitHub cannot be merged until all checks and tests pass. The output of these workflows can found in the 'Actions' tab on the GitHub repository.
To execute these checks and tests locally:
npm run ci:allAngular has powerful Internationalization capabilities.
If you plan to implement internationalization in the future, adding i18n attributes early on can make the process easier to scale naturally.
To enable the i18n ESLint rule, simply add the following rule to the *.html section of eslint.config.js:
"@angular-eslint/template/i18n": "error",Note
You may also need to configure the @angular-eslint/template/i18n rule according to your project's needs.
Tip
Using eslint --fix can automatically add i18n tags in many cases.
Angular has schematics available for several end to end testing frameworks. The Angular End to End Testing guide will walk you through the steps to set one up.
The eslint-plugin-playwright package has rules for the popular Playwright framework. To incorporate these rules, import the plugin in the eslint.config.js file and then add a new config object that targets e2e/**/*.spec.ts files:
import { playwright } from "eslint-plugin-playwright"; {
files: ['e2e/**/*.spec.ts'],
extends: [...playwright.configs['flat/recommended'], prettierConfig],
rules: { ...playwright.configs['flat/recommended'].rules },
},These are tips and tricks that are too opinionated or situational to include in the repository configuration or are not related to Angular project configuration.
To customize the indentation, set the indent_size property in .editorconfig:
[*]
indent_size = 2To customize the line width, set the printWidth property in .prettierrc.json:
{
"printWidth": 80
}To use double quotes for TS files, set these properties in .editorconfig:
[*.ts]
quote_type = single
ij_typescript_use_double_quotes = falseFinally, run npm run format to re-format all files, and check the result.
Here are some reasons for not changing the indentation, line width, and quote style:
- The Angular documentation and libraries use 2 space indentation and single quotes.
- 2 space indentation is traditional for various reasons.
- 4 space indentation can look pretty bad in JS/TS with an 80 character line limit.
- Changing the line width can make it more difficult to view editors side-by-side.
To automatically set the remote branch name to match the local branch name on push:
git config push.autoSetupRemote true
You can use VS Code to edit commit messages when using commands like git commit, git rebase, and git commit --amend. This will only work if the code command in the PATH. Follow these instructions to set up the VS Code cli on macOS if it is not already set up. Run this command to set it up:
git config core.editor "code --wait"
If you use GitHub, and you'd prefer to not show your email in public commits, set your email to the one found on your GitHub account settings under the 'Email' tab. This is the same email used by GitHub Desktop, and when edits are made directly on the GitHub site.
git config user.email "14097616+joematthews@users.noreply.github.com"
Tip
You can add the --global flag to these commands to make them the default for all new projects.
I highly recommend enabling inlay hints in VS Code. They give me the confidence to use TypeScript's type inference without feeling the need specify types 'for visibility'.
Add the following to the VS Code user settings to enable all inlay hints for JavaScript & TypeScript:
{
"editor.inlayHints.enabled": "onUnlessPressed",
"javascript.inlayHints.functionLikeReturnTypes.enabled": true,
"javascript.inlayHints.parameterNames.enabled": "literals",
"javascript.inlayHints.parameterTypes.enabled": true,
"javascript.inlayHints.propertyDeclarationTypes.enabled": true,
"javascript.inlayHints.variableTypes.enabled": true,
"typescript.inlayHints.enumMemberValues.enabled": true,
"typescript.inlayHints.functionLikeReturnTypes.enabled": true,
"typescript.inlayHints.parameterNames.enabled": "literals",
"typescript.inlayHints.parameterTypes.enabled": true,
"typescript.inlayHints.propertyDeclarationTypes.enabled": true,
"typescript.inlayHints.variableTypes.enabled": true
}To temporarily disable inlay hints use CTRL + ALT (or CTRL + OPTION on Mac) -- Or, to reverse this behavior use:
{
"editor.inlayHints.enabled": "offUnlessPressed"
}VS Code is capable of using 'font ligatures' -- not everyone likes font ligatures, but I really enjoy them.
The two most popular fonts that support font ligatures are Fira Code and Jet Brains Mono. I typically use the 'Regular' *.ttf variant of each font.
After downloading and installing the font of choice, add the font to the fontFamily and enable fontLigatures in the VS Code user settings:
{
"editor.fontFamily": "'Fira Code', Menlo, Monaco, 'Courier New', monospace",
"editor.fontLigatures": true
}The Fira Code repository maintains a list of alternative fonts with ligatures.
- Oh My Zsh: Popular on macOS, where zsh is now default.
- Oh My Bash: Popular on Linux, where bash is usually default.
- Oh My Posh: Cross-platform. Popular on Windows. Works with many shells.
- Starship: Cross-platform. Written in Rust.
These are great frameworks for managing shell configuration. They include helpful functions, plugins, helpers, and themes.
Shell configuration frameworks are a quick way to add git branch & status information to the shell prompt.
Webstorm, Rider & RustRover are now free to use for non-commercial use!
Here are some tips for configuring the dev tools for this project in JetBrains IDEs:
- ESLint, Stylelint, Prettier
- Search for each name in the settings to easily find all relevant configuration.
- Double check all three plugins are installed.
- Set configuration to 'Automatic' for each and match the file extensions that are found in scripts section of package.json.
- (Optional) Set "Run on save" for each plugin if preferred.
- Install the "CSpell Check" plugin to reduce conflicts with JetBrains' built-in spell-checking.
- (Optional) Set keymap to 'VS Code' or 'VS Code (macOS)' for an easier transition
- (Optional) Search for 'ligatures' in the settings to enable font ligatures. JetBrainsMono is capable of displaying ligatures and is installed with the IDE
Warning
Depending on the maturity of the project, it may be better to look at the current configuration files for extreme-angular & release notes and then manually make changes instead of merging. If the Angular version has changed, then follow the guide to update Angular first before attempting to merge or make changes.
To pull in the latest changes, check out an 'update' branch and merging the latest changes from upstream/main:
git checkout main && git pull
git checkout -b update
git merge upstream/mainNote
The name of the remote may not be upstream depending on how this project was cloned.
There may be merge conflicts that need to be resolved. After a successful merge, install dependencies and then format, lint, test, and fix any new errors for all files:
npm install
npm run ci:allThe documentation and configuration files in this project are licensed under the MIT license.
I keep the copyright from Angular's license and add my own copyright.
If your project also uses the MIT license, then please consider adding a new copyright line to LICENSE.txt:
Copyright (c) 2010-2025 Google LLC. https://angular.dev/license
Copyright (c) 2024-2025 Joe Matthews, et al. https://github.com/joematthews/extreme-angular
Copyright (c) 2025 Your Name or CompanyIf your project is closed source or uses a different license, then please consider renaming the file to LICENSE-Angular.txt.