vscode uniapp 开发环境快速配置

uniapp安装的前提

现代化web开发避免不了H5以及混合应用开发，降本增效的必要， 想必hbuilderx的语法提示以及插件没有webstorm和vscode方便，让开发效率大大折扣，其实用vscode好处就是装多少插件都丝毫不卡顿，下面你也可以按照下面的方法尝试一下，由于最近电脑换了个系统，就重新配置下顺便记录下

1.直接使用vscode打开uiapp创建的项目目录即可

2.安装 uniapp相关插件

3.uniapp-run 配置，实现 命令uniapp-run 运行项目到小程序相关工具

基于HBuilderX的采用uniapp-cli命令的方式，进行编译且可以自动打开第三方开发者工具的VS Code插件

本项目适用于没有采用CLI命令的uniapp项目，原需要HBuilderX进行编译的

4. 如果第一次使用可以使用默认模版方式快速创建launch.json

launch.json 参数

{

"type": "uniapp-run",

"request": "launch",

"name": "Uniapp Run",

"platform": "mp-weixin"

}

type: 必须是 uniapp-run

request: 必须是: launch

name: 随便填写

platform: 编译成的平台，与uniapp基本保持一致: mp-weixin,mp-alipay,mp-baidu等

src: 项目路径，默认当前项目路径

compress: 是否运行时压缩

openDevTool: 是否自动打开第三方开发者工具

vueVersion: vue版本，目前支持2和3，默认2

命令方式

uniapp-run.run: 运行uniapp项目

uniapp-run.publish: 发布uniapp项目

5. 运行项目看看具体情况

6. 微信开发工具细节

• 分离后开发更方便

需要注意的情况

1. 默认情况json中存在注释的话编辑器中json会报错

1. 解决办法C:\Users\Administrator\AppData\Roaming\Code\User\settings.json

添加如下配置

"files.associations":{

        "pages.json":"jsonc",

        "manifest.json": "jsonc"

    },

我的完整配置

{

    "explorer.confirmDelete": false,

    "git.enableSmartCommit": true,

    "[vue]": {

        "editor.defaultFormatter": "octref.vetur"

    },

    "[javascript]": {

        "editor.defaultFormatter": "esbenp.prettier-vscode"

    },

    "editor.minimap.enabled": false,

    "window.zoomLevel": 1,

    "tabnine.experimentalAutoImports": true,

    "[css]": {

        "editor.defaultFormatter": "vscode.css-language-features"

    },

    "[typescript]": {

        "editor.defaultFormatter": "esbenp.prettier-vscode"

    },

    "workbench.colorTheme": "Visual Studio 2019 Light",

  "files.associations":{

        "pages.json":"jsonc",

        "manifest.json": "jsonc"

    },

    "uniapp-run.HBuilderX": "D:\\DEVP\\HBuilderX",

    "uniapp-run.wxDevtool": "D:\\gj\\WEIXINDEV\\微信web开发者工具"

}