vs code 使用typescript开发微信小程序应用typescript语言在VsCode编译器中编写小程序 ,

typescript语言在VsCode编译器中编写小程序

环境：vscode编译器、typescript后面以ts代替
前提：安装过微信开发者工具、全局的ts

全局安装typescript

npm install typescript -g
or
yarn global add typescript

安装完成后，查看版本号：

起步：vscode安装提示小程序、小程序文件高亮等插件

wechat-snippet

这个插件主要的功能就是代码辅助，代码片段自动完成，可以作为上个插件的补充。

vscode-wxml

这款插件用于将wxml代码进行高亮显示，并且提供代码格式化的功能，可将代码格式化为较易阅读的样式。

有了上面这几款插件，便可以开始高效地撸代码了。至于代码的调试以及效果的查看，当然还是得打开微信开发者工具。将编辑器隐藏，调试工具调到最大，快速找到元素的位置，修改样式，Ctrl+S，提交代码，一顿操作猛如虎。

创建小程序项目，不多说，唯一注意就是语言：ts

typings 主要是用来获取.d.ts文件。当typescript使用一个外部JavaScript库时,会需要这个文件，当然好多的编译器都用它来增加智能感知能力。

微信开发者工具设置 - 编辑器·

打开vscode启动控制台 -> run task - ts -> tsc: watch...

检测能否实时编译

`如果小程序开发者工具无法实时，可以重新打开项目试试

附赠，vue快捷代码片段配置：

{
  "Print to console": {
      "prefix": "vue",
      "body": [
          "<template>",
          "  <div class=\"container\">\n",
          "  </div>",
          "</template>\n",
          "<script>",
          "export default {",
          "  data() {",
          "    return {\n",
          "    }",
          "  },",
          "  components: {\n",
          "  }",
          "}",
          "</script>\n",
          "<style scoped lang=\"scss\">\n",
          "</style>",
          "$2"
      ],
      "description": "Log output to console"
  }
}