uni-app HBuilderX代码提示系统说明

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

uni-app HBuilderX代码提示系统说明

本帖文档已集成到: hx产品文档

HBuilderX的代码提示系统很庞大，支持多种语法提示模型。

内置语法库

  • web项目有内置的html、js、css语法库
  • App项目有内置的plus扩展语法库
  • uni-app项目有内置的uni-app语法库
  • 微信小程序、快应用等项目也有对应的内置语法库

js框架语法库（sdocml格式）

HBuilderX中，在可以输入js的文件，比如js、html等文件里，（不含vue、ts），底部状态栏有“语法提示库”，可以加载内置的框架语法库。

js框架语法库

其中node.js也是作为一种框架语法而存在的。
勾选相应js框架语法后，js区域即可提示相应语法（初次勾选需要延时几秒后才能使用）

该选择是项目级的，一旦勾选后，整个项目下可以写js的地方都会加载。
如果文件是单独打开，没有在HBuilderX左侧的项目管理器中，则无法使用本功能。

如果HBuilderX能检测到项目下有jquery或mui等常用框架，也会自动给这个项目挂载语法提示库。但有时可能检测不准，需要开发者手动引入。

d.ts

很多框架都内置了d.ts语法提示库。HBuilderX完整支持d.ts的语法提示。
如果项目下有某个框架的d.ts文件，HBuilderX则可以提示这个框架的语法提示。

jsdoc+

jsdoc是以注释方式声明方法、参数、属性，HBuilderX提供了经过扩展的jsdoc+，可实现强大的语法提示，详见：jsdoc+

jsdoc+

vue doc

vue组件开发者，如果想给组件使用者提供更好的使用方式，应该给组件写vue doc。
vue doc是一种类似jsdoc的方式，通过在注释里描述组件的方法、参数、属性。
详见：vue doc

vue doc

兼容vscode vetur插件中的vue规范

一些vue的组件库，已经按照vetur规范制作语法提示库，比如Element UI、Onsen UI、Bootstrap Vue等框架。
这些框架npm安装是在node_module下会自带一个json语法库，或在HBuilderX新建模板中选择element ui模板安装也会包含该库。有了这个语法库，就可以直接代码提示。如下图

兼容vscode vetur插件中的vue规范

代码块

HBuilderX支持自定义代码块，在菜单工具-代码块设置中可自行扩展。
代码块数据格式兼容vscode，并扩展了更多丰富设置。对于提高开发效率帮助很大。


Harmonyos Next教程
1 回复

在uni-app的开发过程中，HBuilderX作为一款专为uni-app设计的IDE（集成开发环境），提供了强大的代码提示系统，极大地提升了开发效率。以下是一些关于如何在HBuilderX中利用代码提示功能的代码案例和说明，帮助你更好地理解和使用这一功能。

1. 基础代码提示

HBuilderX在编写代码时会自动弹出提示框，显示可用的方法、属性或变量。例如，在编写Vue组件时：

<template>
  <view>
    <text>{{ message }}</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello uni-app'
    }
  },
  methods: {
    showMessage() {
      console.log(this.message); // 当输入this.时，HBuilderX会提示可用的data属性和methods方法
    }
  }
}
</script>

在上述代码中，当你输入this.时，HBuilderX会智能提示message属性以及showMessage方法。

2. API提示

uni-app提供了丰富的API，HBuilderX能够智能识别并提示这些API。例如，使用uni.request进行网络请求：

uni.request({
  url: 'https://api.example.com/data',
  method: 'GET',
  success: (res) => {
    console.log(res.data); // 输入res.时，HBuilderX会提示response对象的可用属性
  },
  fail: (err) => {
    console.error(err); // 输入err.时，HBuilderX会提示error对象的可用属性
  }
});

3. 自定义组件提示

在开发自定义组件时，HBuilderX也能提供代码提示。首先定义一个自定义组件：

<!-- MyComponent.vue -->
<template>
  <view>
    <text>{{ text }}</text>
  </view>
</template>

<script>
export default {
  props: {
    text: {
      type: String,
      default: 'Default Text'
    }
  }
}
</script>

然后在父组件中使用这个自定义组件：

<template>
  <view>
    <MyComponent :text="parentText"></MyComponent>
  </view>
</template>

<script>
import MyComponent from './MyComponent.vue';

export default {
  components: {
    MyComponent
  },
  data() {
    return {
      parentText: 'Hello from Parent'
    }
  }
}
</script>

在父组件中，当你输入<MyComponent时，HBuilderX会提示可用的props属性，如:text。

总结

HBuilderX的代码提示系统通过智能分析代码上下文，为开发者提供了丰富且准确的提示信息，极大地提升了开发效率和代码质量。上述案例展示了在基础代码、API调用以及自定义组件开发中的代码提示功能，希望能够帮助你更好地利用这一强大工具。

回到顶部