vscode编辑器怎么写小程序代码

vs code 仅是文本编辑器，不提供小程序运行时或调试环境，需依赖微信开发者工具等官方ide构建运行；必须安装eslint、prettier、auto rename tag三款插件，严格遵循平台文件规范与编码要求。

vscode 编辑器本身不运行小程序，只写代码

VS Code 是个纯文本编辑器，没有内置的小程序运行时或调试环境。它不能像微信开发者工具那样预览、编译、真机调试。你用它写代码没问题，但后续必须依赖对应平台的官方工具（比如微信开发者工具、支付宝 IDE、taro CLI 等）来构建和运行。

常见错误现象：npm run dev 报错找不到 miniprogram 目录、app.json: not found、保存后页面完全不刷新——这些问题基本都因为 VS Code 没配构建链路，不是编辑器的问题。

• 使用场景：适合习惯键盘操作、需要多项目并行、或配合 CLI 工具链（如 Taro、uni-app）开发的程序员
• 不要指望在 VS Code 里点一下就看到小程序界面；它只负责「写」和「提交」，不负责「跑」
• 如果项目是微信原生小程序，project.config.json 必须由微信开发者工具生成，VS Code 里改了也无效

必须装的插件只有三个：ESLint、Prettier、Auto Rename Tag

其他所谓“小程序插件”基本是噱头：没有标准 API、各平台差异大（微信/支付宝/百度/字节），插件无法统一支持语法校验或自动补全。强行装一堆，反而导致格式化冲突、保存卡顿、ctrl+space 弹出无用提示。

• ESLint：校验 JS/TS 逻辑，避免低级错误（比如 Page({}) 写成 page({})）
• Prettier：统一代码风格，尤其对 json 和 wxml 文件很重要（微信要求 app.json 严格双引号）
• Auto Rename Tag：改 <view></view> 开头就得同步改结尾，手动容易漏，这个插件真省事
• 别装 “WeChat MiniProgram” 类插件——它们不维护、不更新、不兼容新版基础库，还可能注入无效 snippet

文件路径和后缀名必须严格匹配平台规范

微信小程序要求 .wxml、.wxss、.js、.json 四件套同名同目录；Taro 则默认用 .tsx + .scss；uni-app 支持 .vue 单文件。VS Code 不检查这些，但构建工具会直接报错退出。

• 错误现象：Component is not found in path "pages/index/index" —— 实际是 VS Code 里把 index.wxml 错存为 index.html 或没后缀
• 微信原生项目中，app.js 不能叫 main.js，project.config.json 的 miniprogramRoot 字段必须指向含 app.js 的目录
• Taro 项目里，config/index.ts 中的 mini.projectName 要和微信开发者工具打开的项目路径一致，否则构建输出找不到入口

终端里跑 CLI 命令比点鼠标更可靠

VS Code 内置终端（Ctrl+`）是你真正干活的地方。所有构建、编译、模拟器启动，都应该走命令行，而不是依赖插件按钮。

• 微信原生：不用 CLI，但你要在终端进项目根目录，执行 npx miniprogram-compiler --watch（需额外装）意义不大，不如直接开微信开发者工具
• Taro：用 yarn dev:weapp 启动监听，输出目录自动同步到微信开发者工具指定路径
• uni-app：npm run dev:mp-weixin，注意它默认输出到 dist/dev/mp-weixin，微信开发者工具要打开这个目录
• 关键点：每次改完代码，别急着切窗口，先看终端有没有 Compiled successfully 或 Waiting for file change...，没这句说明根本没生效

最常被忽略的是：VS Code 的文件编码必须是 UTF-8 无 bom。一旦用系统记事本改过 app.json，再用 VS Code 打开，可能表面正常，实际构建时报 JSON parse Error: unexpected Token。遇到这种问题，先右下角点编码，选 Reopen with Encoding → UTF-8，再另存为。