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

代碼補全

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

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

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

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

變量賦值

使用 CSS Module 時，根據(jù)樣式聲明進行樣式字段的自動補全：

className 屬性

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

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

SASS 變量開發(fā)

在 SASS 文件內(nèi)輸入變量時，根據(jù)引用文件進行代碼自動補全：

信息提示

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

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

SASS 變量預(yù)覽值

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

工程配置文件

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

文檔搜索

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

通過命名面板激活：

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

使用

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

或者：

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

代碼定位

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

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

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

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