WebStorm 2026中Angular 21工作区Vitest运行器配置问询

配置步骤 #

1. 打开WebStorm的运行/调试配置（点击右上角运行按钮旁的下拉菜单 → 选择「编辑配置」）
2. 点击左上角+号，选择Vitest配置项
3. 在配置面板中完成以下设置：
   • 测试范围：若仅运行project1的测试，选择「目录」，然后指定路径为./projects/project1/src；也可在「Vitest选项」中填入--project project1来通过项目名过滤
   • 工作目录：选择Angular工作区的根目录（即包含angular.json的目录）
   • Node解释器：选择当前项目使用的Node.js版本
   • Vitest包：选择工作区根目录下的node_modules/vitest

疑问解答 #

1. 是否需要创建Vitest配置文件？ #

不需要。Angular 16及以上版本的CLI已集成Vitest，会通过angular.json中的项目配置自动生成Vitest运行参数，无需手动创建vitest.config.ts。你能正常执行ng test project1，说明CLI已处理好相关配置。

2. 使用的Vitest包来自@angular/cli吗？ #

不是。@angular/cli仅提供了Vitest的调用逻辑，实际的Vitest包是作为独立依赖安装在项目node_modules中的（可在package.json中看到vitest依赖项），CLI会依据angular.json的配置调用这个独立包运行测试。

3. 工作目录选工作区还是项目目录？ #

必须选择Angular工作区根目录。因为ng test基于工作区的angular.json识别多项目结构，WebStorm的Vitest运行器需要读取该文件来匹配对应项目的测试配置，若选项目目录会导致无法识别工作区结构。

4. 填项目名生效时，选“所有测试”还是“目录”？ #

两种方式都可行，但更推荐选「目录」并指定项目src目录：

• 若选「所有测试」并在「Vitest选项」填--project project1，CLI会通过项目参数过滤测试；
• 选「目录」则直接限定测试文件的范围，更直观且能避免参数冲突。

内容的提问来源于stack exchange，提问作者Galdor