Visual Studio Code 中的 Emmet 2.0

2017 年 8 月 7 日 Ramya Rao, @ramyanexus

在 2017 年 7 月釋出的 Visual Studio Code（版本 1.15）中，我們推出了改進後的 Emmet 體驗，此前它已在過去兩個版本中進行預覽。

其功能包括

• 在建議/自動完成列表中展開 Emmet 縮寫。
• 大多數 Emmet 操作支援多游標。
• 更新了對自定義 Emmet 片段的支援。

作為本次更新的一部分，我們使用 @emmetio 的新 npm 模組重寫了所有 Emmet 操作。

一個重要的變化是，Tab 鍵不再是擴充套件 Emmet 縮寫的預設方式。相反，Emmet 縮寫現在將出現在建議列表中。它們可以像任何其他智慧完成一樣被選擇，選擇後，縮寫將被展開。

注意：要繼續使用 Tab 鍵擴充套件 Emmet 縮寫和片段，請將 emmet.triggerExpansionOnTab 設定為 true。

繼續閱讀以瞭解 Visual Studio Code 中 Emmet 2.0 的變化。

Emmet 的新模組化方法

以前，Emmet 庫是一個單一的整體程式碼庫，用於每個 Emmet 操作。Emmet 的作者 Sergey Chikuyonok 設想 Emmet 2.0 的新世界是更小、可重用的模組。

現在，@emmetio 有單獨的 npm 模組，用於擴充套件 Emmet 縮寫所需的管道的不同部分。這些步驟包括：

• 解析縮寫
• 解析片段和變數
• 根據語法渲染輸出
• 應用轉換

還有單獨的模組用於解析 HTML 和 CSS 文件，以幫助實現 Emmet 的其餘功能。您可以在 npm 上的 emmetio 下找到這些模組。

採用這種模組化方法是為了讓編輯器外掛能夠使用編輯器特定的 API，以便 Emmet 更好地與編輯器功能整合。例如，這種方法使我們能夠：

• 在建議/自動完成列表中提供 Emmet 縮寫擴充套件。
• 為大多數 Emmet 操作提供多游標支援。
• 為需要解析檔案的 Emmet 操作，使用 VS Code 特定 API 提供更高效的文件解析。
• 將 Emmet 整合從 VS Code 核心中分離出來，放入一個擴充套件中。

Tab 不再是預設的 Emmet 擴充套件鍵

使用 Tab 鍵作為 Emmet 擴充套件的鍵盤快捷鍵存在兩個問題：

• 當用戶想使用 Tab 鍵縮排原始碼時，Emmet 發生了擴充套件。
• 當用戶想擴充套件 Emmet 縮寫時，建議列表中的專案被插入。

Sergey Chikuyonok 意識到將 Emmet 放在建議列表中會帶來更愉快的體驗。它幫助我們解決了上述兩個問題，這是一個額外的驚喜。

現在 Emmet 縮寫可以透過建議列表輕鬆訪問，我們能夠刪除 Tab 鍵與 Emmet: ExpandAbbreviation 命令的預設關聯。Tab 鍵現在可以自由地做它應該做的事情：縮排。

如果您關閉了 editor.quickSuggestions 設定，您將不得不按 ⌃Space (Windows, Linux Ctrl+Space) 來手動觸發建議/自動完成列表。

如果您不希望 Emmet 出現在建議/自動完成列表中，請將 emmet.showExpandedAbbreviation 設定為 never。

您仍然可以將任何鍵盤快捷鍵（Tab 鍵除外）繫結到 editor.emmet.action.expandAbbreviation 命令，或者從命令面板使用 Emmet: Expand Abbreviation。

如果您更喜歡使用 Tab 鍵來展開您的縮寫，那麼請將設定 emmet.triggerExpansionOnTab 新增到您的設定中並將其設定為 true。當沒有縮寫可展開時，我們使用此設定提供適當的回退以提供縮排。

其他變化

我們在新的 Emmet 頁面中記錄了一些其他變化：

• 使用 emmet.includeLanguages 而不是 emmet.syntaxProfiles 設定來在其他檔案型別中啟用 Emmet
• 在 Emmet 中編寫自定義片段的方式發生變化
• 可用 Emmet 設定的變化
• 要將單個選擇中的單個行包裝在單獨的標籤中，請使用命令 Emmet: Wrap Individual Lines with Abbreviation，而不是 Emmet: Wrap with Abbreviation。
• 我們正在 2017 年 8 月解決的 Emmet 2.0 中的已知問題

促成 Emmet 2.0 的人們

我要感謝 Sergey Chikuyonok 在 Emmet 模組化方面的出色工作，以及幫助我們將這些改進引入 VS Code。

還要感謝所有在 Emmet 處於預覽階段時使用過它的 VS Code 使用者，並透過 GitHub issues 提供了寶貴的反饋。GitHub issues 中的討論對我們達到當前的使用者體驗非常有幫助。

特別感謝 Steve Lombardi、Jens Hausdorf、Vladimir Sizikov、Niichie、Thomas Klepzig 以及許多其他使用 VS Code Insiders 版本測試我的錯誤修復和功能新增的人。

分享您對新 Emmet 的看法

您是否懷念舊 Emmet 的任何功能？使用新 Emmet 有困難嗎？請隨時建立 GitHub 問題，我們將盡力幫助您。

現在 Emmet 在 VS Code 中作為擴充套件，對其進行貢獻比以往任何時候都更容易。VS Code GitHub 倉庫中的 emmet 資料夾包含您入門所需的所有原始碼。

編碼愉快！

Ramya Rao，VS Code 團隊成員 @ramyanexus