如何使用VS Code和TFS拉取Visualstudio.com上的Angular项目至本地

作为刚接触Angular和TFS的新手，我帮你整理了一步步的实操指南，确保你能顺利把远程项目同步到本地并开始开发：

一、先装VS Code的TFVC支持扩展 #

VS Code默认不自带TFVC（TFS的版本控制工具）的支持，所以第一步得装官方扩展：

• 打开VS Code左侧的「扩展」面板（快捷键Ctrl+Shift+X），搜索Team Foundation Version Control，找到微软官方发布的那个扩展，点「安装」，重启VS Code让扩展生效。

二、连接到你的VisualStudio.com TFVC项目 #

1. 按下Ctrl+Shift+P（Mac是Cmd+Shift+P）打开命令面板，输入TFVC: Connect to a Team Project
2. 在弹出的窗口里，选择你的VisualStudio.com对应的TFS服务器地址（一般是https://你的账号名.visualstudio.com）
3. 跟着提示登录你的账号，然后选中你之前创建的Angular项目所在的团队项目，完成连接。

三、配置工作区并同步代码到本地 #

TFVC靠「工作区」来关联本地文件夹和远程服务器路径，这一步很关键：

1. 命令面板输入TFVC: Create Workspace，给你的工作区起个好记的名字（比如AngularDevWorkspace）
2. 选择本地一个空文件夹作为工作区的本地路径（这就是你项目要存放的地方）
3. 找到你在VisualStudio.com上的Angular项目的服务器路径（格式一般是$/你的团队项目名/Angular项目文件夹），把它映射到刚才选的本地文件夹
4. 确认配置后，VS Code会自动开始把远程的代码同步到本地，等进度条走完就完成了。

四、配置Angular本地开发环境（新手必做） #

同步完代码还不够，得确保本地能跑起来Angular项目：

1. 检查Node.js和npm：打开VS Code的终端（快捷键Ctrl+），输入node -v和npm -v`，如果能显示版本号说明已经装了；没装的话去Node.js官网下LTS版本安装就行。
2. 装Angular CLI：终端里敲npm install -g @angular/cli，全局装Angular的命令行工具，以后启动、构建项目都靠它。
3. 装项目依赖：用cd 你的项目本地路径切换到项目根目录，然后执行npm install，这个命令会下载项目需要的所有依赖包，耐心等它跑完。

五、验证项目能正常运行 #

在终端输入ng serve，启动Angular的开发服务器。等终端显示Compiled successfully之后，打开浏览器访问http://localhost:4200，要是能看到Angular的默认欢迎页面，说明同步和环境配置都没问题啦！

六、日常同步操作（拉取更新、提交修改） #

拉取远程最新代码 #

• 打开命令面板输入TFVC: Get Latest Version，或者点左侧「源代码管理」面板里的「Get Latest」按钮，就能把远程的最新修改同步到本地。

提交本地修改到远程 #

1. 在「源代码管理」面板里，勾选你要提交的修改文件
2. 在输入框里写清楚提交的备注（比如「调整登录页样式」）
3. 点「Commit」按钮，然后选「Commit and Push」（或者命令面板输入TFVC: Check In），就能把你的修改推送到远程TFS服务器了。

小提示 #

• 如果遇到权限问题，先确认你的VisualStudio.com账号有这个项目的读写权限哦。
• 第一次同步和装依赖可能会慢一点，别着急，等它跑完就行。
• 要是对TFVC命令不熟，终端里敲tf help就能看到所有TFS命令的帮助信息。

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