通過(guò)本節(jié)，你將學(xué)會(huì)：

• ux 文件語(yǔ)法輔助
• hap-eslint 語(yǔ)法檢查

ux文件語(yǔ)法輔助

了解開發(fā)工具中的對(duì) ux 文件的語(yǔ)法輔助功能

1.ux 文件自動(dòng)補(bǔ)全

• template 區(qū)域內(nèi)補(bǔ)全
  • 標(biāo)簽補(bǔ)全，輸入“<”開始補(bǔ)全。
  • 標(biāo)簽屬性補(bǔ)全（通用屬性和組件屬性）。
  • 標(biāo)簽屬性值補(bǔ)全（如果存在枚舉值）。
  
  
• style 區(qū)域內(nèi)補(bǔ)全
  • Less，Sass, css 屬性補(bǔ)全。
  • Less，Sass, css 屬性值補(bǔ)全。
  
• script 區(qū)域內(nèi)補(bǔ)全
  • script 模版支持快應(yīng)用模塊、模塊方法補(bǔ)全、console 等的快捷補(bǔ)全。
  
• 其他補(bǔ)全
  • 路徑補(bǔ)全，包括引入組件的路徑，引入媒體的路徑。
  • class 值補(bǔ)全，根據(jù) style 標(biāo)簽中定義的 class 值。
  

2.ux 文件定義跳轉(zhuǎn)

• template 支持 class 和 id 的跳轉(zhuǎn)、變量跳轉(zhuǎn)、方法跳轉(zhuǎn)、自定義組件跳轉(zhuǎn)，Script 支持接口的跳轉(zhuǎn)等。
• mac 下按住 command + 左鍵， windows 下 ctrl + 左鍵，光標(biāo)將直接跳轉(zhuǎn)到定義處

3.ux 文件鏈接跳轉(zhuǎn)

• ux 文件鏈接跳轉(zhuǎn)
• mac 下按住 command + 左鍵， windows 下 ctrl + 左鍵，光標(biāo)將直接跳轉(zhuǎn)到定義處
• 直接跳轉(zhuǎn)至鏈接文件

4.ux 文件懸浮提示

• 標(biāo)簽懸浮提示
• 標(biāo)簽屬性值提示
• style 樣式提示
• script 方法，導(dǎo)入模塊提示等。

注意：

• script 方法提示，需要安裝快應(yīng)用接口聲明文件。
• 執(zhí)行 npm install --save-dev https://github.com/vivoquickapp/quickapp-types 安裝快應(yīng)用接口聲明文件，需要安裝 git 工具才能正常安裝，否則會(huì)提示安裝失敗。

hap-eslint 語(yǔ)法檢查

了解如何配置 eslint，對(duì) ux 文件的 js 代碼和 js 文件進(jìn)行實(shí)時(shí)的 js 語(yǔ)法檢測(cè)。

1.如何開啟 hap-eslint 功能

• 通過(guò)【命令面板】輸入 hap-eslint，可以開啟/關(guān)閉 eslint 功能，顯示 hap-eslint 的日志打印，生成 eslint 配置文件，自動(dòng)修復(fù)功能。
• 在 eslint 功能起效前需要配置三個(gè)依賴庫(kù)，分別是

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

2.如何 enable 或 disable 某條規(guī)則

• 在 eslint 起效后，當(dāng) ux 文件出現(xiàn)語(yǔ)法錯(cuò)誤的時(shí)候，在 IDE 的下方問題欄中會(huì)自動(dòng) eslint 的語(yǔ)法錯(cuò)誤告警或者提示。
• 選中提示欄，點(diǎn)擊右鍵會(huì)彈出一個(gè)對(duì)話框，點(diǎn)擊上面的按鈕可以在本文件中 disable 這條 eslint 規(guī)則。

3.如何使用命令行對(duì)整個(gè)項(xiàng)目進(jìn)行校驗(yàn)

• 可以使用命令行，來(lái)檢測(cè)本工程空間的所有 ux 文件的語(yǔ)法。輸入：./node_modules/.bin/eslint src --ext=ux