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 操作提供多游標支援。
• 使用 VS Code 特定 API 為需要解析檔案的 Emmet 操作提供更高效的文件解析。
• 將 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。
• Emmet 2.0 中的已知問題，我們正在 2017 年 8 月解決這些問題

讓 Emmet 2.0 實現的人

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

還要感謝所有在 VS Code 預覽版中使用新 Emmet 並透過 GitHub 問題提供了寶貴反饋的人。GitHub 問題中的討論對於實現當前使用者體驗非常有幫助。

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

分享您對新 Emmet 的想法

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

由於 Emmet 現在是一個擴充套件，因此為 VS Code 中的 Emmet 做出貢獻也比以往任何時候都更容易。VS Code GitHub 倉庫中的 emmet 資料夾包含您開始所需的所有原始碼。

編碼愉快！

Ramya Rao, VS Code 團隊成員 @ramyanexus