VS Code 入门指南
一、 第一步:下载与安装 VS Code
官方下载
访问 VS Code 官方网站:https://code.visualstudio.com/,网站会自动识别你的操作系统(Windows/Mac/Linux),点击「Download」下载对应安装包即可(推荐下载稳定版 Stable Build)。
安装步骤(以 Windows 为例,Mac 类似)
双击下载的
.exe安装包,同意许可协议,点击「下一步」。自定义安装路径(建议不要安装在 C 盘系统目录,如
D:\Software\Microsoft VS Code)。勾选关键附加任务(新手建议全选):
「创建桌面快捷方式」
「将 VS Code 添加到 PATH」(最重要,方便后续终端调用)
「支持打开文件 / 文件夹」
点击「安装」,等待几分钟完成后,勾选「运行 Visual Studio Code」,点击「完成」启动软件。
二、 核心配置:汉化(新手必备)
刚安装的 VS Code 是英文界面,按之前教你的方法汉化,步骤回顾:
打开 VS Code,按下
Ctrl+Shift+X(Mac 是Cmd+Shift+X)打开「扩展市场」。在搜索框输入
Chinese,找到官方发布的「Chinese (Simplified) (简体中文)」(发布者为 Microsoft)。点击「安装」,安装完成后重启 VS Code,界面自动切换为简体中文。
三、 VS Code 核心界面认识(新手必看)
启动并汉化后,先熟悉 VS Code 的界面布局,避免后续操作找不到功能入口:
左侧边栏(核心功能入口,从上到下)
「资源管理器」:管理项目文件夹、代码文件(最常用,图标是文件夹)。
「搜索」:搜索项目内的文本、文件名(图标是放大镜)。
「扩展」:安装 / 卸载 / 管理插件(图标是四个小方块)。
「运行和调试」:调试代码(图标是播放 + 虫子)。
「终端」:内置终端,可执行命令(无需额外打开 CMD/PowerShell)。
中间编辑区:编写代码的核心区域,支持多标签页同时打开(类似浏览器,可切换、关闭)。
顶部菜单栏:文件、编辑、查看等功能(大部分功能都有快捷键对应,新手后期可熟悉)。
底部状态栏:显示当前编辑文件的语言、编码、分支、错误提示等信息。
四、 新手核心操作(高频使用)
1. 打开 / 创建文件 / 文件夹
创建文件:点击左侧「资源管理器」→ 点击「打开文件夹」(先选择一个空文件夹作为项目目录)→ 右键点击编辑区空白处 → 「新建文件」→ 输入文件名(如
test.py、index.html),后缀名决定文件类型。创建文件夹:在资源管理器中右键 → 「新建文件夹」→ 输入文件夹名称。
保存文件:
Ctrl+S(MacCmd+S),首次保存需选择保存路径;开启「自动保存」(文件 → 自动保存),避免忘记保存丢失代码。
2. 代码编辑基础技巧(提升效率)
换行 / 缩进:Enter 键换行,Tab 键缩进(VS Code 会自动根据语言补全缩进,如 Python 缩进 4 个空格)。
注释代码:
单行注释:
Ctrl+/(MacCmd+/),快速给当前行添加 / 取消注释(Python 是#,JavaScript 是//)。多行注释:选中多行代码 → 按下
Ctrl+/,或手动输入块注释(如 Python""" """,HTML<!-- -->)。复制 / 剪切 / 粘贴:和普通软件一致,
Ctrl+C/Ctrl+X/Ctrl+V,额外技巧:Ctrl+Shift+V可格式化粘贴内容。查找 / 替换:
查找:
Ctrl+F(MacCmd+F),在编辑区底部弹出搜索框,输入要查找的内容。替换:
Ctrl+H(MacCmd+H),输入查找内容和替换内容,可单条替换或全部替换。
3. 切换编程语言(语法高亮生效)
VS Code 会根据文件后缀名自动识别编程语言,若未自动识别:
点击底部状态栏的「纯文本」(或当前语言名称)→ 在弹出的列表中选择对应语言(如 Python、HTML)。
语法高亮生效后,代码会按关键字、注释、字符串等显示不同颜色,方便阅读和排错。
4. 内置终端使用(无需额外打开 CMD)
打开终端:`Ctrl+``(反引号,位于键盘 Tab 键上方),或「终端 → 新建终端」。
功能:可直接在终端中执行命令(如
python test.py运行 Python 脚本、npm install安装依赖),终端目录默认对应当前打开的项目文件夹,无需手动切换路径。关闭终端:点击终端标签页的「×」,或输入
exit命令。
五、 新手必备实用插件(提升开发体验)
VS Code 本身功能简洁,强大之处在于丰富的插件生态,推荐几款新手必装插件,安装方法均为:Ctrl+Shift+X 搜索插件名称 → 点击安装 → 重启 VS Code 生效。
中文语言包:
Chinese (Simplified) (简体中文),已详述,新手必备。代码格式化插件:
Prettier - Code formatter,自动格式化代码,让代码排版整洁统一,快捷键Shift+Alt+F(MacShift+Option+F)快速格式化当前文件。语法检查插件:
ESLint(针对 JavaScript/TypeScript)、Pylint(针对 Python),实时检测代码语法错误,在编辑区标注错误提示,帮助新手规避低级语法问题。文件图标插件:
Material Icon Theme,给不同类型的文件 / 文件夹添加美观的图标,方便快速识别文件类型(如 Python 文件显示蛇形图标,HTML 文件显示网页图标)。自动补全插件:
Auto Rename Tag(针对 HTML/XML),修改开始标签时,结束标签自动同步修改,避免手动修改出错;Path Intellisense,自动补全文件路径,方便引入其他文件。
六、 新手避坑与实用小技巧
快捷键记忆(优先记高频)
Ctrl+Shift+X:打开扩展市场Ctrl+S:保存文件Ctrl+/:单行注释Shift+Alt+F:格式化代码Ctrl+Shift+P:打开命令面板(可执行所有 VS Code 功能,忘记菜单时可用)
避免乱码:默认编码为 UTF-8,新手不要修改,保存文件时选择 UTF-8 编码,可避免中文乱码问题。
恢复默认设置:若误改配置导致异常,可通过「文件 → 首选项 → 设置 → 右上角「打开设置(JSON)」→ 删除自定义配置 → 重启 VS Code」恢复默认。
更新 VS Code:VS Code 会自动提示更新,也可手动通过「帮助 → 检查更新」升级,保持最新版本可获得更好的体验和安全修复。
总结
VS Code 入门核心流程:下载安装→汉化→熟悉界面→掌握核心编辑操作→安装实用插件,按步骤操作即可快速上手。
新手无需追求掌握所有功能,先熟练「文件管理→代码编辑→格式化→终端使用」这四大核心,满足日常开发需求。
插件无需安装过多,按需安装新手必备的 5 款即可,过多插件会占用资源,导致 VS Code 卡顿。
后续进阶可学习「自定义配置→调试代码→搭建开发环境」,逐步提升使用效率。