Iceworks 編碼輔助

通過(guò) Iceworks 進(jìn)行源碼鏈路開發(fā)時(shí)，會(huì)提供代碼補(bǔ)全、信息提示、文檔搜索、等一系列優(yōu)化提升您的開發(fā)體驗(yàn)。

代碼補(bǔ)全

Iceworks 會(huì)根據(jù)當(dāng)前的項(xiàng)目、當(dāng)前的文件以及光標(biāo)所在的位置，為我們提供一個(gè)建議列表。這個(gè)列表包含了在當(dāng)前光標(biāo)位置下我們可能會(huì)輸入的代碼。當(dāng)我們不斷地輸入字符，Iceworks 就會(huì)根據(jù)當(dāng)前輸入的字符，在這個(gè)列表進(jìn)行過(guò)濾。

比如輸入樣式字段和值時(shí)，Iceworks 會(huì)建議相關(guān)內(nèi)容：

當(dāng)我們找到了合適的選項(xiàng)后，按下 Tab 鍵或者回車鍵就可以將其補(bǔ)全。如果希望暫時(shí)不看到自動(dòng)補(bǔ)全窗口，可以按下 Escape 鍵將其隱藏。

當(dāng)前觸發(fā) Iceworks 代碼補(bǔ)全的情況有：

變量賦值

使用 CSS Module 時(shí)，根據(jù)樣式聲明進(jìn)行樣式字段的自動(dòng)補(bǔ)全：

className 屬性

在編輯組件的 className 時(shí)，根據(jù)文件 import 的樣式文件內(nèi)的類選擇器進(jìn)行自動(dòng)補(bǔ)全提醒。

![使用示例](https://atts.w3cschool.cn/attachments/day_210520/202105201452169472.gif

SASS 變量開發(fā)

在 SASS 文件內(nèi)輸入變量時(shí)，根據(jù)引用文件進(jìn)行代碼自動(dòng)補(bǔ)全：

信息提示

當(dāng)您的鼠標(biāo)移動(dòng)到某些文本上之后，稍待片刻就能看到一個(gè)懸停提示窗口。這個(gè)窗口里會(huì)顯示跟鼠標(biāo)下文本相關(guān)的信息。比如在示例代碼中，當(dāng)鼠標(biāo)移動(dòng)到樣式屬性上后，懸停提示窗口里展示了當(dāng)前的樣式信息。

當(dāng)前觸發(fā) Iceworks 信息提示的情況有：

SASS 變量預(yù)覽值

鼠標(biāo)停留在變量上，出現(xiàn)懸浮部件顯示該變量對(duì)應(yīng)的值：

工程配置文件

當(dāng)您將鼠標(biāo)懸停在某個(gè) Json 的字段上時(shí)，會(huì)出現(xiàn)懸浮小部件顯示字段的描述。

文檔搜索

當(dāng)開發(fā) Ice 和 Rax 項(xiàng)目時(shí)，可搜索對(duì)應(yīng)文檔，并自動(dòng)識(shí)別當(dāng)前使用到的組件進(jìn)行文檔推薦。

通過(guò)命名面板激活：

或者在 JSX 中通過(guò)鼠標(biāo)右鍵激活：

使用

1. 搜索您需要查找文檔的組件名
2. 點(diǎn)擊組件名后，選擇打開組件文檔的方式
3. 瀏覽文檔

或者：

1. 將鼠標(biāo)懸停在需要查找文檔的組件標(biāo)簽上
2. 點(diǎn)擊文檔鏈接
3. 瀏覽文檔

代碼定位

當(dāng)我們看到某個(gè)函數(shù)的調(diào)用，想要知道這個(gè)函數(shù)的接口定義是什么樣的，它的實(shí)現(xiàn)細(xì)節(jié)是什么樣的，需要的直接跳轉(zhuǎn)到定義和實(shí)現(xiàn)的位置。比如當(dāng)你在使用樣式屬性時(shí)，按下 Command（windows 為 Ctrl） 鍵點(diǎn)擊對(duì)應(yīng)的 className 值，跳轉(zhuǎn)到該值的定義處

當(dāng)前觸發(fā) Iceworks 支持定位的情況有：

SASS 變量的定義跳轉(zhuǎn)

通過(guò) cmd + 點(diǎn)擊（ Windows: ctrl + 點(diǎn)擊 ）進(jìn)行變量的定義代碼跳轉(zhuǎn)：