VSCode新手入门：下载安装、环境配置到运行Python与HTML

简介面向编程初学者与开发环境搭建新手的VSCode下载与安装使用教程以PDF格式呈现。教程从编辑器的基础介绍入手阐述其由微软开发、免费且跨平台的核心特性并给出官方网站下载地址以及不同系统下的版本选择建议。安装环节按步骤拆解了同意用户协议、指定安装路径、添加到开始菜单、按需勾选功能选项、确认后开始安装等关键流程帮助读者避开常见操作误区。使用阶段重点演示了安装中文语言包并切换界面语言、通过快捷方式访问全部内容、按需安装扩展插件、选择项目文件夹打开代码等实用操作同时说明了新建项目的具体方法例如创建HTML文件。整份资料仅包含1个PDF文件压缩包整体大小约2.12MB内容精炼适合在电脑或手机上随时翻阅。目前已有1482人学习使用适合希望快速上手编辑器基础操作、配置轻量开发环境或准备进入编程学习路径的入门用户。1. 这份教程解决的不只是下载安装VSCode 入门的关键在环境认知第一次打开 VSCode很多人会把它当成一个“编辑器”下载完、汉化完就急着写代码。但真正拖住新手的往往不是界面而是对下载入口、安装选项、插件和环境配置这些细节缺乏完整认知。这篇教程把官方下载、逐项安装、中文语言包、项目文件夹和首次运行 HTML、Python 的全流程拆开讲重点标注出哪些选项动不得、哪些插件真的值得装。适合完全零基础的新手照着一步步走也适合已经下载过但卡在“运行没反应”“终端不认识 code 命令”的从业者回查。2. 官网下载与安装细节版本选择、路径与勾选项2.1 官方下载地址与版本矩阵Windows 用户怎么选VSCode 的官网下载地址是 code.visualstudio.com这个域名和官方文档指向一致。打开页面后首页正中间通常会显示当前系统的下载按钮例如 “Download for Windows”。如果你用的不是 Windows点击旁边的 “Download” 进入版本列表可以看到 macOS、Linux 各发行版以及 Windows 下的多个变体。需要说明的是官网判断系统环境靠的是浏览器的 UA 和平台信息所以内网环境或镜像站可能显示不完全优先以官网实际显示为准。Windows 用户需要注意的第二个选择是下载体积和安装方式。官网提供 User Installer 和 System Installer 两种 exe还有免安装的 .zip 版本。User Installer 默认安装到当前用户的 AppData 目录不需要管理员权限后续更新也由当前用户管理System Installer 会安装到 Program Files 目录适合公司统一部署或电脑有多个账户共用的场景。对个人学习来说User Installer 是最省事的。如果后续要装 C/C、Python 扩展其实对安装方式不敏感但对命令行工具链有要求。这里给出一个版本选型表格方便对照场景推荐版本理由个人日常写代码User Setup x64免管理员权限升级方便公司多账户或批量部署System Setup x64安装到系统目录便于统一管理不想写入注册表.zip 免安装版解压即用但要手动配置 PATH 和关联ARM 架构的新笔记本ARM64 对应版本原生性能更好模拟版偶尔有兼容问题确认版本后下载的 exe 文件名会形如 VSCodeUserSetup-x64-1.9x.x.exe。这里要留意的是 x64 代表 64 位如果你的系统是 Windows 10/11 的普通 x64 架构选它就对了。32 位系统已经越来越少官网默认也不再推荐。2.2 安装向导五步每个勾选项都影响后续使用双击下载好的 exe首先看到协议页。第一项就是“我同意此协议”直接勾选同意然后点击“下一步”。这一个动作没有太多技术含量但要注意协议文本里提到的许可证类型是免费软件与商业授权的区别在于不能作为商业产品的一部分分发。个人开发者无需担心。第二步是选择安装位置。默认路径形如 C:\Users\你的用户名\AppData\Local\Programs\Microsoft VS Code如果选择 System Installer 则是 C:\Program Files\Microsoft VS Code。原文里“点击浏览选择安装路径”说的就是这一步。我一般会保留默认路径因为 VSCode 本体不到 300MB后续插件会单独存放在 .vscode/extensions 目录不占安装目录空间。如果你确实要改路径唯一需要记住的坑是安装路径不要带中文也不要用空格过长的目录否则个别 C/C 工具链的调试器会解析不到路径。第三步是“添加到开始菜单文件夹”。默认会创建一个名为“Visual Studio Code”的快捷方式文件夹。除非正在做系统精简否则这一步保持默认即可。真正的关键在第四步的勾选区域。原文只写了“根据需要勾选”但这些勾选直接决定你后续能不能在终端里敲code命令打开工作区。我的建议是“将‘通过 Code 打开’操作添加到文件和目录上下文菜单”一定要勾这是你在文件夹右键快速进入 VSCode 的最直接方式。“将 Code 注册为受支持的文件类型的编辑器”可以勾不勾也不影响写代码。“添加到 PATH”一定保留否则后面code --version会直接报“不是内部或外部命令”。第五步是确认安装信息列表里会显示安装路径、开始菜单名称、附加任务等。确认无误后点击“安装”进度条走完就完成了。注意安装完成后会默认勾选“启动 Visual Studio Code”先不要急着关掉接着做下一轮的验证。2.3 安装完成后的第一轮验证打开 VSCode 后先看左下角齿轮图标旁边的版本号例如“1.94.2”。这个版本号在后续排查插件兼容性问题时非常有用出现异常时记录完整版本号可以快速判断是插件问题还是核心版本问题。接着按 Ctrl 打开集成终端输入code --version终端会输出三行信息主版本号、提交哈希和架构。如果输入后提示“code 不是内部或外部命令”说明第四步的“添加到 PATH”没有生效。不要慌张这是安装环节最常见的翻车场景之一。解决方法是打开系统环境变量编辑器在 Path 变量里手动追加 VSCode 的 bin 目录。User Installer 的默认路径是C:\Users\你的用户名\AppData\Local\Programs\Microsoft VS Code\binSystem Installer 则是C:\Program Files\Microsoft VS Code\bin。添加完记得重启终端。code --version顺便验证一下 Node.js 相关环境如果你后续要跑前端项目code命令可用之后用 npm 或 vite 的时候终端不会因为找不到code而打断工作流。这一步验证的意义在于把“安装完成”和“可被命令行调用”分开判断避免后面新建项目时出现明明装了却打不开目录的尴尬。3. 把界面变成中文语言包、快捷方式与工作区3.1 中文语言包的安装与重启机制安装完 VSCode 的第一件事对中文用户来说通常是汉化。原文里的“安装中文语言包并将显示语言改为中文点击安装并重启”对应的操作路径是左侧活动栏最底部有一个四方块图标点击进入扩展视图搜索框输入Chinese在结果列表里找到“Chinese (Simplified) Language Pack for Visual Studio Code”点击 Install。这里要解释清楚为什么要重启语言包本质上不是一个翻译文件而是一个插件负责覆盖 VSCode 核心代码里所有 UI 字符串。插件的加载时机在窗口启动时所以安装后必须点右下角提示的“Change Language and Restart”或手动重启窗口新语言才会生效。很多人点完 Install 发现界面没变原因就是没有重启而不是安装失败。如果你喜欢更可控的方式也可以用命令面板。按CtrlShiftP打开命令面板输入Configure Display Language选择 zh-cn。这条命令会生成一个locale.json文件内容类似{ locale: zh-cn }参数说明locale就是区域语言标识zh-cn 表示简体中文zh-tw 表示繁体中文en 表示英文。这个文件一旦创建会覆盖系统默认语言判断。它位于配置目录的User层打开后保存界面会立即提示重启。这条路径比搜索扩展更直观适合想精确控制语言的用户。3.2 从“浏览语言扩展”到常用插件按需安装原文里还有一句“点击浏览语言拓展可以按需安装语言插件”这句话对应的是扩展视图里的分类浏览。VSCode 的扩展市场非常庞大但对新手来说真正值得第一时间装的不超过五个。装多了不仅启动变慢还会因为插件之间的快捷键冲突而互相干扰。我的建议是先明确你的技术栈再决定装什么。如果写 Python装微软官方的 Python 扩展它包含 Pylance 类型检查、调试器和 Jupyter 支持一个搞定大部分需求。如果写 C/C装微软官方的 C/C Extension Pack它自带 IntelliSense、调试和格式化配合编译器就能跑起来。如果只是做网页装一个 Live Server 就能实时预览 HTML而 ESLint 和 Prettier 等代码规范工具等真正要写项目时再碰。这里给一张插件对照表方便按项目定位技术方向必装扩展备注PythonPython, Pylance官方套装选择解释器即可C/CC/C Extension Pack包含 clangd 时不要重复安装前端Live Server, ESLint, PrettierLive Server 端口默认 5500MarkdownMarkdown All in One预览、目录、快捷键丰富通用效率GitLens, Todo Tree看 Git 历史、标注 TODO注意安装扩展后VSCode 会为每个扩展生成独立的运行进程。插件装多了右下角的“输出”面板会持续刷插件日志这是正常现象但如果某个插件导致整个窗口卡死排查路径是进入恢复模式启动而不是一个个卸载。原文提到的“浏览语言拓展”实际上就是扩展视图顶部的分类入口点进去可以按语言过滤比如只看 Python、JavaScript 相关的扩展市场。3.3 调整我的设置找到 settings.json原文第五大步里有一句“优化设置点击调整我的设置”。具体来说VSCode 的配置入口在齿轮菜单里的“设置”快捷键Ctrl,。图形界面下可以搜索“editor.fontSize”这类配置项但更高效的方式是直接打开settings.json。在命令面板输入Open User Settings (JSON)你会看到一份用户级别的配置文件内容类似{ editor.fontSize: 16, editor.tabSize: 4, files.autoSave: onFocusChange, window.zoomLevel: 0 }参数说明editor.fontSize是编辑器字号单位是像素16 对多数屏幕比较舒适editor.tabSize是缩进空格数Python 项目建议 4files.autoSave设为onFocusChange表示光标离开文件时自动保存能减少CtrlS的依赖window.zoomLevel控制整个界面的缩放配合高分屏使用。这个配置文件是 VSCode 所有“玄学”问题的集中地。如果某个插件要求你再往里面加几行配置不要乱加先备份原文件再修改。我习惯每次改完配置后重启一次窗口确认没有语法错误。配置写错了VSCode 的右上角会弹红色提示显示 JSON 解析错误的大致位置按 F1 打开命令面板执行Developer: Reload Window可以重新加载配置。3.4 选择项目文件夹VSCode 的工作区逻辑把界面和基础插件搞定以后下一步是学会用文件夹的方式组织代码。原文“选择项目文件夹”这句话对应的是“文件”菜单里的“打开文件夹”。VSCode 没有传统 IDE 的“新建项目”向导它所有工程上下文都是围绕一个根目录建立的。你在系统里新建一个叫my-first-project的文件夹然后通过 VSCode 打开它这个文件夹里的所有文件就会被当作同一个工作区处理。工作区的好处在于插件可以在当前文件夹里创建.vscode目录存放该项目的专属配置比如调试用的launch.json、任务用的tasks.json、推荐扩展用的extensions.json。这些文件不会污染其他项目。打开文件夹后左侧的资源管理器会显示目录树新建文件时注意选中对应层级不然文件会跑到错误的位置。对于新手我建议先建三层基本结构src目录放源码、docs目录放文档、.vscode目录放配置。“访问所有内容只需要一个快捷方式”原文实际上指的是命令面板CtrlShiftP。所有操作都能在命令面板里搜索到包括打开设置、切换语言、安装扩展、运行命令。记住这个快捷键比记一百个菜单路径都值。4. 新建项目与首次运行代码从文件夹到 HTML 和 Python4.1 没有“新建项目”按钮用文件夹组织工程VSCode 没有像 Visual Studio 那样的“新建项目”弹窗所以新手首次使用时常常会迷惑。原文里明确写到“由于 vscode 没有新建项目所以只能手动新建文件夹导进去”。这里给出一个完整的命令行操作流程。打开系统终端输入mkdir -p ~/projects/vscode-demo code ~/projects/vscode-demo参数说明-p表示如果上级目录不存在则一次性创建多级目录~/projects/vscode-demo是项目路径你可以换成任何你想放代码的位置code命令是第二步安装了 PATH 之后才可用的命令作用是以 VSCode 打开指定目录。如果code命令没有生效退回桌面双击 VSCode再用文件菜单打开。打开后VSCode 窗口左下角会显示当前文件夹的名称顶部标题栏也会显示“vscode-demo”。使用文件夹方式打开最大的好处是搜索、Git、终端都会默认以这个根目录为基准不需要手动切路径。以后再想打开这个项目最直接的方式是在资源管理器里右键文件夹选择“通过 Code 打开”。4.2 写第一个 HTML 文件并实时预览项目文件夹准备好以后我们来创建一个真正的文件。在资源管理器里点击新建文件图标输入index.html。这个扩展名决定了 VSCode 按 HTML 语法高亮编辑器右上角会显示 HTML 标签的配色。复制下面这段入门代码!DOCTYPE html html langzh-CN head meta charsetUTF-8 title我的第一个页面/title /head body h1Hello VSCode/h1 /body /html代码说明!DOCTYPE html声明文档类型为 HTML5meta charsetUTF-8用来解决中文乱码问题没有这一行页面里的中文标题可能显示为问号h1是页面主标题。保存文件后想要预览实时效果推荐安装 Live Server 扩展。安装后在编辑区右键选择 Open with Live Server浏览器会自动打开http://127.0.0.1:5500。这个 5500 端口是 Live Server 的默认端口。它在本地起了一个微型静态服务器并且会监听文件变化每次CtrlS保存后浏览器自动刷新。相比直接双击 HTML 文件用这种服务器方式预览的好处是可以正确加载相对路径下的 JS 和 CSS 文件也更接近真实部署环境。4.3 配置 Python 解释器与运行脚本HTML 只能看到页面效果如果想跑一段真正的代码逻辑Python 是最适合入门的语言。前提是你的电脑已经安装了 Python 3.x 解释器安装 VSCode 时它并不会帮你装 Python。终端输入python --version确认版本python --version如果输出类似Python 3.12.1说明解释器已就绪。接下来在项目文件夹里新建hello.py写入print(hello vscode)运行方式有三种。最简单的点击右上角的播放按钮VSCode 会临时调用内置终端执行当前文件输出结果在“终端”面板里显示。第二种是在集成终端手动执行python hello.py第三种是按下F5启动调试器。第一次按 F5 时VSCode 会让你选择环境选 Python然后会生成.vscode/launch.json文件。这个 JSON 文件决定了调试器如何启动程序核心参数包括{ version: 0.2.0, configurations: [ { name: Python: 当前文件, type: python, request: launch, program: ${file}, console: integratedTerminal } ] }参数说明type必须保持 pythonprogram的值${file}是一个变量表示当前活动文件而非整个目录console设为 integratedTerminal会在集成终端输出不会弹额外的外部窗口。如果没有选择解释器按CtrlShiftP输入Python: Select Interpreter然后选择你安装的那个版本。这一步决定了补全、跳转、调试走的都是同一个 Python 环境很多“代码提示不工作”的问题根源就是这里没选对。5. 避坑指南新手常踩的五个坑5.1 安装阶段的三条血泪经验坑 1code命令无法识别。现象是安装时取消了“添加到 PATH”或者在第三方下载站下了绿色版之后在终端里输入code提示“不是内部或外部命令”。原因在于 VSCode 的可执行文件位于它的安装目录下的 bin 子目录操作系统不会主动去那里找程序。解决方法是打开系统环境变量设置在 Path 列表末尾追加C:\Users\你的用户名\AppData\Local\Programs\Microsoft VS Code\bin保存后重开终端。不要试图把整个安装目录放进 PATH那样会引入很多无关的可执行文件。坑 2中文语言包装了但不生效。现象是扩展列表里明明显示已安装界面仍然是英文。原因一般是安装完成后没有点重启或者系统语言区域设置不是中文导致 locale 判断失败。解决方法是先按CtrlShiftP执行Configure Display Language把值改成 zh-cn 并重启窗口。如果还是英文检查 VSCode 的安装版本是不是官方的国际化完整版部分第三方精简版会阉割语言文件。一句话先重启再查 locale最后考虑版本问题。坑 3安装时勾选了所有上下文菜单右键菜单变得又长又乱。现象是文件右键里除了“通过 Code 打开”还有“使用 Code 打开”“以编码方式打开”等一堆项目。原因是你把安装向导里几个勾选项都选了。解决方案是认准两个高频项目录右键菜单和“添加到 PATH”。其他选项如文件右键菜单项保持默认即可不必反复重装。5.2 环境配置阶段的两个常见翻车点坑 4Python 代码能写但点击运行报“未配置 Python 解释器”。现象是右上角运行按钮变成灰色或弹出红底错误提示。原因是没有安装 Python 扩展或者是装了扩展但没有执行过解释器选择。解决方法是先安装 Python 扩展然后按CtrlShiftP执行Python: Select Interpreter选到系统 Python 的路径。注意如果电脑上同时存在 Python 2 和 Python 3这里一定要选 3.x否则 Pylance 会报语法兼容问题。坑 5C/C 的 IntelliSense 不工作到处是绿色波浪线。现象是写#include stdio.h时没有代码提示跳转到定义没有反应。原因通常是 C/C 扩展没有 includePath也就是没告诉它系统头文件在哪个目录。解决方法是先确认你以文件夹方式打开了项目而不是单独打开某个 .cpp 文件然后打开命令面板执行C/C: Edit Configurations (JSON)在生成的c_cpp_properties.json里保证包含{ configurations: [ { name: Win32, includePath: [ ${workspaceFolder}/**, C:/Program Files (x86)/Microsoft Visual Studio/2022/BuildTools/VC/Tools/MSVC/** ], defines: [], compilerPath: C:/Program Files/Microsoft Visual Studio/2022/Community/VC/Tools/MSVC/14.38.33130/bin/Hostx64/x64/cl.exe } ], version: 4 }参数说明includePath数组里的每一项都是头文件搜索路径${workspaceFolder}/**表示项目自身所有子目录后面要手动追加你实际安装的编译器头文件目录。compilerPath指向编译器本身如果用的是 MinGW则改成mingw32-gcc.exe的完整路径。这个文件写对后波浪线会在两三秒内消失。这条经验来自我帮同事排查过无数次“代码跳转失灵”最后几乎全是编译器路径没配对。6. 进阶一点用命令面板和日志排查问题到了这一步你已经能完成 VSCode 的下载、安装、汉化、建项目和跑 Python。接下来最值得投资的一项技能是排错。VSCode 的排错入口并不在设置里而是集中在命令面板和“输出”面板。命令面板可以执行所有内部命令比如Developer: Reload Window、Developer: Toggle Developer Tools。当插件市场加载不出扩展时按下CtrlShiftP执行Developer: Toggle Developer Tools会打开类似浏览器的开发者工具Console 面板会直接显示网络请求失败的错误。另一个实用技巧是查看扩展的实时日志。菜单栏选择“帮助”→“切换开发人员工具”后输出面板里选择某个扩展作为过滤条件例如 “Python” 或 “C/C”你能看到它启动的 Python 解释器版本、连接的语言服务器地址以及任何语法错误。我把这一步当作“黑匣子”的钥匙几乎所有“插件明明装了却没效果”的问题最后都能在这里找到一条线索。比如编译器的路径错误、Python 解释器版本过低都会在日志里有红色报错。对于 C/C 用户来说还可以用C/C: Log Diagnostics命令生成一份诊断日志里面包含系统平台、编译器路径、代码页和活动文件的所有信息。解决完问题后可以把它作为临时信息保存方便对比前后配置。日常习惯上我每次安装新扩展后会顺手执行一次Developer: Reload Window确保扩展加载干净。这个动作看起来多余但对排查“为什么功能没有出现”的偶发问题特别有效。如果还想从官方渠道补充操作习惯打开欢迎页Help → Welcome里面收录了官方入门教程和常用快捷键说明这也是标题里提到的“观看教程”的真正入口。从那以后我遇到 VSCode 的任何诡异问题第一反应不再是卸载重装而是先看开发工具的控制台和输出面板。哪些插件加载失败、哪些路径配置重复被引用一分钟之内就能判断是插件冲突还是环境变量问题。这个习惯帮我少走了很多弯路也希望帮到你。本文还有配套的精品资源点击获取