1.安裝vscode并將常用的插件安裝好

安裝vscode沒有什么問題，直接選擇下一步就可以。所以我重點(diǎn)記錄的是vscode常用插件。

1.1vscode安裝用插件

點(diǎn)擊左側(cè)第五個(gè)圖標(biāo)，在搜索框里搜索你想安裝的插件，點(diǎn)擊安裝按鈕即可。

1.2vscode常用插件

1.2.1 Chinese (Simplified) Language Pack for Visual Studio Code
適用于 VS Code 的中文（簡體）語言包
此中文（簡體）語言包為 VS Code 提供本地化界面。

1.2.2 Markdown Preview Enhanced

markdown瀏覽增強(qiáng)器，可以實(shí)現(xiàn)白底黑字的瀏覽效果。

1.2.3 markdownlint

markdown語法檢查器

1.2.4 Auto Rename Tag

自動(dòng)更名插件：前面的標(biāo)簽變了，后面的標(biāo)簽也會自動(dòng)發(fā)生變化，閉合前面的標(biāo)簽。

1.2.5 Auto Close Tag

自動(dòng)關(guān)閉標(biāo)簽：寫了前面的標(biāo)簽，會自動(dòng)產(chǎn)生補(bǔ)全標(biāo)簽，閉合前面的標(biāo)簽。

1.2.6 Indent-Rainbow

以不同顏色顯示代碼縮進(jìn)
安裝前后對比：

1.2.7 Bracket Pair Colorizer

插件作用：括號匹配
安裝前后對比：

1.2.8 Live Server

作用：實(shí)時(shí)瀏覽網(wǎng)頁，保存代碼即可自動(dòng)更新瀏覽頁面，無需手動(dòng)刷新，提高了前端開發(fā)效率。

1.2.9 Prettier - Code formatter

代碼格式化工具
使用需要配置format選項(xiàng)

可以自動(dòng)保存代碼的選項(xiàng)，光標(biāo)發(fā)生變化文件就會自動(dòng)保存，配合live server使用非常完美。

1.2.10 intelliSense for CSS class names in HTML

css中自動(dòng)感應(yīng)html類名

1.2.11 CSS Peek

查看并跳轉(zhuǎn)到css定義

1.2.12 HTML CSS Support

css智能感知補(bǔ)齊

2.常用的markdown語法

3. Emmet常用方式

3.1 初始化

“html:5”，然后按Tab鍵：

3.2 定義多個(gè)元素

可以使用“*個(gè)數(shù)”，ul>li*3可以生成如下代碼：

`<ul>  
  <li></li>  
  <li></li>  
  <li></li>  
</ul> `

批改老師：天蓬老師

批改狀態(tài)：合格

老師批語：