{"id":24480351,"url":"https://github.com/joematthews/extreme-angular","last_synced_at":"2025-04-06T07:14:57.756Z","repository":{"id":219651913,"uuid":"748870265","full_name":"joematthews/extreme-angular","owner":"joematthews","description":"Extreme Angular is a strict \u0026 opinionated starter template with pre-configured dev tools that enforce best practices for creating clean, maintainable, and accessible web apps.","archived":false,"fork":false,"pushed_at":"2025-03-24T15:29:56.000Z","size":1020,"stargazers_count":103,"open_issues_count":3,"forks_count":7,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-30T06:08:42.921Z","etag":null,"topics":["a11y-testing","accessibility-testing","angular","best-practices","commitlint","cspell-dicts","developer-tools","eslint-config","extreme-angular","husky","lint-staged","linter","opinionated","prettier-config","prettier-eslint","starter-template","strict","stylelint-config","typescipt","typescript-boilerplate"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/joematthews.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-01-26T23:10:35.000Z","updated_at":"2025-03-24T15:27:07.000Z","dependencies_parsed_at":"2024-01-30T11:30:14.667Z","dependency_job_id":"1557034d-2222-4eb8-a8b4-71015b7ac806","html_url":"https://github.com/joematthews/extreme-angular","commit_stats":null,"previous_names":["joematthews/opinionated-angular","joematthews/extreme-angular"],"tags_count":33,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joematthews%2Fextreme-angular","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joematthews%2Fextreme-angular/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joematthews%2Fextreme-angular/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joematthews%2Fextreme-angular/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/joematthews","download_url":"https://codeload.github.com/joematthews/extreme-angular/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247445681,"owners_count":20939961,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["a11y-testing","accessibility-testing","angular","best-practices","commitlint","cspell-dicts","developer-tools","eslint-config","extreme-angular","husky","lint-staged","linter","opinionated","prettier-config","prettier-eslint","starter-template","strict","stylelint-config","typescipt","typescript-boilerplate"],"created_at":"2025-01-21T11:01:29.836Z","updated_at":"2025-04-06T07:14:57.731Z","avatar_url":"https://github.com/joematthews.png","language":"HTML","readme":"# Extreme Angular 19: A Stricter Starter Template\n\n![Meme showing Iron Man wearing the Nano Gauntlet before saving Earth. The caption reads, 'WHEN YOU FINALLY GET ALL THE DEV TOOLS TO WORK TOGETHER'](https://github.com/user-attachments/assets/b7e3a75f-a082-465b-a9cd-7557732b0589)\n\nExtreme Angular is pre-configured with a strict and opinionated set of development tools that enforce best practices, ensure consistent code quality, and promote accessibility while remaining fully compatible with the [official Angular documentation](https://angular.dev/overview).\n\nHowever, Extreme Angular is not a fully-featured dashboard or a component library. It contains no custom application logic, components, or complex modifications. Instead, it offers a clean, strict base for your Angular project. The underlining Angular project was generated with:\n\n```\nng new --strict --style=scss --ssr=false\n```\n\nFor additional utility like Angular Material, Server-side \u0026 hybrid rendering (SSR, SSG, Hydration), Internationalization (i18n), or End to End testing (e2e) check out the [Optional Angular Schematics](#optional-angular-schematics) section.\n\n## Contributions, Issues, \u0026 Suggestions\n\nIf you have a suggestion or run into any issues then first search through the [issues](https://github.com/joematthews/extreme-angular/issues), and then create a new one if necessary! :mega:\n\nTo contribute, [fork the repository](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/fork-a-repo), check out a new branch, make your changes, and then [submit a pull request](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/about-pull-requests). :octopus:\n\nThank you for your contributions!\n\n## Table of Contents\n\n- [Getting Started](#getting-started)\n  - [License Considerations](#license-considerations)\n- [Dev Tools Implemented](#dev-tools-implemented)\n  - [TypeScript](#typescript)\n  - [ESLint](#eslint)\n    - [Accessibility (a11y)](#accessibility-a11y) :accessibility:\n  - [Stylelint](#stylelint)\n  - [Prettier](#prettier)\n  - [CSpell](#cspell)\n  - [VSCode](#vscode)\n  - [Husky, Commitlint, tsc-files, and Lint-Staged (Git hooks)](#husky-commitlint-tsc-files-and-lint-staged-git-hooks)\n  - [Shove Progress](#shove-progress)\n  - [Continuous Integration (CI) Using GitHub Actions](#continuous-integration-ci-using-github-actions)\n- [Optional Angular Schematics](#optional-angular-schematics)\n  - [Angular Material \u0026 Angular CDK](#angular-material--angular-cdk)\n  - [Server-side \u0026 hybrid rendering (SSR, SSG, Hydration)](#server-side--hybrid-rendering-ssr-ssg-hydration)\n  - [Internationalization (i18n)](#internationalization-i18n)\n  - [End to End Testing (e2e)](#end-to-end-testing-e2e)\n- [Tips \u0026 Tricks](#tips--tricks)\n  - [Custom Formatting](#custom-formatting)\n  - [Git Config](#git-config)\n  - [Inlay Hints in VSCode](#inlay-hints-in-vscode)\n  - [Font Ligatures](#font-ligatures)\n  - [Shell Configuration Frameworks](#shell-configuration-frameworks)\n  - [JetBrains IDEs](#jetbrains-ides)\n- [Updating](#updating)\n\n## Getting Started\n\nIf 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](https://github.com/joematthews/extreme-angular) and then select \"Create a new repository\". This will allow you to rename your repository and set it to private.\n\nAlternatively, 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):\n\n```sh\ngit clone --depth=1 --origin=upstream https://github.com/joematthews/extreme-angular.git new_project_name\n```\n\nChange to the new project directory and install the dependencies:\n\n```sh\ncd new_project_name\nnpm install\n```\n\nUse the shortcut `CTRL+SHIFT+H` in VSCode to search and replace `extreme-angular` with your chosen project name.\n\nTo start the development server run `npm start`.\n\n\u003e [!TIP]  \n\u003e If you're using [VSCode](https://code.visualstudio.com/) and [Chrome](https://www.google.com/chrome/), then press `F5` on the keyboard to start the app in debug mode. For more information check out: [TypeScript in Visual Studio Code](https://code.visualstudio.com/docs/languages/typescript).\n\n\u003e [!TIP]\n\u003e The \"Dev Tools Implemented\" section below is project-agnostic -- consider adding it to your project's README.md or CONTRIBUTING.md!\n\n### License Considerations\n\nThe documentation and configuration files in this project are licensed under the [MIT license](https://tlo.mit.edu/understand-ip/exploring-mit-open-source-license-comprehensive-guide).\n\nI keep the copyright from [Angular's license](https://angular.dev/license) and add my own copyright.\n\nIf your project also uses the MIT license, then please consider adding a new copyright line to [LICENSE.txt](LICENSE.txt):\n\n```txt\nCopyright (c) 2010-2025 Google LLC. https://angular.dev/license\n\nCopyright (c) 2024-2025 Joe Matthews, et al. https://github.com/joematthews/extreme-angular\n\nCopyright (c) 2025 Your Name or Company\n```\n\nIf your project is [closed source](https://simple.wikipedia.org/wiki/Closed_source) or uses a [different license](https://opensource.org/licenses), then please consider renaming the file to `LICENSE-Angular.txt`.\n\n## Dev Tools Implemented\n\nThis section outlines how each tool is configured, and how they can be leveraged to ensure clean and maintainable code.\n\nUse this script to run all checks against all project files:\n\n```sh\nnpm run lint:all\n```\n\n\u003e [!CAUTION]\n\u003e 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](https://angular.dev/style-guide), [Security](https://angular.dev/best-practices/security), [Accessibility](https://angular.dev/best-practices/a11y), and [Performance](https://angular.dev/best-practices/runtime-performance).\n\n### TypeScript\n\nIn addition to setting `\"strict\": true`, Angular's template checking is set to 'Strict Mode' in [tsconfig.json](tsconfig.json).\n\nThese compiler options have also been added to ensure strict type-checking for optional properties, eliminate unused variables\nand parameters to reduce clutter, and enforce explicit handling of potentially undefined values in arrays or objects:\n\n- [exactOptionalPropertyTypes](https://www.typescriptlang.org/tsconfig#exactOptionalPropertyTypes)\n- [noUnusedLocals](https://www.typescriptlang.org/tsconfig#noUnusedLocals)\n- [noUnusedParameters](https://www.typescriptlang.org/tsconfig#noUnusedParameters)\n- [noUncheckedIndexedAccess](https://www.typescriptlang.org/tsconfig#noUncheckedIndexedAccess)\n\nTo check for errors in \\*.ts app files:\n\n```\nnpm run lint:tsc:app\n```\n\nTo check for errors in \\*.spec.ts test files:\n\n```\nnpm run lint:tsc:spec\n```\n\nTo check for errors in all TypeScript files:\n\n```\nnpm run lint:tsc:all\n```\n\n### ESLint\n\n[ESLint](https://eslint.org/) is used for linting JavaScript, TypeScript, HTML, and JSON files in the project. The linting configuration is set in [eslint.config.js](./eslint.config.js), with specific overrides for the following file types: `*.js`, `*.ts`, `*.spec.ts`, `*.html`, and `*.json`.\n\nTo ensure effective linting for all project files, the following ESLint plugins are used:\n\n- [@angular-eslint](https://github.com/angular-eslint/angular-eslint)\n  - Enables all TypeScript and template rules unless explicitly disabled or modified.\n  - [@angular-eslint rules configuration matrix](https://github.com/angular-eslint/angular-eslint/blob/main/packages/eslint-plugin/README.md).\n  - [@angular-eslint/template rules configuration matrix](https://github.com/angular-eslint/angular-eslint/blob/main/packages/eslint-plugin-template/README.md).\n- [@typescript-eslint](https://typescript-eslint.io/)\n  - Uses both [strict-type-checked](https://typescript-eslint.io/linting/configs#strict-type-checked) and [stylistic-type-checked](https://typescript-eslint.io/linting/configs#stylistic-type-checked) rule sets.\n  - [typescript-eslint rules configuration matrix](https://typescript-eslint.io/rules/).\n- [eslint-plugin-jasmine](https://github.com/tlvince/eslint-plugin-jasmine)\n  - Uses `recommended` rule set.\n  - [eslint-plugin-jasmine rules configuration matrix](https://typescript-eslint.io/rules/).\n- [eslint-plugin-jsonc](https://github.com/ota-meshi/eslint-plugin-jsonc)\n  - Uses `recommended` rule set.\n  - [eslint-plugin-jsonc rules configuration matrix](https://ota-meshi.github.io/eslint-plugin-jsonc/rules/).\n- [eslint-config-prettier](https://github.com/prettier/eslint-config-prettier)\n  - Disables rules that may conflict with Prettier formatting.\n\nTo lint all relevant files in the project (not just those in src/):\n\n```sh\nnpm run lint\n```\n\nESLint output is formatted using [eslint-formatter-mo](https://github.com/fengzilong/eslint-formatter-mo). To use normal formatting, remove the `-f mo` option from the `lint` script in [package.json](package.json):\n\n```json\n\"lint\": \"eslint -f mo \\\"**/*.{js,ts,html,json}\\\"\",\n```\n\n\u003e [!TIP]\n\u003e 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.\n\n#### Accessibility (a11y)\n\nThis project enables all the accessibility rules provided by angular-eslint by default (denoted by :accessibility: in the @angular-eslint/template rules configuration matrix linked above).\n\nIncludes rules for image alt text, form labels, no autofocus, valid ARIA, and more.\n\nThese 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.\n\nThe [Accessibility in Angular guide](https://angular.dev/best-practices/a11y) is a great place to start learning about accessibility in Angular, and it provides resources on the topic of accessibility.\n\n### Stylelint\n\n[Stylelint](https://stylelint.io/) is used to lint CSS and SCSS files in the project. It is configured with the [stylelint-config-standard](https://github.com/stylelint/stylelint-config-standard) and [stylelint-config-standard-scss](https://github.com/stylelint-scss/stylelint-config-standard-scss) configurations.\n\nRules for linting are applied separately to `.css` and `.scss` files, and can be customized in [.stylelintrc.json](./.stylelintrc.json).\n\nTo lint all CSS and SCSS files:\n\n```sh\nnpm run lint:style\n```\n\n### Prettier\n\n[Prettier](https://prettier.io/) is used to enforce consistent code formatting, reducing diffs by minimizing formatting changes.\n\nIn [.prettierrc.json](./.prettierrc.json), the `htmlWhitespaceSensitivity` option is set to `ignore` to better format templates. This setting trims unnecessary whitespace around and inside HTML elements. Use `\u0026nbsp;` (non-breaking space) when you need to explicitly maintain spacing between inline elements.\n\nThe following Prettier plugins are used:\n\n- [prettier-plugin-sh](https://github.com/un-ts/prettier/tree/master/packages/sh): Formats shell scripts, such as Git hooks.\n- [prettier-plugin-css-order](https://github.com/Siilwyn/prettier-plugin-css-order): Automatically organizes SCSS/CSS properties using [concentric-css](https://github.com/brandon-rhodes/Concentric-CSS)\n- [prettier-plugin-organize-imports](https://github.com/trivago/prettier-plugin-sort-imports): Automatically organizes, arranges, and removes unused imports.\n\nTo format files within the project:\n\n```sh\nnpm run format\n```\n\nTo check if all files are properly formatted:\n\n```sh\nnpm run lint:format\n```\n\n### CSpell\n\n[CSpell](https://github.com/streetsidesoftware/cspell) is used for spell checking for all project files.\n\nTo add project-specific words, update [.cspell.json](.cspell.json).\n\nThe [Code Spell Checker Extension for VSCode](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) allows you to quickly add misspelled words to the configuration by selecting \"Add to config: .cspell.json\" from the 'Quick Fix' menu.\n\nThe following dictionaries have been enabled: bash, companies, cpp, csharp, css, filetypes, fonts, go, html, latex, misc, node,npm, php, powershell, python,softwareTerms, and typescript.\n\nTo find misspelled words in all files within the project:\n\n```sh\nnpm run lint:spelling\n```\n\n### VSCode\n\nThe following VSCode extensions will be recommended when opening the project ([.vscode/extensions.json](.vscode/extensions.json)):\n\n- [Angular](https://marketplace.visualstudio.com/items?itemName=Angular.ng-template)\n- [Editorconfig](https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig)\n- [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)\n- [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)\n- [Stylelint](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint)\n- [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)\n\nThe following VSCode settings have been set in [.vscode/settings.json](.vscode/settings.json):\n\n- Set Prettier as default formatter.\n- Turn on format on save\n- Turn on [fix linting errors on save](https://github.com/microsoft/vscode-eslint?tab=readme-ov-file#version-204).\n- Turn on auto-save and set delay for 3 seconds (doesn't format or fix errors).\n- [Disable VSCode linter for CSS/SCSS](https://github.com/stylelint/vscode-stylelint?tab=readme-ov-file#disable-vs-codes-built-in-linters-optional).\n- [Enable Stylelint linter CSS \u0026 SCSS](https://github.com/stylelint/vscode-stylelint?tab=readme-ov-file#%EF%B8%8F-only-css-and-postcss-are-validated-by-default).\n\n### Husky, Commitlint, tsc-files, and Lint-Staged (Git hooks)\n\n[Husky](https://typicode.github.io/husky/) is used to manage the [pre-commit](.husky/pre-commit), [pre-push](.husky/pre-push), and [commit-msg](.husky/commit-msg) git hooks.\n\n[Commitlint](https://commitlint.js.org/#/) is used to enforce good commit messages according to the [@commitlint/config-conventional](https://github.com/conventional-changelog/commitlint) configuration in the commit-msg git hook. Additional Commitlint configuration is kept in [commitlint.config.js](./commitlint.config.js).\n\n[Lint-staged](https://github.com/lint-staged/lint-staged) is used to run Prettier, ESLint, Stylelint, CSpell, and [tsc-files](https://github.com/gustavopch/tsc-files) in the pre-commit git hook against all staged files. Lint-staged configuration is kept in [.lintstagedrc.json](.lintstagedrc.json)\n\n### Shove Progress\n\nYou 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:\n\n```sh\nnpm run shove\n```\n\nThe shove script will stage all files, commit with the commit message `wip: shoved`, and then push.\n\n\u003e [!NOTE]\n\u003e The shove script sets [git config push.autoSetupRemote true](https://git-scm.com/docs/git-push#Documentation/git-push.txt-pushautoSetupRemote) 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`.\n\n\u003e [!WARNING]\n\u003e The `--no-verify` flag cannot be disabled. To protect against untested code use a Continuous Integration solution.\n\n### Continuous Integration (CI) Using GitHub Actions\n\nThe [on-pull-request.yml](.github/workflows/on-pull-request.yml) action checks all files and run tests when a branch is pushed that is associated with a GitHub pull request.\n\nPull 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.\n\nTo execute these checks and tests locally:\n\n```sh\nnpm run ci:all\n```\n\n## Optional Angular Schematics\n\n### Angular Material \u0026 Angular CDK\n\nLooking for an a11y-friendly, MIT-licensed, Angular component library that strictly adheres to the [Material Design language](https://m3.material.io/) and integrates well with Angular's core libraries, and comes with animations? Then check out [Angular Material](https://material.angular.io/).\n\nThe Angular Material documentation is very good and covers many topics including [Supporting Light and Dark Mode](https://material.angular.io/guide/theming#supporting-light-and-dark-mode)\n\nFor design-agnostic template utilities, consider installing the [Angular CDK](https://material.angular.io/cdk/categories):\n\n```sh\nng add @angular/cdk\n```\n\nTo add animations to your own components, check out [Introduction to Angular animations](https://angular.dev/guide/animations)\n\n### Server-side \u0026 hybrid rendering (SSR, SSG, Hydration)\n\nConsider enabling [Server-side \u0026 hybrid rendering](https://angular.dev/guide/performance) to improve SEO and user experience (at the cost of increased deployment complexity).\n\n### Internationalization (i18n)\n\nAngular has powerful [Internationalization](https://angular.dev/guide/i18n) capabilities.\n\nIf you plan to implement internationalization in the future, adding i18n attributes early on can make the process easier to scale naturally.\n\nTo enable the i18n ESLint rule, simply remove or configure the following rule from the \\*.html section of [eslint.config.js](./eslint.config.js):\n\n```js\n\"@angular-eslint/template/i18n\": \"off\",\n```\n\n\u003e [!NOTE]\n\u003e You may also need to configure the [@angular-eslint/template/i18n](https://github.com/angular-eslint/angular-eslint/blob/main/packages/eslint-plugin-template/docs/rules/i18n.md) rule according to your project's needs.\n\n\u003e [!TIP]\n\u003e Using `eslint --fix` can automatically add i18n tags in many cases.\n\n## End to End Testing (e2e)\n\nAngular has schematics available for several end to end testing frameworks. The [Angular End to End Testing guide](https://angular.dev/tools/cli/end-to-end) will walk you through the steps to set one up.\n\nThe [eslint-plugin-playwright](https://github.com/playwright-community/eslint-plugin-playwright) package has rules for the popular [Playwright](https://playwright.dev/) framework. To incorporate these rules, import the plugin in the [eslint.config.js](eslint.config.js) file and then add a new config object that targets `e2e/**/*.spec.ts` files:\n\n```js\nimport { playwright } from \"eslint-plugin-playwright\";\n```\n\n```js\n  {\n    files: ['e2e/**/*.spec.ts'],\n    extends: [...playwright.configs['flat/recommended'], prettierConfig],\n    rules: { ...playwright.configs['flat/recommended'].rules },\n  },\n```\n\n## Tips \u0026 Tricks\n\nThese are tips and tricks that are too opinionated or situational to include in the repository configuration or are not related to Angular project configuration.\n\n### Custom Formatting\n\nTo customize the indentation and line width, change the indent_size property in [.editorconfig](.editorconfig):\n\n```ini\n[*.{js,ts,css,scss,sh,html,json}]\nindent_size = 2\n```\n\nAnd then add the tabWidth and printWidth properties in [.prettierrc.json](.prettierrc.json):\n\n```json\n{\n  \"tabWidth\": 2,\n  \"printWidth\": 80\n}\n```\n\nTo use double quotes for JS/TS files, change these properties in [.editorconfig](.editorconfig):\n\n```ini\n[*.ts]\nquote_type = single\nij_typescript_use_double_quotes = false\n\n[*.{js,cjs}]\nquote_type = single\n```\n\nAnd then set the singleQuote property to false in [.prettierrc.json](.prettierrc.json):\n\n```json\n{\n  \"singleQuote\": false\n}\n```\n\nFinally, run `npm run format` to re-format all files, and check the result.\n\nHere are some reasons for not changing the indentation, line width, and quote style:\n\n- The Angular documentation and libraries use 2 space indentation and single quotes.\n- [2 space indentation is traditional for various reasons](https://www.google.com/search?q=why+use+2+space+indentation+in+typescript).\n- 4 space indentation can look pretty bad in JS/TS with an 80 character line limit.\n- Changing the line width can make it more difficult to view editors side-by-side.\n\n### Git Config\n\nTo automatically set the remote branch name to match the local branch name on push:\n\n```\ngit config push.autoSetupRemote true\n```\n\nYou can use VSCode to edit commit messages when using commands like `git commit`, `git rebase`, and `git commit --amend`. This will only work if the [code command](https://code.visualstudio.com/docs/editor/command-line) in the PATH. Follow these [instructions to set up the vscode cli on macOS](https://code.visualstudio.com/docs/setup/mac#_launching-from-the-command-line) if it is not already set up. Run this command to set it up:\n\n```\ngit config core.editor \"code --wait\"\n```\n\nIf 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.\n\n```\ngit config user.email \"14097616+joematthews@users.noreply.github.com\n```\n\n\u003e [!TIP]\n\u003e You can add the `--global` flag to these commands to make them the default for all new projects.\n\n### Inlay Hints in VSCode\n\nI _highly_ recommend enabling [inlay hints in vscode](https://code.visualstudio.com/Docs/editor/editingevolved#_inlay-hints). They give me the confidence to use TypeScript's [type inference](https://www.typescriptlang.org/docs/handbook/type-inference.html) without feeling the need specify types 'for visibility'.\n\nAdd the following to the vscode user settings to enable all inlay hints for JavaScript \u0026 TypeScript:\n\n```json\n{\n  \"editor.inlayHints.enabled\": \"onUnlessPressed\",\n  \"javascript.inlayHints.enumMemberValues.enabled\": true,\n  \"javascript.inlayHints.functionLikeReturnTypes.enabled\": true,\n  \"javascript.inlayHints.parameterNames.enabled\": \"literals\",\n  \"javascript.inlayHints.parameterTypes.enabled\": true,\n  \"javascript.inlayHints.propertyDeclarationTypes.enabled\": true,\n  \"javascript.inlayHints.variableTypes.enabled\": true,\n  \"typescript.inlayHints.enumMemberValues.enabled\": true,\n  \"typescript.inlayHints.functionLikeReturnTypes.enabled\": true,\n  \"typescript.inlayHints.parameterNames.enabled\": \"literals\",\n  \"typescript.inlayHints.parameterTypes.enabled\": true,\n  \"typescript.inlayHints.propertyDeclarationTypes.enabled\": true,\n  \"typescript.inlayHints.variableTypes.enabled\": true\n}\n```\n\nTo temporarily disable inlay hints use `CTRL + ALT` (or `CTRL + OPTION` on Mac) -- Or, to reverse this behavior use:\n\n```json\n{\n  \"editor.inlayHints.enabled\": \"offUnlessPressed\"\n}\n```\n\n### Font Ligatures\n\nVSCode is capable of using 'font ligatures' -- not everyone likes font ligatures, but I really enjoy them.\n\nThe two most popular fonts that support font ligatures are [Fira Code](https://github.com/tonsky/FiraCode) and [Jet Brains Mono](https://www.jetbrains.com/lp/mono/). I typically use the 'Regular' `*.ttf` variant of each font.\n\nAfter downloading and installing the font of choice, add the font to the `fontFamily` and enable font `fontLigatures` in the vscode user settings:\n\n```json\n{\n  \"editor.fontFamily\": \"'Fira Code', Menlo, Monaco, 'Courier New', monospace\",\n  \"editor.fontLigatures\": true\n}\n```\n\nThe fira code repository maintains [a list of alternative fonts with ligatures](https://github.com/tonsky/FiraCode#alternatives).\n\n### Shell Configuration Frameworks\n\n- [Oh My Zsh](https://ohmyz.sh/): Popular on macOS, where zsh is now default.\n- [Oh My Bash](https://github.com/ohmybash/oh-my-bash): Popular on Linux, where bash is usually default.\n- [Oh My Posh](https://ohmyposh.dev/): Cross-platform. Popular on Windows. Works with many shells.\n- [Starship](https://starship.rs/): Cross-platform. Written in Rust.\n\nThese are great frameworks for managing shell configuration. They include helpful functions, plugins, helpers, and themes.\n\nShell configuration frameworks are a quick way to add git branch \u0026 status information to the shell prompt.\n\n### JetBrains IDEs\n\n[Webstorm, Rider \u0026 RustRover are now free to use for non-commercial use!](https://sales.jetbrains.com/hc/en-gb/articles/18950890312210-The-free-non-commercial-licensing-FAQ)\n\nHere are some tips for configuring the dev tools for this project in JetBrains IDEs:\n\n- ESLint, Stylelint, Prettier\n  - Search for each name in the settings to easily find all relevant configuration.\n  - Double check all three plugins are installed.\n  - Set configuration to 'Automatic' for each and match the file extensions that are found in scripts section of [package.json](./package.json).\n  - (Optional) Set \"Run on save\" for each plugin if preferred.\n- Install the \"CSpell Check\" plugin to reduce conflicts with JetBrains' built-in spell-checking.\n- (Optional) Set keymap to 'VSCode' or 'VSCode (macOS)' for an easier transition\n- (Optional) Search for 'ligatures' in the settings to enable font ligatures. JetBrainsMono is capable of displaying ligatures and is installed with the IDE\n\n## Updating\n\n\u003e [!WARNING]\n\u003e Depending on the maturity of the project, it may be better to look at the current configuration files for extreme-angular \u0026 [release notes](https://github.com/joematthews/extreme-angular/releases) and then manually make changes instead of merging. If the Angular version has changed, then follow the [guide to update Angular](https://angular.dev/update) first before attempting to merge or make changes.\n\nTo pull in the latest changes, check out an 'update' branch and merging the latest changes from `upstream/main`:\n\n```sh\ngit checkout main \u0026\u0026 git pull\ngit checkout -b update\ngit merge upstream/main\n```\n\n\u003e [!NOTE]\n\u003e The name of the remote may not be `upstream` depending on how this project was cloned.\n\nThere may be [merge conflicts](https://code.visualstudio.com/docs/sourcecontrol/overview#_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:\n\n```sh\nnpm install\nnpm run ci:all\n```\n","funding_links":[],"categories":["Site Templates"],"sub_categories":["Free Templates"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoematthews%2Fextreme-angular","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjoematthews%2Fextreme-angular","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoematthews%2Fextreme-angular/lists"}