通过本节，你将学会：

• ux 文件语法辅助
• hap-eslint 语法检查

ux文件语法辅助

了解开发工具中的对 ux 文件的语法辅助功能

---

1.ux 文件自动补全

• template 区域内补全
  • 标签补全，输入“<”开始补全。
  • 标签属性补全（通用属性和组件属性）。
  • 标签属性值补全（如果存在枚举值）。
  
  
• style 区域内补全
  • Less，Sass, css 属性补全。
  • Less，Sass, css 属性值补全。
  
• script 区域内补全
  • script 模版支持快应用模块、模块方法补全、console 等的快捷补全。
  
• 其他补全
  • 路径补全，包括引入组件的路径，引入媒体的路径。
  • class 值补全，根据 style 标签中定义的 class 值。
  

2.ux 文件定义跳转

• template 支持 class 和 id 的跳转、变量跳转、方法跳转、自定义组件跳转，Script 支持接口的跳转等。
• mac 下按住 command + 左键， windows 下 ctrl + 左键，光标将直接跳转到定义处

3.ux 文件链接跳转

• ux 文件链接跳转
• mac 下按住 command + 左键， windows 下 ctrl + 左键，光标将直接跳转到定义处
• 直接跳转至链接文件

4.ux 文件悬浮提示

• 标签悬浮提示
• 标签属性值提示
• style 样式提示
• script 方法，导入模块提示等。

注意：

• script 方法提示，需要安装快应用接口声明文件。
• 执行 npm install --save-dev https://github.com/vivoquickapp/quickapp-types 安装快应用接口声明文件，需要安装 git 工具才能正常安装，否则会提示安装失败。

hap-eslint 语法检查

了解如何配置 eslint，对 ux 文件的 js 代码和 js 文件进行实时的 js 语法检测。

---

1.如何开启 hap-eslint 功能

• 通过【命令面板】输入 hap-eslint，可以开启/关闭 eslint 功能，显示 hap-eslint 的日志打印，生成 eslint 配置文件，自动修复功能。
• 在 eslint 功能起效前需要配置三个依赖库，分别是

  npm install -D eslint
  npm install -D babel-eslint
  npm install -D eslint-plugin-hybrid

2.如何 enable 或 disable 某条规则

• 在 eslint 起效后，当 ux 文件出现语法错误的时候，在 IDE 的下方问题栏中会自动 eslint 的语法错误告警或者提示。
• 选中提示栏，点击右键会弹出一个对话框，点击上面的按钮可以在本文件中 disable 这条 eslint 规则。

3.如何使用命令行对整个项目进行校验

• 可以使用命令行，来检测本工程空间的所有 ux 文件的语法。输入：./node_modules/.bin/eslint src --ext=ux