一、快速編寫html**
1. 初始化
html文件需要包含一些固定的標籤，比如、、等，現在你只需要1秒鐘就可以輸入這些標籤。比如輸入「!」或「html:5」，然後按tab鍵：
2. 輕鬆新增類、id、文字和屬性
連續輸入元素名稱和id，emmet會自動為你補全，比如輸入p#foo：
連續輸入類和id，比如p.bar#foo，會自動生成：
html** 1
下面來看看如何定義html元素的內容和屬性。你可以通過輸入h1和a[href=#]，就可以自動生成如下**：
3. 巢狀
現在你只需要1行**就可以實現標籤的巢狀。
效果如下圖所示：
4. 分組
你可以通過巢狀和括號來快速生成一些**塊，比如輸入(.foo>h1)+(.bar>h2)，會自動生成如下**：
html**
1234565. 隱式標籤宣告乙個帶類的標籤，只需輸入div.item，就會生成
。 在過去版本中，可以省略掉div，即輸入.item即可生成
。現在如果只輸入.item，則emmet會根據父標籤進行判定。比如在
6. 定義多個元素
要定義多個元素，可以使用*符號。比如，ul>li*3可以生成如下**：
html**
17. 定義多個帶屬性的元素如果輸入 ul>li.item$*3，將會生成如下**：
html**
1二、css縮寫1. 值
比如要定義元素的寬度，只需輸入w100，即可生成
除了px，也可以生成其他單位，比如輸入h10p+m5e，結果如下：
css**
height: 10%;
margin: 5em;
單位別名列表：
2. 附加屬性
可能你之前已經了解了一些縮寫，比如 @f，可以生成：
css**
1一些其他的屬性，比如background-image、border-radius、font、@font-face,text-outline、text-shadow等額外的選項，可以通過「+」符號來生成，比如輸入@f+，將生成：@font-face
3. 模糊匹配
如果有些縮寫你拿不準，emmet會根據你的輸入內容匹配最接近的語法，比如輸入ov:h、ov-h、ovh和oh，生成的**是相同的：
css**
overflow: hidden;
4. **商字首
如果輸入非w3c標準的css屬性，emmet會自動加上**商字首，比如輸入trs，則會生成：
css**
1你也可以在任意屬性前加上「-」符號，也可以為該屬性加上字首。比如輸入-super-foo：-webkit-transform: ;
2-moz-transform: ;
3-ms-transform: ;
4-o-transform: ;
5transform: ;
css**
1如果不希望加上所有字首，可以使用縮寫來指定，比如-wm-trf表示只加上-webkit和-moz字首：-webkit-super-foo: ;
2-moz-super-foo: ;
3-ms-super-foo: ;
4-o-super-foo: ;
5super-foo: ;
css**
-webkit-transform: ;字首縮寫如下：-moz-transform: ;
transform: ;
5. 漸變
輸入lg(left, #fff 50%, #000)，會生成如下**：
css**
1三、附加功能生成lorem ipsum文字background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(0.5, #fff), to(#000));
2background-image: -webkit-linear-gradient(left, #fff 50%, #000);
3background-image: -moz-linear-gradient(left, #fff 50%, #000);
4background-image: -o-linear-gradient(left, #fff 50%, #000);
5background-image: linear-gradient(left, #fff 50%, #000);
lorem ipsum指一篇常用於排版設計領域的拉丁文文章，主要目的是測試文章或文字在不同字型、版型下看起來的效果。通過emmet，你只需輸入lorem 或 lipsum即可生成這些文字。還可以指定文字的個數，比如lorem10，將生成：
引用lorem ipsum dolor sit amet, consectetur adipisicing elit. libero delectus.
vs code設定支援jsx支援emmet
現在vscode中html檔案預設是支援emmet語法的，可以新建乙個html檔案，輸入html 5按tab鍵試一下，會自動生成html結構。但是中寫react的時候，中jsx語法中，輸入html標籤，按tab鍵不僅不會生成成套的html標籤，而且使用emmet的寫法也不管用。這個其實vs code...
玩轉VsCode支援MarkDown預覽
markdown是一種可以使用普通文字編輯器編寫的標記語言，通過簡單的標記語法，它可以使普通文字內容具有一定的格式。markdown具有一系列衍生版本，用於擴充套件markdown的功能 如 腳注 內嵌html等等 這些功能原初的markdown尚不具備，它們能讓markdown轉換成更多的格式，例...
配置VS Code 使其支援vue專案斷點除錯
每個應用，不論大小，都需要理解程式是如何執行失敗的。當我們寫的程式沒有按照自己寫的邏輯走的時候，我們就會逐步一一排查問題。在平常開發過程中我們可能會借助console.log 來排查,但是現在我們可以借助 vs code 斷點來除錯專案。vue專案斷點除錯主要有兩種方式 在可以從 chrome 瀏覽...