VSCode的“入门”教程指南

发布时间：2025-12-22 | 点击率：

VSCode是零基础用户编写、保存和运行代码的理想起点，涵盖下载安装、创建HTML文件、中文界面设置、高频快捷键及Prettier格式化扩展五大实操步骤。

如果您刚接触代码编辑器，希望快速上手并开始编写、保存和运行基础代码，则 VSCode 是一个理想起点。以下是针对零基础用户的实操入门路径：

本文运行环境：MacBook Air M2，macOS Sequoia。

一、下载与安装 VSCode

安装是使用 VSCode 的第一步，需确保获取官方正版安装包，并完成系统级集成，以便后续在终端或图形界面中稳定调用。

1、访问官网 https://code.visualstudio.com/ ，页面将自动识别 macOS 系统并显示绿色“Download for Mac”按钮。

2、点击下载 .zip 格式安装包，下载完成后解压，将 Visual Studio Code.app 拖入“应用程序”文件夹。

3、首次双击启动时，系统可能提示“无法验证开发者”，此时前往“系统设置 > 隐私与安全性”，点击“仍要打开”即可。

4、打开命令面板（Cmd + Shift + P），输入“shell command”，选择“Shell Command: Install 'code' command in PATH”，按回车执行。

5、关闭 VSCode，打开终端，输入 code --version，若返回版本号（如 1.96.0），说明 PATH 配置成功。

通过一个可立即预览的网页项目，建立对编辑器核心工作流的直观认知，涵盖新建文件、语法识别、保存与实时查看。

1、在 Finder 中新建空文件夹，命名为 my-first-web。

2、打开 VSCode，点击菜单栏“文件 > 打开文件夹”，选中该文件夹。

3、在资源管理器空白处右键，选择“新建文件”，命名为 index.html。

4、在编辑区输入英文感叹号 ! 后按 Tab 键，VSCode 将自动补全标准 HTML5 文档结构。

5、在

标签内添加一行文本：Hello from VSCode!
，然后按 Cmd + S 保存。

6、右键 index.html 文件，选择“Open with Live Server”，浏览器将自动打开并显示该页面。

本地化语言与基础视觉参数调整可显著降低初学者的认知负荷，提升操作确定性。

1、按下 Cmd + Shift + P 打开命令面板，输入“install extension”，回车进入扩展市场。

2、在搜索框中输入 Chinese (Simplified) Language Pack，点击“安装”按钮。

3、安装完成后，命令面板中再次输入“configure display language”，选择“zh-cn”，重启 VSCode 生效。

4、进入“代码 > 首选项 > 设置”（或按 Cmd + ,），在搜索栏输入 font size，将“Editor: Font Size”值改为 14。

5、在同一设置页搜索 auto save，勾选“files.autoSave”，下拉选择“afterDelay”以启用延时自动保存。

快捷键是 VSCode 效率的核心入口，优先掌握以下三个可覆盖 80% 日常基础操作场景。

1、按下 Cmd + P，松开后直接输入文件名（如 index.html），回车即可快速跳转到该文件。

2、按下 Cmd + `（反引号），立即在编辑器底部唤起集成终端，无需切换窗口即可执行命令。

3、将光标置于任意函数名或变量名上，按下 F12，可跳转至其定义位置（当前文件内有效）。

代码格式化是协作开发的基础要求，Prettier 可实现一键标准化缩进、空格与换行，避免手动调整格式引发争议。

1、再次调出命令面板（Cmd + Shift + P），输入“ext install prettier”，回车。

2、在扩展列表中找到“Prettier - Code formatter”，点击“安装”。

3、安装完毕后，在设置中搜索 format on save，勾选“Editor: Format On Save”。

4、新建一个 .js 文件，输入 const a=1;b =2，保存后观察代码自动变为 const a = 1; b = 2;。