前端开发

Appearance

HBuilderX ​

HBuilderX 是 DCloud 推出的一款 IDE，主要用于 uni-app 开发，以下是推荐的配置和使用规范

下载与安装 ​

前往 HBuilderX 官网 下载最新版本，推荐下载 正式版（App 开发版）。

必装插件 ​

在菜单栏 工具 > 插件安装 中安装以下插件：

  1. uni-app 编译（必装）：uni-app 项目编译支持
  2. scss/sass 编译（必装）：支持 scss/sass 样式预处理
  3. ESLint-js（推荐）：JavaScript 代码检查
  4. Prettier（推荐）：代码格式化
  5. uni-app App调试（推荐）：App 端真机调试

编辑器设置 ​

打开 工具 > 设置 进行以下配置：

json
{
  "editor.colorScheme": "Default",
  "editor.fontSize": 14,
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "editor.wordWrap": true,
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "prettier"
}

运行与调试 ​

运行到浏览器 ​

菜单栏 运行 > 运行到浏览器，选择对应的浏览器即可

运行到小程序模拟器 ​

  1. 在 工具 > 设置 > 运行配置 中配置对应小程序开发工具的安装路径
  2. 菜单栏 运行 > 运行到小程序模拟器，选择对应平台

运行到 App（真机调试） ​

  1. 手机通过 USB 连接电脑，开启 开发者模式 和 USB 调试
  2. 菜单栏 运行 > 运行到手机或模拟器，选择对应设备
  3. 首次运行需安装调试基座

注意

HBuilderX 主要用于 uni-app 项目开发，对于非 uni-app 项目，推荐使用 VS Code