首先创建my-first-project文件夹并用VSCode打开作为工作区;接着新建index.html文件并输入基础HTML代码;然后手动保存文件并确认其位于项目文件夹内;最后右键用Safari打开预览,显示“Hello, VSCode!”。
如果您刚刚安装了 vscode 并希望创建一个可运行的初始项目,则可能对工作区结构、文件保存方式以及如何启动基础开发流程感到陌生。以下是完成第一个项目的具体操作路径:
本文运行环境:MacBook Air,macOS Sequoia。
一、创建项目文件夹并打开工作区
VSCode 本身不内置项目初始化功能,需先在操作系统中建立一个空目录作为项目根路径,再通过 VSCode 打开该目录以形成工作区。此步骤确保后续所有文件、配置和扩展行为均基于该路径生效。
1、在 Finder 中新建一个名为 my-first-project 的文件夹。
2、双击进入该文件夹,右键空白处选择“显示简介”,确认位置路径为用户主目录下的 Documents 或 Desktop。
3、打开 VSCode,点击菜单栏 文件 > 打开文件夹,选中 my-first-project 并点击“确定”。
二、添加首个源代码文件
工作区建立后,需手动创建一个可执行的源文件。文件类型由扩展名决定,VSCode 会据此激活对应语言支持与语法高亮。
1、在左侧资源管理器中,点击文件夹图标右侧的 新建文件 图标(或使用快捷键 Command+N)。
2、在顶部编辑器标签中,将未命名文件重命名为 index.html,按回车确认。
3、在新打开的编辑窗口中输入以下内容:
Hello, VSCode!
三、保存文件并验证路径
VSCode 默认不会自动保存文件,需显式执行保存操作,否则浏览器无法读取未写入磁盘的内容。同时需确认文件实际落于当前工作区目录内,避免误存至其他位置。
1、按下快捷键 Command+S,观察左上角文件标签是否消失星号(*),表示已保存。
2、右键资源管理器中的 index.html,选择“在访达中显示”,确认其位于 my-first-project 文件夹内部。
四、在浏览器中预览页面
HTML 文件需通过浏览器解析渲染,VSCode 不内置浏览器,但可通过外部程序打开。确保使用最新稳定版浏览器以获得一致的 DOM 行为。
1、右键资源管理器中的 index.html,选择“在外部应用程序中打开”。
2、若系统弹出应用选择列表,点击 Safari 图标;若默认已设 Safari,则直接双击文件即可启动。
3、浏览器窗口标题栏应显示 我的第一个页面,页面中央呈现 Hello, VSCode! 字样。










