快应用 代码编辑预览

2020-08-08 15:14 更新

通过本节,你将学会:

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 快应用开发工具


以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号