VS Code前端開(kāi)發(fā)工具之必備插件，Visual Studio Code是由微軟開(kāi)發(fā)免費(fèi)、開(kāi)源、跨平臺(tái)的一款I(lǐng)DE，支持多種編程語(yǔ)言開(kāi)發(fā)，具有強(qiáng)大的插件擴(kuò)展能力，這篇文章我們就來(lái)看看VS Code在前端開(kāi)發(fā)中有哪些必備的擴(kuò)展插件介紹
先看看軟件的下載安裝
VS Code官網(wǎng)地址：
https://code.visualstudio.com/
VS Code官網(wǎng)下載地址：
https://code.visualstudio.com/Download
圖1
下載安裝好適合自己的版本后，開(kāi)始安裝插件
1、漢化Chinese
圖2
圖3
2、Open-In-Browser 設(shè)置默認(rèn)瀏覽器查看文件選項(xiàng) （安裝流程如上就不再重復(fù)了）
使用Alt + B快捷方式在默認(rèn)瀏覽器中打開(kāi)當(dāng)前html文件，或Shift + Alt + B選擇瀏覽器。你也可以像圖片一樣右鍵點(diǎn)擊
圖4
當(dāng)您在其他瀏覽器中選擇oepn時(shí)，將顯示一個(gè)瀏覽器列表，您可以選擇其中一個(gè)打開(kāi)當(dāng)前文件。
圖5
3、Quokka
實(shí)時(shí)反饋正在的編輯代碼結(jié)果，預(yù)覽計(jì)算值結(jié)果等，是一個(gè)很好的調(diào)試工具插件
圖6
4、css Peek
這個(gè)擴(kuò)展支持所有正常的符號(hào)定義跟蹤功能，但它針對(duì)的是css選擇器(類(lèi)、id和HTML標(biāo)記)。這包括:
Peek:以?xún)?nèi)聯(lián)方式加載css文件并在那里進(jìn)行快速編輯。(Ctrl + Shift + F12)
轉(zhuǎn)到:直接跳轉(zhuǎn)到css文件或在一個(gè)新的編輯器(F12)中打開(kāi)它
鼠標(biāo)懸停:用鼠標(biāo)懸停在符號(hào)上顯示定義(Ctrl+ Hover)
圖7
5、Beautify 代碼格式化
美化JAVAscript, JSON, CSS, Sass，和HTML在Visual Studio中的代碼。
圖8
6、color info 提供快速的css顏色信息。
圖9
7、vscode-icons 顯示Visual Studio代碼的圖標(biāo)
圖10
8、HTML Snippets html標(biāo)簽提示及含義提示
圖11
9、HTML CSS Support html中css類(lèi)名及id提示
圖12
10、Auto Close Tag 自動(dòng)添加HTML/XML關(guān)閉標(biāo)簽
圖13
11、Auto Rename Tag 當(dāng)重命名一個(gè)HTML/XML標(biāo)記時(shí)，將自動(dòng)重命名成對(duì)的HTML/XML標(biāo)記
圖14
12、Bracket Pair Colorizer 2 設(shè)置代碼成對(duì)大括號(hào)的顏色
設(shè)置成對(duì)括號(hào)的顏色，便于快速區(qū)分代碼塊
圖15
13、Live Server實(shí)時(shí)同步預(yù)覽頁(yè)面
圖16
