vscode开发微信小程序

1.2 运行小程序

打开小程序开发者工具后选择导入小程序项目，然后导入刚刚拉取下来的代码，还要把 AppID 更换成同学位各自的。

::: tip 提示: 如果到企业里做开发时，这里的 AppID 要使用公司申请好的，然后联系团队负责人把你添加成为开发者。 :::

1.3 熟悉环境

安装项目的依赖，当前需要安装的主要依赖是 Vant:

npm install

重点注意的是 project.config.js 中的几个配置：

{
  "miniprogramRoot": "src/",
  "setting": {
    "useCompilerPlugins": ["sass"],
    "packNpmManually": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./src"
      }
    ],
  }
}

• miniprogramRoot 享+社区项目的根目录为 src

• setting.useCompilerPlugins 启用了 sass 支持

• packNpmRelationList 指定了 npm 构建时所需的 package.json 的位置以及构建后代码的生成位置

1.4 VSCode开发

VSCode 在编写代码方面比微信小程序更加方便，也更加符合大家的开发习惯，咱们在开发小程序时可以结合这两款工具，我们编写代码使用 VSCode，预览、调试、发布等使用小程序开发者工具。

在 VSCode 中无法原生支持 .wxml 文件的语法高亮及提示，

1. 需要安装一个插件: WXML - Language Service

1. 配置插件：

  // 小程序格式化
  "minapp-vscode.wxmlFormatter": "prettier", // 指定格式化工具
  "minapp-vscode.prettier": { // prettier 更多参考 https://prettier.io/docs/en/options.html
    "useTabs": false,
    "tabWidth": 2,
    "printWidth": 100,
    "singleQuote": false
  },
  "[wxml]": {
    "editor.defaultFormatter": "qiu8310.minapp-vscode"
  }

::: tip 提示: 完全使用小程序开发者工具是没有问题的，只是结合 VSCode 编写代码会更方便一些。 :::