一、开发具

uni-app 官方推荐使用HBuilderX来开发uni-app类型的项目。主要好处：

模板丰富
完善的智能提示
一键运行

当然，你依然可以根据自的喜好，选择使用 VS Code、Sublime、记事本... 等自己喜欢的编辑器!

二、下载 HBuilderX

访问 HBuilderx的官网首页 https://www.dcloud.io/hbuilderx.html

点击首页的DOWNLOAD按钮

选择下载正式版 ->App 开发版

三、安装 HBuilderX

1.将下载的 zip包进行解压缩
2.将解压之后的文件夹，存放到纯英文的目录中 (且不能包含括号等特殊字符）
3.双击 HBuilderx.exe 即可启动 HBuilderX

也可以选择HBuilderx.exe，右键创建快捷方式，把快捷方式剪切到桌面即可双击快速打开HBuilderx

image.png

四、HBuilderX安装 scss/sass 编译

为了方便编写样式(例如: <style lang="scss"></style> )，建议安装 scss/sass 编译插件。插件下载地址:
https://ext.dcloud.net.cn/plugin?name=compile-node-sass

进入插件下载页面之后，点击右上角的使用HBuilder 导入插件按进行自动安装，截图如下：

image.png

五、HBuilderX 快捷键方案切换

操作步骤: 工具->预设快捷键方案切换>VS Code

image.png

六、修改编辑器的基本设置

操作步骤:工具->设置->打开settings.json 按需进行配置

常用--源码视图

{
    "editor.colorScheme": "Default",
    "editor.fontSize": 12,
    "editor.fontFamily": "Consolas",
    "editor.fontFmyCHS": "微软雅黑 Light",
    "editor.insertSpaces": true,
    "editor.lineHeight": "1.5",
    "editor.minimap.enabled": false,
    "editor.mouseWheelZoom": true,
    "editor.onlyHighlightWord": false,
    "editor.tabSize": 2,
    "editor.wordWrap": true,
    "editor.iconTheme": "vs-seti",
    "editor.codeassist.px2rem.enabel": false,
    "editor.codeassist.px2upx.enabel": false
}