開發 React 和 Rax 樣式用這款 VS Code 插件就夠了

咱們經過 React 和 Rax 開發了大量的前端應用。在開發 JSX 文件時，基於代碼提示和補全，代碼片斷，TypeScript 等方式很好的提高了頁面邏輯的開發效率。而咱們卻常常忽略了樣式的開發效率，相信你在開發樣式文件的過程當中，必定遇到了不少不方便的地方。

如今給你們推薦一款超好用的 VS Code 插件 Iceworks Style Helper ，它可大大提高外樣式文件的開發效率。

全新的 CSS Class 開發體驗

Iceworks Style Helper 打通了 JSX 和 CSS 的文件之間的聯繫，可更高效的預覽，定位和使用樣式屬性。

預覽和定位樣式

只要將鼠標懸停至想要查看的樣式上，即可預覽已有的樣式內容詳情。再經過 Cmd (Windows Control) + 鼠標點擊 ，快速定位到樣式實現位置，方便咱們快速對屬性進行修改。

使用樣式

當咱們須要使用已有樣式時，出現的自動聯想補全，方便咱們快速選取須要使用的樣式。

快速生成 className

當咱們先寫好 JSX 組件的結構，再開發樣式文件時，提示出 JSX 文件中已申明的樣式 className ，可快速生成須要修改的樣式結構。

全新的行內樣式開發體驗

在 JSX 文件中開發內聯樣式時會出現樣式屬性的提示和補全，不但可預覽並查看 CSS 相關文檔，還能夠快速選擇推薦候選值。使 JSX 文件也具有了樣式代碼提示推薦的能力。

全新的 SASS 開發體驗

變量的使用一直困擾着衆多 SASS 開發者。Iceworks Style Helper 經過深層的 SASS 文件分析，完全改善變量使用體驗。

SASS 變量預覽及定位

在 SASS 文件中鼠標懸停至想要查看的變量上時，即可預覽變量值和實際顏色，同時經過 Cmd (Windows Control) + 鼠標點擊可快速跳轉至變量定義的位置，對變量進行修改。完全改善 SASS 變量的使用和開發體驗。

SASS 變量使用

當咱們須要使用一個變量時，出現聯想的變量值同時可預覽對應的變量值，保障變量使用的正確性。同時當咱們使用的值和已有變量的值相同時，也會出現對應變量的替換，更快速的使用 SASS 變量。充分使用定義 SASS 變量的同時，也大大下降了變量使用出錯的機率。

What's Next

咱們計劃將支持更多的樣式開發場景，好比 Less，CSS Modules 等，同時提供更智能的推薦和代碼生成。咱們也會提供經常使用樣式方案封裝，好比一鍵水平垂直居中等，以及可視化編輯樣式方案，請你們盡情期待。

是時候升級和改善咱們的樣式開發體驗了，快來下載體驗吧~

歡迎加入 Iceworks 團隊

Iceworks 項目着重改善前端工程開發體驗，提供了一系列優秀的 VS Code 插件。歡迎感興趣或者在使用過程當中出現問題的同窗和咱們保持聯繫。

若是你也擅長開發 VS Code 插件，歡迎投遞簡歷：
jason.yf@alibaba-inc.com

歡迎加入釘釘羣：