Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 9 additions & 29 deletions .cspell.json
Original file line number Diff line number Diff line change
@@ -1,36 +1,16 @@
{
// Version of the setting file. Always 0.2
"version": "0.2",
// language - current active spelling language
"language": "en",
// words - list of words to be always considered correct
"words": ["analogjs", "lintstagedrc"],
// flagWords - list of words to be always considered incorrect
// This is useful for offensive words and common spelling errors.
// For example "hte" should be "the"
"language": "en-US",
"words": ["analogjs", "Fira", "lmdb", "msgpackr"],
"flagWords": [],
"caseSensitive": false,
"allowCompoundWords": true,
"useGitignore": true,
"dictionaries": [
"bash",
"companies",
"cpp",
"csharp",
"css",
"filetypes",
"fonts",
"go",
"html",
"latex",
"misc",
"node",
"npm",
"php",
"powershell",
"python",
"softwareTerms",
"typescript"
],
"ignorePaths": ["**/*.json", "**/*.yml", "**/*.yaml"]
"ignorePaths": ["**/*.json", "**/*.yml", "**/*.yaml"],
"languageSettings": [
{
"languageId": "markdown",
"ignoreRegExpList": ["/\\[[^\\]\\s]+\\]\\([^)]*\\)/g", "/\\]\\([^)]*\\)/g"]
}
]
}
2 changes: 1 addition & 1 deletion .github/workflows/validate-code.yml
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ jobs:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v7
- uses: actions/setup-node@v6
- uses: actions/setup-node@v7
with:
node-version-file: .nvmrc
- run: npm ci --ignore-scripts
Expand Down
10 changes: 5 additions & 5 deletions .husky/commit-msg
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,10 @@

