快應(yīng)用 代碼編輯預(yù)覽

通過本節(jié)，你將學(xué)會：

• ux 文件語法輔助
• hap-eslint 語法檢查

ux文件語法輔助

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

1.ux 文件自動補(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 工具才能正常安裝，否則會提示安裝失敗。

hap-eslint 語法檢查

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

1.如何開啟 hap-eslint 功能

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

  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)語法錯誤的時候，在 IDE 的下方問題欄中會自動 eslint 的語法錯誤告警或者提示。
• 選中提示欄，點(diǎn)擊右鍵會彈出一個對話框，點(diǎn)擊上面的按鈕可以在本文件中 disable 這條 eslint 規(guī)則。

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

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