一、 第一步:下载与安装 VS Code

  1. 官方下载

    访问 VS Code 官方网站:https://code.visualstudio.com/,网站会自动识别你的操作系统(Windows/Mac/Linux),点击「Download」下载对应安装包即可(推荐下载稳定版 Stable Build)。

  2. 安装步骤(以 Windows 为例,Mac 类似)

    • 双击下载的 .exe 安装包,同意许可协议,点击「下一步」。

    • 自定义安装路径(建议不要安装在 C 盘系统目录,如 D:\Software\Microsoft VS Code)。

    • 勾选关键附加任务(新手建议全选):

      • 「创建桌面快捷方式」

      • 「将 VS Code 添加到 PATH」(最重要,方便后续终端调用)

      • 「支持打开文件 / 文件夹」

    • 点击「安装」,等待几分钟完成后,勾选「运行 Visual Studio Code」,点击「完成」启动软件。

二、 核心配置:汉化(新手必备)

刚安装的 VS Code 是英文界面,按之前教你的方法汉化,步骤回顾:

  1. 打开 VS Code,按下 Ctrl+Shift+X(Mac 是 Cmd+Shift+X)打开「扩展市场」。

  2. 在搜索框输入 Chinese,找到官方发布的「Chinese (Simplified) (简体中文)」(发布者为 Microsoft)。

  3. 点击「安装」,安装完成后重启 VS Code,界面自动切换为简体中文。

三、 VS Code 核心界面认识(新手必看)

启动并汉化后,先熟悉 VS Code 的界面布局,避免后续操作找不到功能入口:

  1. 左侧边栏(核心功能入口,从上到下)

    • 「资源管理器」:管理项目文件夹、代码文件(最常用,图标是文件夹)。

    • 「搜索」:搜索项目内的文本、文件名(图标是放大镜)。

    • 「扩展」:安装 / 卸载 / 管理插件(图标是四个小方块)。

    • 「运行和调试」:调试代码(图标是播放 + 虫子)。

    • 「终端」:内置终端,可执行命令(无需额外打开 CMD/PowerShell)。

  2. 中间编辑区:编写代码的核心区域,支持多标签页同时打开(类似浏览器,可切换、关闭)。

  3. 顶部菜单栏:文件、编辑、查看等功能(大部分功能都有快捷键对应,新手后期可熟悉)。

  4. 底部状态栏:显示当前编辑文件的语言、编码、分支、错误提示等信息。

四、 新手核心操作(高频使用)

1. 打开 / 创建文件 / 文件夹

  • 创建文件:点击左侧「资源管理器」→ 点击「打开文件夹」(先选择一个空文件夹作为项目目录)→ 右键点击编辑区空白处 → 「新建文件」→ 输入文件名(如 test.pyindex.html),后缀名决定文件类型。

  • 创建文件夹:在资源管理器中右键 → 「新建文件夹」→ 输入文件夹名称。

  • 保存文件Ctrl+S(Mac Cmd+S),首次保存需选择保存路径;开启「自动保存」(文件 → 自动保存),避免忘记保存丢失代码。

2. 代码编辑基础技巧(提升效率)

  • 换行 / 缩进:Enter 键换行,Tab 键缩进(VS Code 会自动根据语言补全缩进,如 Python 缩进 4 个空格)。

  • 注释代码

  • 单行注释:Ctrl+/(Mac Cmd+/),快速给当前行添加 / 取消注释(Python 是 #,JavaScript 是 //)。

  • 多行注释:选中多行代码 → 按下 Ctrl+/,或手动输入块注释(如 Python """ """,HTML <!-- -->)。

  • 复制 / 剪切 / 粘贴:和普通软件一致,Ctrl+C/Ctrl+X/Ctrl+V,额外技巧:Ctrl+Shift+V 可格式化粘贴内容。

  • 查找 / 替换

  • 查找:Ctrl+F(Mac Cmd+F),在编辑区底部弹出搜索框,输入要查找的内容。

  • 替换:Ctrl+H(Mac Cmd+H),输入查找内容和替换内容,可单条替换或全部替换。

3. 切换编程语言(语法高亮生效)

VS Code 会根据文件后缀名自动识别编程语言,若未自动识别:

  • 点击底部状态栏的「纯文本」(或当前语言名称)→ 在弹出的列表中选择对应语言(如 Python、HTML)。

  • 语法高亮生效后,代码会按关键字、注释、字符串等显示不同颜色,方便阅读和排错。

4. 内置终端使用(无需额外打开 CMD)

  • 打开终端:`Ctrl+``(反引号,位于键盘 Tab 键上方),或「终端 → 新建终端」。

  • 功能:可直接在终端中执行命令(如 python test.py 运行 Python 脚本、npm install 安装依赖),终端目录默认对应当前打开的项目文件夹,无需手动切换路径。

  • 关闭终端:点击终端标签页的「×」,或输入 exit 命令。

五、 新手必备实用插件(提升开发体验)

VS Code 本身功能简洁,强大之处在于丰富的插件生态,推荐几款新手必装插件,安装方法均为:Ctrl+Shift+X 搜索插件名称 → 点击安装 → 重启 VS Code 生效。

  1. 中文语言包Chinese (Simplified) (简体中文),已详述,新手必备。

  2. 代码格式化插件Prettier - Code formatter,自动格式化代码,让代码排版整洁统一,快捷键 Shift+Alt+F(Mac Shift+Option+F)快速格式化当前文件。

  3. 语法检查插件ESLint(针对 JavaScript/TypeScript)、Pylint(针对 Python),实时检测代码语法错误,在编辑区标注错误提示,帮助新手规避低级语法问题。

  4. 文件图标插件Material Icon Theme,给不同类型的文件 / 文件夹添加美观的图标,方便快速识别文件类型(如 Python 文件显示蛇形图标,HTML 文件显示网页图标)。

  5. 自动补全插件Auto Rename Tag(针对 HTML/XML),修改开始标签时,结束标签自动同步修改,避免手动修改出错;Path Intellisense,自动补全文件路径,方便引入其他文件。

六、 新手避坑与实用小技巧

  1. 快捷键记忆(优先记高频)

    • Ctrl+Shift+X:打开扩展市场

    • Ctrl+S:保存文件

    • Ctrl+/:单行注释

    • Shift+Alt+F:格式化代码

    • Ctrl+Shift+P:打开命令面板(可执行所有 VS Code 功能,忘记菜单时可用)

  2. 避免乱码:默认编码为 UTF-8,新手不要修改,保存文件时选择 UTF-8 编码,可避免中文乱码问题。

  3. 恢复默认设置:若误改配置导致异常,可通过「文件 → 首选项 → 设置 → 右上角「打开设置(JSON)」→ 删除自定义配置 → 重启 VS Code」恢复默认。

  4. 更新 VS Code:VS Code 会自动提示更新,也可手动通过「帮助 → 检查更新」升级,保持最新版本可获得更好的体验和安全修复。

总结

  1. VS Code 入门核心流程:下载安装→汉化→熟悉界面→掌握核心编辑操作→安装实用插件,按步骤操作即可快速上手。

  2. 新手无需追求掌握所有功能,先熟练「文件管理→代码编辑→格式化→终端使用」这四大核心,满足日常开发需求。

  3. 插件无需安装过多,按需安装新手必备的 5 款即可,过多插件会占用资源,导致 VS Code 卡顿。

  4. 后续进阶可学习「自定义配置→调试代码→搭建开发环境」,逐步提升使用效率。