npx --no -- commitlint --edit ${1} || {
# Print if commit message fails
echo -e 'Example conventional-commit messages:'
echo -e '- "feat: add user service for authentication"'
echo -e '- "fix(auth): correct validation error in login form"'
echo -e '- "chore(ci): update CI configuration to use Node 22"'
echo -e ''
echo 'Example conventional-commit messages:'
echo '- "feat: add user service for authentication"'
echo '- "fix(auth): correct validation error in login form"'
echo '- "chore(ci): update CI configuration to use Node 22"'
echo ''
exit 1
}
14 changes: 7 additions & 7 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,20 +18,20 @@ First search the [existing issues](https://github.com/joematthews/extreme-angula

## Contribution Ideas

- **Documentation improvements** — Fix typos, clarify instructions, add examples
- **Tool integrations** — Add support for new development tools
- **Configuration enhancements** — Improve existing tool configurations
- **CI/CD improvements** — Enhance GitHub Actions workflows
- **Bug fixes** — Resolve configuration conflicts or compatibility issues
- **Performance optimizations** — Improve build times or tooling efficiency
- **Documentation improvements**: Fix typos, clarify instructions, add examples
- **Tool integrations**: Add support for new development tools
- **Configuration enhancements**: Improve existing tool configurations
- **CI/CD improvements**: Enhance GitHub Actions workflows
- **Bug fixes**: Resolve configuration conflicts or compatibility issues
- **Performance optimizations**: Improve build times or tooling efficiency

## Development Guidelines

### Before You Start

1. **Check existing issues** to avoid duplicate work
2. **Create an issue** for significant changes to discuss the approach
3. **Keep changes focused** — one feature or fix per pull request
3. **Keep changes focused**: one feature or fix per pull request

### Setting Up Your Development Environment

Expand Down
117 changes: 92 additions & 25 deletions README.md

Large diffs are not rendered by default.

57 changes: 47 additions & 10 deletions docs/vitest-ide-workaround.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,24 @@ Angular 22 uses Vitest for unit testing through its `@angular/build:unit-test` b

This guide explains how to add a workaround that enables Test Explorer integration in VS Code. **This is not officially supported** and may break with future Angular updates.

## Table of Contents

- [Status and Alternatives](#status-and-alternatives)
- [How It Works](#how-it-works)
- [Prerequisites](#prerequisites)
- [Setup Workaround](#setup-workaround)
- [Known Limitations](#known-limitations)
- [Reverting the Workaround](#reverting-the-workaround)
- [Future](#future)

## Status and Alternatives

Native IDE support is still an open feature request upstream ([angular/angular-cli#31734](https://github.com/angular/angular-cli/issues/31734)), so as of Angular 22 the gap this workaround fills has not been closed.

A couple of related options exist, but neither replaces this workaround for IDE integration:

- **`runnerConfig`** — Angular's unit-test builder accepts a `runnerConfig` option in `angular.json` that points at a `vitest.config.ts` (or auto-discovers a `vitest-base.config.*`). It customizes how tests _run_, but it does not make the VS Code Vitest extension work: the CLI overrides properties such as `test.projects` and `test.include`, and the Angular team does not support the config's contents. See [Migrating from Karma to Vitest](https://angular.dev/guide/testing/migrating-to-vitest).
- **[AnalogJS](https://analogjs.org/docs/features/testing/vitest)** (`@analogjs/vitest-angular`) — provides a standalone Vitest config that IDE extensions can read, so it does enable in-editor runs. It is a heavier, different toolchain choice rather than a small addition to a stock Angular project.
- **`runnerConfig`**: Angular's unit-test builder accepts a `runnerConfig` option in `angular.json` that points at a `vitest.config.ts` (or auto-discovers a `vitest-base.config.*`). It customizes how tests _run_, but it does not make the VS Code Vitest extension work: the CLI overrides properties such as `test.projects` and `test.include`, and the Angular team does not support the config's contents. See [Migrating from Karma to Vitest](https://angular.dev/guide/testing/migrating-to-vitest).
- **[AnalogJS](https://analogjs.org/docs/features/testing/vitest)** (`@analogjs/vitest-angular`): provides a standalone Vitest config that IDE extensions can read, so it does enable in-editor runs. It is a heavier, different toolchain choice rather than a small addition to a stock Angular project.

If you want Test Explorer integration today without changing your toolchain, the workaround below remains the lightest path.

Expand All @@ -33,7 +43,7 @@ This lets VS Code's Test Explorer show your source files while actually running
- Angular 22 project with Vitest (default for `ng new`)
- VS Code with the [Vitest extension](https://marketplace.visualstudio.com/items?itemName=vitest.explorer)

## Implementation
## Setup Workaround

### Step 1: Add vitest.config.ts

Expand Down Expand Up @@ -357,7 +367,31 @@ if (!outputDir || needsRebuild(outputDir)) {
}
```

### Step 3: Update tsconfig.json
### Step 3: Add tsconfig.node.json

Type-checks the two files above. Install `@types/node`, add the file, and reference it from `tsconfig.json`:

```sh
npm install -D @types/node
```

```json
{
"extends": "./tsconfig.json",
"compilerOptions": {
"types": ["node"]
},
"include": ["*.ts"]
}
```

```json
{
"references": [{ "path": "./tsconfig.node.json" }]
}
```

### Step 4: Update tsconfig.json

Add `vitest/globals` types to the root `tsconfig.json` to help VS Code recognize test globals like `describe` and `it`:

Expand All @@ -369,9 +403,9 @@ Add `vitest/globals` types to the root `tsconfig.json` to help VS Code recognize
}
```

This should be added to the `compilerOptions` object in your root `tsconfig.json` file — not `tsconfig.spec.json`. Even though `tsconfig.spec.json` already includes these types for `ng test`, VS Code needs them in the root config for editor support when using this workaround.
This should be added to the `compilerOptions` object in your root `tsconfig.json` file, not `tsconfig.spec.json`. Even though `tsconfig.spec.json` already includes these types for `ng test`, VS Code needs them in the root config for editor support when using this workaround.

### Step 4: Add VS Code extension recommendation
### Step 5: Add VS Code extension recommendation

Update `.vscode/extensions.json`:

Expand All @@ -381,7 +415,7 @@ Update `.vscode/extensions.json`:
}
```

### Step 5: Build tests initially
### Step 6: Build tests initially

Run the test build once to populate the cache:

Expand All @@ -395,7 +429,7 @@ Or if you don't have that script:
npx ng test --watch=false --dump-virtual-files
```

### Step 6: Verify
### Step 7: Verify

1. Open VS Code
2. Install the Vitest extension if prompted
Expand All @@ -417,9 +451,12 @@ To remove this workaround and return to the default Angular setup:
### Step 1: Delete the config files

```sh
rm vitest.config.ts vitest.setup.ts
rm vitest.config.ts vitest.setup.ts tsconfig.node.json
npm uninstall @types/node
```

Remove the `tsconfig.node.json` entry from `references` in `tsconfig.json`.

### Step 2: Remove types from tsconfig.json

If you added `"types": ["vitest/globals"]` to your root `tsconfig.json`, remove it. The types in `tsconfig.spec.json` are sufficient for `ng test`.
Expand All @@ -442,7 +479,7 @@ Run tests to confirm everything still works:
npm test
```

Tests will continue to run via Angular's `@angular/build:unit-test` builder — you just won't have Test Explorer integration in VS Code.
Tests will continue to run via Angular's `@angular/build:unit-test` builder. You just won't have Test Explorer integration in VS Code.

## Future

Expand Down
3 changes: 1 addition & 2 deletions eslint.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -80,9 +80,8 @@ module.exports = defineConfig([
prettierConfig,
],
languageOptions: {
globals: vitest.environments.env.globals,
parserOptions: {
project: './tsconfig.spec.json',
projectService: true,
tsconfigRootDir: __dirname,
},
},
Expand Down
Loading