emmet縮寫功能在vscode中默認支持，但需正確設(shè)置并掌握語法。首先確保已啟用：打開設(shè)置搜索emmet，檢查html是否在enabled syntaxes中，或手動在settings.json添加”emmet.includelanguages”: {“html”: “html”}；其次掌握常見語法如div.container生成帶類的標簽，ul>li*3創(chuàng)建列表，input[type=text]添加屬性；若不生效需檢查文件類型是否為.html、是否在代碼區(qū)觸發(fā)、快捷鍵是否沖突、以及emmet.triggerexpansionontab是否開啟；最后可自定義模板如輸入form-login生成登錄表單結(jié)構(gòu)，從而大幅提升html編寫效率。
Emmet 縮寫功能是 vscode 中非常實用的一個工具，能大幅提升 HTML（以及 css）代碼編寫效率。如果你剛接觸它，可能會疑惑為什么別人敲幾下就能生成一整塊結(jié)構(gòu)，而自己還在一個標簽一個標簽地打。其實只要設(shè)置正確，Emmet 在 VSCode 中默認就已經(jīng)支持了，只是有些細節(jié)容易被忽略。
確保 Emmet 已啟用
VSCode 默認是開啟 Emmet 支持的，但有時候因為配置改動或者插件沖突，可能沒生效。你可以通過以下方式確認是否已經(jīng)啟用：
- 打開 VSCode 設(shè)置（快捷鍵 Ctrl + , 或 Cmd + ,）
- 搜索關(guān)鍵詞 emmet
- 確認 Emmet: Enabled Syntaxes 中包含 html（以及其他你希望支持的語言）
如果沒看到相關(guān)選項，也可以直接打開 settings.json 文件，在里面添加或檢查如下配置：
立即學習“前端免費學習筆記（深入）”；
"emmet.includeLanguages": { "html": "html" }
這樣可以確保你在 HTML 文件中能夠正常使用 Emmet 縮寫。
正確使用 Emmet 縮寫語法
Emmet 的核心在于“縮寫”，輸入完縮寫后按 Tab 鍵即可展開成完整的 HTML 結(jié)構(gòu)。比如輸入 div.container 再按 Tab，就會變成：
<div class="container"></div>
常見用法包括：
- ul>li*3 → 生成帶三個列表項的無序列表
- section#main>h1+p → 創(chuàng)建一個 section 包含 h1 和 p 標簽
- input[type=text placeholder=請輸入] → 快速創(chuàng)建帶屬性的 input 元素
這些寫法看起來像簡寫公式，但一旦熟悉之后，寫起結(jié)構(gòu)來速度會快很多。
遇到不生效？檢查幾個關(guān)鍵點
有時候 Emmet 不工作，不是它壞了，而是你忽略了下面幾點：
- 文件類型是否正確識別：確保當前文件保存為 .html 后綴，或者語言模式選的是 HTML。
- 是否在正確的編輯區(qū)域觸發(fā)：Emmet 只在代碼區(qū)域生效，不能在注釋、字符串或某些插件界面里使用。
- 快捷鍵沖突：如果你裝了一些擴展，可能會占用 Tab 鍵。可以嘗試改用 Ctrl + E（windows/linux）或 Cmd + E（Mac）來手動觸發(fā)展開。
- 禁用了 Emmet 自動提示：在設(shè)置中搜索 emmet.triggerExpansionOnTab，確保它是開啟狀態(tài)。
小技巧：自定義 Emmet 縮寫模板
如果你經(jīng)常寫特定結(jié)構(gòu)，比如表單、導(dǎo)航欄等，可以自定義 Emmet 縮寫模板。例如：
"emmet.userSnippets": { "html": { "snippets": { "form-login": "form[action='/login']>(input[type=text name=username]+input[type=password name=password])+button[type=submit]{登錄}" } } }
這樣你只需要輸入 form-login 并按 Tab，就能快速生成登錄表單結(jié)構(gòu)。
基本上就這些。Emmet 功能本身不復(fù)雜，但確實很容易因為配置或操作習慣問題導(dǎo)致無法使用。掌握好基本語法和設(shè)置要點，你的 HTML 編寫效率會提升一大截。
