emmet在vscode中通過簡短縮寫快速生成html和css代碼，極大提升前端開發(fā)效率。1. 使用時只需輸入縮寫后按tab鍵即可展開，如!生成html5模板、div#header生成帶id的div；2. 支持嵌套結(jié)構(gòu)如ul>li*3>a生成帶鏈接的列表項；3. css中如d:f變?yōu)?a href="http://www.babyishan.com/tag/display">display: flex；4. 常用縮寫包括盒模型、flexbox布局、定位等；5. 若未生效需檢查文件類型、光標位置、設置沖突及語法錯誤；6. 進階功能包含自定義縮寫、生成占位文本、父級操作符及編號控制，進一步增強個性化與自動化能力。
Emmet在vscode里幾乎是內(nèi)置的，它就是那種你一旦用了就離不開的工具，能讓寫HTML和CSS的速度提升好幾個檔次，簡直是寫前端代碼的利器。核心就是通過簡短的縮寫，按一下Tab鍵，就能快速展開成完整的代碼結(jié)構(gòu)。
解決方案
說實話，用Emmet上手非常快。你只需要在HTML或CSS文件里，敲入你想要的縮寫，然后按下Tab鍵，它就會自動展開。
比如，在HTML文件里：
立即學習“前端免費學習筆記（深入）”；
- 想寫一個最基本的HTML骨架，直接敲一個感嘆號 !，然后按Tab，一個完整的HTML5模板就出來了。
- 如果想快速生成一個帶有特定ID或class的div，你可以敲 div#header 或 div.container，再按Tab。甚至連div都可以省略，直接敲 #header 或 .container 也能得到同樣的效果。
- 嵌套結(jié)構(gòu)也超方便，比如 ul>li*3>a，它會幫你生成一個無序列表，里面有3個列表項，每個列表項里又包含一個鏈接。這種鏈式操作，效率一下子就上來了。
- 兄弟元素也很簡單，h1+p 就會生成一個H1標題后面跟著一個段落。
- 帶屬性的標簽，比如 a[href=””][target=”_blank”]，會生成一個帶空鏈接和新窗口打開屬性的a標簽。
在CSS文件里：
- 縮寫同樣強大。比如想寫 margin-bottom: 10px;，你只需要敲 mb10。
- d:f 變成 display: flex;。
- pos:a 變成 position: absolute;。
- 甚至可以寫 p10-20 變成 padding: 10px 20px;。
還有個特別實用的功能是“Emmet: Wrap with Abbreviation”。選中一段代碼，按下 Ctrl+Shift+P (macos是 Cmd+Shift+P)，輸入“Emmet: Wrap with Abbreviation”，然后輸入你想包裹的標簽，比如 div.wrapper，選中的代碼就會被這個div包裹起來。這個功能在重構(gòu)或者調(diào)整結(jié)構(gòu)的時候特別好用。
Emmet有哪些常用縮寫，能真正提高效率？
聊到效率，Emmet里有些縮寫是真的能讓你飛起來。我個人最常用的，也是我覺得最能體現(xiàn)它價值的，主要有這么幾類：
HTML部分：
- ! 或 html:5： 快速生成HTML5標準模板。這是每次新建文件必用的。
- . 和 # 的隱式標簽： 比如直接敲 .container 而不是 div.container。這種節(jié)省下來的敲擊次數(shù)，積累起來就很可觀。
- > (子元素) 和 + (兄弟元素)： 比如 header+main>section*2+aside+footer，一下子就能搭好頁面基本框架。
- *`(重復)：**li5這種，快速生成多個重復元素。結(jié)合$(編號) 更是神器，li.item$5會生成li.item1,li.item2`…
- [] (屬性)： a[href=””][target=”_blank”] 這種帶屬性的，特別適合圖片、鏈接等。
- {} (文本內(nèi)容)： p{Hello World} 直接在標簽里填充文本。
CSS部分：
- 盒模型相關： m (margin), p (padding), w (width), h (height)。加上數(shù)值和方向，比如 mt10 (margin-top: 10px;), px20 (padding: 0 20px;)。
- Flexbox布局： d:f (display: flex;), jc:sb (justify-content: space-between;), ai:c (align-items: center;)。這些縮寫簡直是Flexbox的福音，寫起來太快了。
- 定位： pos:a (position: absolute;), t0l0 (top: 0; left: 0;)。
- 字體： fz16 (font-size: 16px;), fwb (font-weight: bold;)。
- 背景： bgc#f00 (background-color: #f00;)。
這些縮寫，尤其是組合起來用的時候，那種流暢感真的會上癮。它不是簡單地幫你打字，而是讓你以更抽象的思維去構(gòu)建結(jié)構(gòu)，然后Emmet幫你補全細節(jié)。
為什么我的Emmet沒有生效？常見問題排查
我剛開始用Emmet的時候，也遇到過它突然“罷工”的情況，那感覺可太糟心了。通常來說，Emmet不生效，問題往往出在幾個地方：
- 文件類型不對： Emmet默認只在HTML、CSS、xml等文件類型中激活。如果你在一個JS文件里敲HTML縮寫，那肯定沒反應。VSCode底部狀態(tài)欄會顯示當前文件的語言模式，檢查一下是不是HTML或CSS。如果是在React的JSX或vue的SFC里寫HTML，需要確保VSCode的設置里有對應的語言關聯(lián)，比如在settings.json中添加”emmet.includeLanguages”: {“JavaScript”: “html”, “vue“: “html”}。
- 光標位置不對： Emmet展開需要光標在一個有效的縮寫后面。如果你縮寫敲到一半，或者光標在縮寫中間，它可能就識別不了。確保你敲完縮寫后，光標緊跟著縮寫末尾。
- VSCode設置沖突或禁用： 極少數(shù)情況下，可能是Emmet功能被不小心禁用了，或者有其他擴展與Emmet沖突。你可以檢查VSCode的設置（Ctrl+, 或 Cmd+,），搜索“Emmet”，確保emmet.showSuggestionsAsSnippets和emmet.triggerCharacters等選項是開啟的。
- 縮寫語法錯誤： 有時候是我們自己敲錯了縮寫，比如多了一個空格，或者括號沒閉合。Emmet對語法還是有一定要求的，一個小錯誤就可能導致無法識別。
- 外部擴展影響： 雖然不常見，但某些前端相關的VSCode擴展可能會與Emmet的默認行為產(chǎn)生沖突。如果上述方法都無效，可以嘗試禁用一些最近安裝的擴展，看看問題是否解決。
排查的時候，通常從最簡單的文件類型和光標位置開始看，大部分問題都能很快解決。
Emmet還能做些什么？進階用法與個性化配置
Emmet除了基礎的縮寫展開，還有一些更高級的玩法和個性化配置，能讓它更貼合你的工作流。
- 自定義縮寫 (Snippets)： 這是我覺得Emmet最“有意思”的地方之一。如果你經(jīng)常寫一些重復性高但Emmet沒有內(nèi)置的復雜結(jié)構(gòu)，比如某個特定組件的HTML模板，你可以自己定義縮寫。在VSCode的settings.json里，你可以通過”emmet.extensionsPath”指向一個文件夾，這個文件夾里可以放一個snippets.json文件。在這個文件里，你可以定義自己的縮寫和它們展開后的內(nèi)容。比如，我可能經(jīng)常寫一個帶標題和內(nèi)容的卡片組件，就可以定義一個card的縮寫，展開后是
。這樣一來，你的效率又能再上一個臺階。
- Lorem Ipsum文本生成： 寫原型頁面的時候，需要填充一些占位文本，直接敲lorem或者lorem10（生成10個單詞的文本），按Tab，就能快速生成隨機的拉丁文文本。這個在設計階段或者填充內(nèi)容的時候特別方便。
- 父級操作符 ^： 這個操作符允許你跳出當前層級，回到父級元素繼續(xù)操作。比如 div>ul>li^a，它會生成一個div，里面有ul和li，然后a標簽會和ul是兄弟關系，而不是li的子級。這在構(gòu)建一些復雜且非線性嵌套的結(jié)構(gòu)時非常有用。
- 編號 $@N 和 $@-： 默認的$是從1開始遞增，$@N可以指定起始數(shù)字（比如$@5從5開始），$@-可以指定倒序（比如$@-從大到?。?。這在生成有特定編號需求的列表或ID時非常方便。
掌握這些進階用法和個性化配置，Emmet就不僅僅是一個簡單的代碼展開工具了，它更像是一個可定制的、能幫你把重復勞動自動化的小助手。探索這些功能，你會發(fā)現(xiàn)它能做的事情遠比你想象的要多。
