VS Code新手快速使用入门本文介绍了VSCode下载安装和基本使用方法。还提供了Python配置代码运行环境、HTML配置运行环境实用功能的操作指引帮助新手快速上手VSCode的基本开发环境配置与使用。Visual Studio Code简称 VS Code 是由微软开发的一款免费、开源的现代化代码编辑器。它于2015年推出目前已成为全球最流行的开发工具之一。它的核心定位是 “轻量级编辑器但可通过插件变身为强大的集成开发环境IDE” 。这意味着它启动迅速、界面简洁同时又能通过丰富的插件生态满足从Web前端到人工智能等各种开发需求。VSCode 的强大全靠插件。各语言专属插件如 Python、C、Go 等。注意VSCode 只是一个编辑器不是 IDE集成开发环境它默认不带Python 解释器、 C 编译器。VS Code的下载与安装使用VS Code可以参考以下步骤下载与安装访问官方网站下载https://code.visualstudio.com对应你操作系统的安装包。这里以Windows 用户为例介绍在安装过程中务必勾选有的可能已经默认勾选以下选项“创建桌面快捷方式”。“将‘通过 Code 打开’操作添加到 Windows 资源管理器文件上下文菜单”这样在文件上右键可以直接用 VSCode 打开。“将‘通过 Code 打开’操作添加到 Windows 资源管理器目录上下文菜单”在文件夹上右键直接打开。“添加到 PATH”配置环境变量方便在终端通过输入code命令打开软件。安装后打开截图界面汉化安装完成后点击左侧活动栏的“扩展”图标或按 CtrlShiftX搜索 “Chinese”安装“Chinese (Simplified) Language Pack”插件安装完成后右下角会弹出提示重启后界面即可变为中文。提示中文语言包只汉化 VSCode 原生界面第三方插件Prettier、GitLens 等的菜单、提示由插件作者决定没有汉化包就会保持英文属于正常现象无需处理。界面语言切换中英文CtrlShiftP 打开命令面板输入“配置显示语言/Configure Display language”选择 中文(简体)(zh-cn)/English(en) → 出现重启生效提示确认即可。基础设置点击左下角齿轮图标进入“设置”或按 Ctrl,可以调整“Auto Save”自动保存、缩进、字体大小等常用选项。【VSCode 内置 Git 面板VSCode 内置 Git 面板”指的就是 VS Code 左侧活动栏上的 “源代码管理”Source Control视图图标是一个分支形状。你可以通过点击它或按快捷键 CtrlShiftG 打开。它本质上是 Git 命令行操作的图形化界面让你通过点击按钮就能完成大部分 Git 操作不用手动输入命令。想在 VSCode 里用 Git 功能电脑必须先单独安装 Git 软件并需要云端库平台 比较麻烦在此不介绍了感兴趣的读者可参见git和GitHub、Gitee使用简要介绍 https://blog.csdn.net/cnds123/article/details/131377941新版 VS Code 内置官方 Copilot 面板界面右侧的”智能体构建“面板就是微软官方默认集成的 GitHub Copilot 聊天窗口登录账号GitHub 账号。在此不介绍了。】Python 开发环境配置配置VS Code进行Python或前端开发主要步骤要想运行 Python 代码前提是你的电脑上已经安装了 Python 环境去 python.org 下载并安装安装时务必勾选 “Add Python to PATH”。安装“Python” 插件打开VS Code进入扩展面板CtrlShiftX搜索并安装由微软官方发布的 “Python” 插件提供代码补全、调试、Linter语法检查等功能。等待安装完成需要一会儿。这张图片展示的是Visual Studio Code (VS Code) 编辑器的界面当前正处于配置 Python 开发环境的初始阶段。中间欢迎页面标题Get Started with Python Development开始 Python 开发。引导步骤·Open a Python project folder打开 Python 项目文件夹这是第一步目前处于选中状态。下方有一个蓝色的 Open Project Folder 按钮。【 打开项目文件夹项目文件夹是让 VS Code 从“文本编辑器”变身“智能开发环境”的关键一步。它不仅允许你管理单个程序更能容纳和组织多个程序、多种语言、多个子项目。VS Code 是基于文件夹管理的不建议直接打开单个文件。点击中间区域蓝色的 Open Project Folder 按钮。或者使用快捷键 Ctrl K 然后按 Ctrl O。在弹出的窗口中选择你电脑上存放代码的文件夹如果没有可以先新建一个空文件夹例如命名为 MyPythonProject。】·Create a Python file创建 Python 文件。【进入文件夹后在左侧边栏资源管理器的空白处右键选择 New File (新建文件)。输入文件名必须以 .py 结尾例如 hello.py。输入代码例如 print(Hello World)】·Select or create a Python environment选择或创建 Python 环境配置解释器。【选择解释器按快捷键 Ctrl Shift P 打开命令面板。输入 Python: Select Interpreter选择并回车。】·Run and debug your Python file运行和调试你的 Python 文件。【按下 F5 运行或点击右上角的运行三角形图标。】选择Python解释器按下 CtrlShiftP 打开命令面板输入并选择 “Python: Select Interpreter”从列表中选择你希望使用的Python解释器。Python 开发注意事项项目路径不能有中文、空格否则导入模块报错。缩进必须 4 个空格不要混用 Tab设置里搜索 Tab Size 设为 4。安装库失败检查是否激活虚拟环境、Python 解释器是否选对。不要打开单个 py 文件必须打开项目文件夹插件才能完整生效。两点说明1.运行代码的方法方法一最简单点击编辑器右上角的 “▶”运行按钮。VS Code 会自动打开下方终端并执行代码。方法二在代码区域右键选择“在终端中运行 Python 文件”。方法三直接在下方终端手动输入python demo.py2.Python 调试Debug在代码行号左侧单击打上一个红点断点。按F5选择 “Python File” 开始调试。代码会运行到断点处暂停F10 单步执行F11 进入函数此时可在左侧查看变量值等。HTML5 / 前端开发环境配置VS Code 原生对 HTML5、CSS3 和 JavaScript 支持极好。主要步骤安装核心插件Live Server必装前端神器。它能启动一个本地实时服务器当你保存 HTML/CSS 代码时浏览器会自动刷新无需手动刷新网页。Auto Rename Tag推荐修改 HTML 标签对的其中一个如把 div改成p另一个会自动同步修改。Prettier - Code formatter推荐一键美化 HTML/CSS/JS 代码排版。打开VS Code进入扩展面板CtrlShiftX搜索它们并安装新建 HTML5 标准页面新建文件夹网页项目必须打开文件夹不要单文件我这里使用MyHTML5Project文件夹新建文件 index.html文件内输入 ! 应是半角感叹号按下 Tab 键自动生成 HTML5 标准骨架!DOCTYPE htmlhtml langzh-CNheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title网页标题/title/headbody/body/html在body和 /body之间添加h1 测试 Hello/h1参见下图启动实时预览在代码区域右键选择 “Open with Live Server”。或者点击 VS Code 窗口右下角状态栏的 “Go Live” 按钮。【Live Server 已安装右下角看不到 Go Live的原因安装完成完全关闭 VS Code 再重新打开插件才生效——快捷键 CtrlShiftP → 输入 Reload Window 回车编辑器自动重启加载插件。】此时默认浏览器会自动打开该网页。修改 HTML 里的文字按 Ctrl S保存你会发现浏览器里的页面立刻自动更新了。HTML 开发注意事项所有网页资源图片、css、js使用相对路径不要本地绝对路径。项目文件夹不要包含中文、空格避免 Live Server 报错。写移动端页面必须保留 meta viewport 标签。不要直接双击 html 文件打开file:// 协议限制部分 JS 功能失效必须用 Live Server。OK
