掌握VS Code只需30分钟:先下载安装,熟悉界面布局;创建文件并用Node.js运行代码;安装ESLint、Prettier等插件提升效率;熟练使用Ctrl+P、Ctrl+/等快捷键,快速上手编程。

刚接触编程?别被复杂的工具吓到。VS Code(Visual Studio Code)是目前最受欢迎的代码编辑器之一,轻量、免费、功能强大,适合新手快速上手。哪怕你完全没接触过它,30分钟也能掌握核心操作,开始写代码。
1. 安装与界面初识
第一步很简单:去官网 code.visualstudio.com 下载 VS Code,支持 Windows、macOS 和 Linux。安装过程像普通软件一样,一路“下一步”就行。
打开后你会看到一个简洁的界面,主要区域包括:
-
• 左侧是活动栏(Activity Bar):可以切换资源管理器、搜索、Git 等功能
• 中间是编辑区:你写代码的地方
• 右侧可能有扩展面板或文件预览,根据操作变化
• 底部状态栏:显示当前文件编码、缩进方式、Git 分支等信息
点击左侧第一个图标(资源管理器),就能看到项目文件结构。新建文件夹作为你的练习项目,用 VS Code 打开它。
2. 创建文件并运行代码
右键资源管理器空白处 → “新建文件”,比如命名为 hello.js。输入一行简单的 JavaScript 代码:
console.log("Hello, VS Code!");保存文件(Ctrl + S 或 Cmd + S)。要运行它,你需要 Node.js 环境。如果还没装,去 nodejs.org 下载安装。
接着打开 VS Code 内置终端:菜单栏选择“终端”→“新建终端”,或者按 Ctrl + `(反引号)。在终端输入:
回车后看到输出结果,说明你已经成功运行了第一段代码!
3. 必备插件与基础设置
VS Code 的强大在于插件。点击左侧Extensions图标(四个方块拼成的图案),搜索并安装以下常用插件:
-
• ESLint:JavaScript 语法检查,帮你写出规范代码
• Prettier - Code formatter:自动格式化代码,保持整洁
• Bracket Pair Colorizer:给括号上色,方便匹配
• Live Server:HTML 文件本地预览,改完自动刷新
安装后重启或按提示启用。比如 Prettier,保存文件时会自动调整格式。你可以在设置里开启“format on save”让它生效。
4. 常用快捷键与效率技巧
记住几个高频快捷键,效率翻倍:
-
• Ctrl + P(Cmd + P):快速打开文件,输入名字就能搜
• Ctrl + /(Cmd + /):注释当前行
• Ctrl + 鼠标点击:跳转到函数或变量定义处
• F5:启动调试(需配置 launch.json,后期再学)
• Ctrl + B:隐藏/显示左侧边栏,腾出更多编辑空间
试试在代码中右键 → “在终端中打开”,直接定位到文件所在目录,省去手动 cd。
基本上就这些。不用一次性全记住,每天用几次,自然就熟了。VS Code 不复杂但容易忽略细节,关键是动手试。










