VS Code 界面、项目与终端

本教程由「小荣的网络开发日志」实操整理编写，面向第一次接触代码编辑器的小白。
遇到操作问题可以联系作者咨询。承接网站、App、小程序和脚本定制开发，也提供 AI 编程教学与项目陪跑。
联系方式：微信 rongyaolg，电话 18375295913

1 先打开整个项目文件夹

项目一般由文件夹下的多个代码、配置、图片等资源文件及子文件夹构成。所以在 VS Code 开发时，要打开整个项目文件夹，而非单个代码文件，这样 VS Code 和 AI 工具才能获取完整项目信息，更准确地理解、修改代码。

点击“文件 → 打开文件夹”。
选择项目所在的文件夹 ( 新项目可以新建目录 )。
点击确认打开。
如果出现“是否信任此文件夹”，自己的项目可以选择信任；打开成功后，左侧会显示项目中的全部文件和文件夹(教学项目新项目，打开没有文件就是空的)。

2 主界面各区域做什么

区域	主要作用	小白常用操作
活动栏	切换文件、搜索、Git、运行和扩展等功能	点击最左侧图标切换功能
文件资源管理器	查看整个项目的文件和文件夹	新建、重命名、移动文件
编辑区	查看和修改代码	同时打开多个文件标签页
AI 助手面板（安装插件后）	与 AI 对话，让它解释或修改项目	描述需求前先让 AI 阅读项目
底部面板	显示终端、问题和程序输出	运行项目、查看并复制完整报错
状态栏	显示文件类型、编码、Git 分支等状态	发现异常时检查当前文件和分支

3 新建文件和文件夹

把鼠标移到左侧项目名称旁边，可以看到新建文件和新建文件夹按钮。常见文件包括：

把鼠标移到左侧项资源管理器，可以新建文件和新建文件夹按钮。常见文件包括： | --- | --- | | index.html | 网页结构 | | style.css | 页面样式 | | main.js | 页面交互逻辑 | | README.md | 项目说明 | | package.json | Node.js 项目信息和运行命令 |

文件名、后缀和所在目录都很重要。让 AI 创建文件时，要确认它放在了正确位置。

4 打开并使用终端

点击顶部“终端 → 新建终端”，底部会出现命令行。终端默认位于当前项目目录，因此可以直接运行项目命令。

常见命令：

node -v
npm install
npm run
npm install
npm run dev

node -v：检查 Node.js 是否安装。
npm install：安装项目需要的依赖。
npm run dev：启动开发服务。
npm install：安装项目需要的依赖。
npm run dev：启动开发服务。

下一篇会学习扩展市场，以及如何让 VS Code 接入 AI 编程助手。

完成本篇后，你应该能够打开完整项目、找到文件、新建文件、打开终端。下一篇会学习扩展市场，以及如何让 VS Code使用内置AI工具或者接入AI 编程助手（deepseek，qianwen等AI）。