HBuilderX 开发 Uniapp 必装的 5 个插件

在 HBuilderX 中开发 UniApp 时，以下 5 个插件能显著提升开发效率，覆盖代码提示、格式化和图标库三大核心需求：

1. UniApp 代码片段增强插件

提供全面的 UniApp API 智能提示，包括 vue/nvue 模板语法、uni 对象方法、生命周期钩子等。安装后自动补全常用代码结构（如 uni.request、页面跳转等），大幅减少拼写错误。

2. Prettier 代码格式化工具

• 支持一键格式化 js/ts/json/css/scss/vue 文件
• 自动对齐缩进、统一引号风格、优化对象换行
• 配置示例：

  "prettier.singleQuote": true,
  "prettier.semi": false
  

3. Iconfont 图标库插件

直接集成阿里矢量图标库：

• 搜索 600 万+图标，实时预览
• 自动生成 unicode/font-class/symbol 三种引入代码
• 支持自定义颜色/尺寸，点击即插入项目

4. ESLint 语法检查器

实时检测代码质量：

• 拦截潜在错误（如未定义变量）
• 强制遵守 JavaScript Standard Style 规范
• 自动修复基础语法问题（如缺少分号）

5. Vetur 扩展包

专为 Vue 生态强化：

• template/script/style 分区高亮
• scoped CSS 智能提示
• Vue3 Composition API 自动补全
• 支持 Pinia 状态管理语法提示

安装方式：在 HBuilderX 插件市场搜索插件名称 → 点击安装 → 重启 IDE 生效。
组合效果：

• 编码阶段：代码片段 + Vetur 提供实时提示
• 调试阶段：ESLint 即时纠错
• 收尾阶段：Prettier 统一风格 + Iconfont 插入图标