3-1 玩转HBuilderX(主题、自定义配置、scss插件)
HBuilderX 下载与安装
在 DCloud 官网 下载 HBuilderX：
| 版本 | 说明 | 适用场景 |
|---|---|---|
| 标准版 | 不含 App 开发插件 | 小程序/H5 开发 |
| App 开发版 | 内置 App 开发所需插件 | 需要开发 App |
标准版后续可单独安装 App 开发插件，无需重新下载。
常用菜单功能
| 菜单 | 功能 |
|---|---|
| 运行 | 快速运行到浏览器、内置浏览器、手机模拟器、小程序 |
| 工具 -> 主题 | 切换编辑器主题（如酷黑风格） |
| 工具 -> 插件安装 | 管理编辑器插件 |
偏好设置（settings.json）
打开方式：macOS 使用 Command + ,，Windows 使用 Ctrl + ,。
偏好设置类似 VS Code 的 settings.json，支持 UI 视图和源码视图切换。
推荐配置项
{
"editor.fontSize": 14,
"editor.fontFamily": "Consolas",
"editor.insertSpaces": true,
"editor.tabSize": 2,
"editor.lineHeight": 1.5,
"editor.mouseWheelZoom": true,
"editor.wordWrap": true,
"editor.codeassist.px2rem.enabel": false,
"editor.codeassist.px2upx.enabel": false
}
json
| 配置项 | 说明 |
|---|---|
editor.fontSize | 编辑器字体大小 |
editor.fontFamily | 编辑器字体（推荐 Consolas） |
editor.insertSpaces | Tab 键插入空格而非制表符 |
editor.tabSize | Tab 代表的空格数 |
editor.lineHeight | 行高 |
editor.mouseWheelZoom | 鼠标中键缩放 |
editor.wordWrap | 自动换行 |
editor.codeassist.px2rem.enabel | 关闭 px 转 rem 提示 |
editor.codeassist.px2upx.enabel | 关闭 px 转 upx 提示 |
布尔值 true/false 不需要引号，字符串值需要引号。
集成 SCSS 编译
通过插件市场安装
- 访问 HBuilderX 插件市场，搜索 "sass"
- 点击 "使用 HBuilderX 导入插件"
- 登录 DCloud 账号（如无账号需先注册并激活邮箱）
- 确认导入，等待下载安装
安装后可在 工具 -> 插件安装 中查看。
CLI 项目中安装
npm install sass sass-loader@10 -D
bash
sass-loader 建议使用 10.x 版本以避免兼容性问题。
其他常用插件
| 插件 | 功能 |
|---|---|
| sass/scss 编译 | SCSS 语法编译 |
| eslint-js | JavaScript 语法校验 |
| eslint-plugin-vue | Vue 文件语法校验 |
| uni-app 编译器 | uni-app 核心编译功能 |
局限性：插件市场虽然数量多，但质量参差不齐，部分插件存在兼容性问题，且无法直接使用 VS Code 插件生态。
参考资源
- HBuilderX 官方下载 - 下载页面
- HBuilderX 插件市场 - 插件搜索与安装
- HBuilderX 配置文档 - 编辑器配置
↑