vscode常用插件

vscode寫JS/html/css是比較適合的,因為輕量級.

只是需要一些插件來完善VSCODE功能,感覺VSCODE就是要靠插件的,不然的話,只是一個高級的代碼編輯器.可能比editplus"要好很多".

 

這個圖上是幾個常用的插件,以下說明

-------------------------------------------------------------------------------------------------------------------------------

一 Auto Close Tag

這個用來自動補全HTML/XML標記..看到這個插件,心里很矛盾,在vs2017里,這功能自帶的啊.另外,你還能找到一款不提供自動補全HTML標記功能的IDE?

 

二 Auto Rename Tag

當修改一個HTML標記時,它的配對結束標記也自動修改.唉......這個功能vscode是沒有的,要裝這個插件才有..當然,VS2017本來就有,另外,其它例如 webstorm等等.

 

三.chinese

這個變成中文的.

 

四.Live Sass Compiler / Live Server

這兩個插件是一同安裝的,裝sass時,會一起安裝.是用來編譯sass的插件.

現在直接寫css的一定很少了,都需要工程化css.我用過sass/less,sass的功能要完善一些.所以就選擇了sass.

在vs2017上,安裝一個web Compiler就可以了.在vscode上,安裝這個插件能完成相應功能.

只需要ctrl+s保存scss文件,就會自動 生成 兩個文件.那個map文件,是可以在chrome瀏覽器中直接寫sass看效果的,就如同以前直接寫css看效果那樣.

 

live server是個web服務器工具,在vscode下方有個按鈕,點一下就能啟動瀏覽器,根目錄就是當前的vscode項目目錄.

 

通過配置文件可以修改它的端口,選擇啟動的瀏覽器種類,例如chrome

 

sass輸出路徑和壓縮配置

"liveSassCompile.settings.formats": [

　　{

　　　　// 正常格式輸出,樣式的每個屬性占一行

　　　　"format": "expanded",   // compact(每個樣式占一行)  // compressed(壓縮格式輸出)

 

　　　　// 編譯后的擴展名

　　　　"extensionName": ".css",

 

　　　　// 這個就是編譯后的CSS輸出目錄

　　　　"savePath": "/wwwroot/css"

　　}

]

五.html高亮

這個插件用於HMTL模板

經常會有拼HTML字符串的時候,如果是字符串,是不會有HTML語法提示的.就像這樣

let dom = "<div class="hello"><p>hello</p></div>";

但是加上這個插件之后,只要在字符串前面寫個html就和html文件一樣了.

html`<div class="hello"><p>hello</p></div>`

注意,開頭是 html  固定寫法,后面的 ``, 是鍵盤鍵位 1  左邊的那個

-----------------------------------------------------------------------------------------------------------------------------------------------------------

六.markdown插件

安裝后,右上角這個按鈕可以打開markdown的預覽,非常方便