VSCode怎么配置Angular CLI环境_VSCode企业级前端开发指南【架构】-VSCode-PHP中文网

angular cli 必须全局安装，vscode仅编辑调试；ng命令报“command not found”主因是cli未装或path未配置，需在系统终端验证ng version并确保npm全局路径加入环境变量。

vscode怎么配置angular cli环境_vscode企业级前端开发指南【架构】

Angular CLI 必须全局安装，VSCode 本身不运行项目，只负责编辑和调试——没装 @angular/cli，所有插件都是摆设。

为什么 `ng` 命令在 VSCode 终端里报 “command not found”

这不是插件问题，是 CLI 根本没进系统 PATH。VSCode 终端默认不继承 shell 的完整环境变量，尤其 Windows PowerShell 或某些 macOS zsh 配置下更明显。

先在系统终端（不是 VSCode 里）执行 ng version，确认 CLI 已装；失败就运行 npm install -g @angular/cli（pnpm 用户用 pnpm add -g @angular/cli）
Windows 上若提示权限被拒，别改执行策略——直接用 Windows Terminal（管理员模式）重装
装完检查 npm config get prefix 输出的路径是否已加入系统 PATH；macOS/Linux 用户可能需要手动把 $(npm config get prefix)/bin 加进 ~/.zshrc 或 ~/.bash_profile
VSCode 启动方式也影响：不要双击打开文件夹，进项目目录后执行 code .，确保终端初始化时能读到 PATH
如果仍不行，在 VSCode 设置里搜 terminal.integrated.inheritEnv，勾选它

Angular Language Service 插件不生效？先看这三处

补全失效、*ngIf 不识别、@Input() 无跳转，90% 是配置断在底层链路上，不是插件坏了。

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

右下角点击语言模式（显示 “HTML”），选 Configure File Association for '.html' → 设为 Angular HTML；否则插件压根不加载模板支持
检查项目根目录 tsconfig.json 是否含 "plugins": [{ "name": "@angular/language-service" }]；CLI 默认生成，但手动建项目或从旧版升级常漏掉
插件版本必须和 @angular/core 大版本一致（如项目是 v17.2.0，插件就得用 v17.x）；它依赖的是 node_modules/typescript 版本，不是 VSCode 自带 TS，运行 npm ls typescript 确认是否 ≥5.2（Angular 17 要求）
装完必须彻底重启 VSCode（不是重载窗口），或手动执行命令面板里的 Angular: Restart Angular Language Service

`launch.json` 配好了，F5 却不命中断点

VSCode 调试器不会自动拉起 ng serve，也不会自动映射源码——它只连接已运行的服务，并靠 source map 把浏览器代码反查回 TS/HTML 文件。

务必先手动运行 ng serve，等看到 Compiled successfully 再点 F5；否则 Chrome 打开空白页，断点永远不触发
webRoot 必须是 "${workspaceFolder}/src"，不是 "${workspaceFolder}" 或 "./src"；AOT 模式下调试不可用，只限 ng serve 开发模式
确认 angular.json 中 build.options.sourceMap 为 true（开发模式默认开启，但自定义构建配置可能关掉）
必须装官方 Debugger for Chrome 或 Microsoft Edge Tools for VS Code；VSCode 自带的 Node 调试器对前端无效
Mac 用户别用 Safari 调试——它不支持 VSCode 的 source map 映射，断点基本失效

该装哪些插件？别让“看起来很忙”拖慢热更新

装得越多 ≠ 越好，Angular Language Service 和 TypeScript 的耦合极深，冗余插件会抢夺符号解析权，尤其在 Windows + WSL 场景下，热更新延迟明显升高。

只留三个核心：Angular Language Service（必须）、ESLint（推荐，配 @angular-eslint/eslint-plugin）、Prettier（建议，但要禁用 ESLint 冲突规则）
禁用 Auto Import 类插件：它和 Angular Language Service 的自动导入逻辑冲突，会导致重复 import，尤其对 Injectable、Observable 这类符号误插位置
删掉 Angular Snippets：CLI 的 ng g c users/list 已覆盖全部脚手架需求，片段容易过时，还干扰补全优先级
不用 jsconfig.json：Angular 项目只认 tsconfig.json，多一个 jsconfig.json 反而让路径解析错乱，import 标红但实际能跑

最常被忽略的其实是 tsconfig.json 里 "baseUrl" 和 "paths" 的写法——漏掉末尾 /*，比如写成 "@core": ["app/core"]，VSCode 就无法解析 import { xxx } from '@core/http'，但也不报错，只能靠反复点进 any 类型里兜圈子。