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