代码编辑器详细配置 使用笔记（Vue/uni-app 小程序开发专用，2 选 1）

前置说明本笔记针对Vue 开发微信小程序的核心场景，提供 2 款主流编辑器的全流程详细配置，完全适配 uni-app 框架，新手可直接按优先级选择：新手首选、零配置开箱即用：HBuilderX（uni-app 官方专属 IDE）有前端基础、通用开发首选：Visual Studio Code（简称 VS Code）选项 1：Visual Studio Code（前端通用首选）一、基础认知 官方定义Visual Studio Code（简称 VS Code）是微软推出的免费、开源、跨平台的 AI 代码编辑器，是全球前端开发者的主流工具。它基于模块化设计，通过丰富的扩展插件实现全场景开发适配，原生支持 JavaScript/TypeScript/HTML/CSS，可通过插件完美兼容 Vue 语法、uni-app 框架与小程序开发，同时内置 AI 开发代理、集成终端、Git 版本控制等核心能力，满足从代码编写到编译发布的全流程开发需求。二、针对 Vue/uni-app 小程序开发的核心用途提供 Vue 语法的高亮、智能提示、语法校验，完美兼容 Vue2/Vue3 不同版本的开发规范通过插件实现 uni-app 框架的代码补全、API 提示、代码片段快速生成，大幅降低小程序开发的记忆成本内置集成终端，可直接执行 npm 依赖安装、项目启动、编译打包等命令，无需切换工具对接微信开发者工具，实现代码一键编译、真机预览、调试查错，打通小程序开发全流程内置 Git 版本控制，支持代码提交、回滚、分支管理，同时可通过配置同步实现多设备开发设置统一支持 AI 代理开发，可通过 Copilot 等插件实现代码自动生成、重构、bug 修复，提升开发效率三、官方下载地址官网首页：https://code.visualstudio.com/官网会自动识别你的操作系统（Windows/macOS/Linux），匹配对应的稳定版安装包，无需手动选择系统版本四、超详细安装步骤（新手零出错版）1. Windows 系统完整安装步骤打开官网，点击「Download for Windows」下载稳定版安装包（.exe格式）双击安装包，进入安装向导，点击「我同意此协议」，进入下一步选择安装路径：路径禁止包含中文、空格、特殊符号，可使用默认路径，或自定义纯英文路径（如D:\VS Code）附加任务环节（新手必按以下配置勾选，避免后续踩坑）：✅ 勾选「创建桌面快捷方式」✅ 勾选「将 “通过 Code 打开” 操作添加到 Windows 资源管理器文件上下文菜单」✅ 勾选「将 “通过 Code 打开” 操作添加到 Windows 资源管理器目录上下文菜单」✅ 勾选「将 Code 注册为受支持的文件类型的编辑器」✅ 勾选「添加到 PATH（重启后生效）」（核心必勾，自动配置系统环境变量）点击「下一步」，再点击「安装」，等待安装完成，最后点击「完成」结束安装安装完成后，可双击桌面快捷方式打开，验证是否能正常启动2. macOS 系统完整安装步骤官网下载对应 macOS 的稳定版安装包（.zip格式）解压下载的压缩包，将解压后的「Visual Studio Code.app」拖拽到「应用程序」文件夹中打开启动台，找到 VS Code 图标，点击即可启动首次启动时，若系统提示 “无法打开”，需打开「系统设置 - 隐私与安全性」，下滑找到对应的允许选项，点击「仍要打开」即可环境变量配置：打开 VS Code，使用快捷键Command + Shift + P调出命令面板，输入Shell Command: Install 'code' command in PATH，按下回车，输入电脑密码即可完成终端命令配置，后续可在终端直接通过code .命令打开当前文件夹五、核心优势 特性（结合官方能力）全语言原生支持：内置支持 JavaScript、TypeScript、HTML、CSS、JSON 等前端核心语言，通过扩展可兼容几乎所有主流编程语言