uni-app 3.4.7版本后template和template里面的emmet无效

发布于 1周前 作者 htzhanglong 来自 Uni-App

uni-app 3.4.7版本后template和template里面的emmet无效

开发环境 版本号 项目创建方式
Windows win11 HbuilderX
### 操作步骤:
```html
<template>
div.vip-receive-cap
</template>

预期结果:

<template v-if="$store.state.logged">
<div class="cap">
</div>
</template>

实际结果:

<template>
div.vip-receive-cap
</template>

bug描述:

3.4.7后template和template里面的emmet按tab键无效!!


5 回复

HBuilderX Alpha已优化此功能。
alpha下载地址:https://www.dcloud.io/hbuilderx.html


大概什么时候进正式版?

回复 h***@163.com: 不确定

这么快解决了,超赞!

在 uni-app 3.4.7 版本之后,如果你发现 template 中的 Emmet 语法无效,可能是由于以下几个原因导致的:

1. 编辑器配置问题

  • 检查编辑器设置:确保你的编辑器(如 VSCode)已经启用了 Emmet 功能。在 VSCode 中,你可以通过以下步骤检查:
    1. 打开设置(Ctrl + ,Cmd + ,)。
    2. 搜索 Emmet
    3. 确保 Emmet: Enabled 选项已经勾选。
  • 检查语言模式:确保你的 template 部分的语言模式正确。在 VSCode 中,你可以通过右下角的语言模式切换器来确认当前文件的语言模式是否为 VueHTML

2. uni-app 配置问题

  • 检查 vue.config.js 配置:如果你在项目中使用了 vue.config.js,确保没有禁用或覆盖 Emmet 相关的配置。
  • 检查 manifest.json 配置:确保 manifest.json 中没有禁用或覆盖 Emmet 相关的配置。

3. 插件冲突

  • 检查插件冲突:某些插件可能会与 Emmet 功能冲突。尝试禁用其他插件,看看 Emmet 是否恢复正常。

4. 更新 uni-app 版本

  • 更新到最新版本:如果你使用的是 uni-app 3.4.7 之后的版本,尝试更新到最新版本,看看问题是否已经修复。

5. 手动触发 Emmet

  • 手动触发 Emmet:在 VSCode 中,你可以通过按下 Tab 键来手动触发 Emmet 扩展。如果 Emmet 语法正确,它应该会自动扩展。

6. 检查模板语法

  • 确保模板语法正确:确保你的 template 部分使用的是正确的 HTML 或 Vue 模板语法。Emmet 通常只在 HTML 或类 HTML 的上下文中有效。

7. 重启编辑器

  • 重启编辑器:有时候,编辑器可能需要重启才能应用新的配置或修复某些问题。

8. 检查项目依赖

  • 检查项目依赖:确保你的项目依赖(如 vuevue-loader 等)是最新的,并且没有与 Emmet 功能冲突的版本。

9. 自定义 Emmet 配置

  • 自定义 Emmet 配置:如果你需要自定义 Emmet 的配置,可以在 VSCode 的 settings.json 中添加或修改 Emmet 相关的配置。

10. 反馈给 uni-app 团队

  • 反馈问题:如果以上方法都无法解决问题,建议将问题反馈给 uni-app 团队,可能是某个版本引入了 bug。

示例:检查 VSCode 设置

{
  "emmet.includeLanguages": {
    "vue-html": "html",
    "vue": "html"
  },
  "emmet.triggerExpansionOnTab": true,
  "emmet.showSuggestionsAsSnippets": true
}
回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!