vscodes使用（一）： 常用插件，在線與離線安裝

一、常用插件

1.Live server 瀏覽器實時刷新

插件安裝成功后，會在底部工具欄中，顯示個Go Live

*.html文件，點擊右鍵，可以看到live server兩條指令

 

 

2.Esasy Sass 編譯Sass

文件->首選項->設置->搜索“easysass”，將easysass相關設置復制到用戶設置窗口中，根據實際情況修改。

// 文件保存后自動編譯sass/scss文件
    "easysass.compileAfterSave": true,
 
// 配置正則表達式，構建時排除匹配文件；禁用為空
    "easysass.excludeRegex": "",
 
// 設置編譯輸出的css風格，可同時編譯輸出多個不同風格的css文件
// nested: 嵌套縮進；expanded：無縮進、擴展；compact：簡潔；compressed：壓縮
    "easysass.formats": [
    {
        "format": "expanded",
        "extension": ".css"
    },
    {
        "format": "compressed",
        "extension": ".min.css"
    }
],
 
// 自定義css文件輸出目錄
    "easysass.targetDir": ""

 

二、在線與離線安裝

• 在線安裝：在vscode中，選擇擴展頁簽，輸入需要安裝的擴展名稱，就會出現對應的擴展列表，選擇安裝即可
• 離線安裝：

 　　1.插件官網地址： https://marketplace.visualstudio.com/vscode

 

　　　2.在擴展官網上，找到需求安裝的擴展，點擊頁面中的"Download Extension"，下載擴展。

　　　下載完成后，是一個以.vsix結尾的文件，然后到vscode中擴展頁簽中，選擇”...“，彈出擴展設置，選擇”從VSIX安裝“，然后重啟vscode即可。

 

 

 

 

• 有一次微軟擴展商店，服務暫停，提示"Server is 503"，導致不能在線安裝擴展，沒辦法只能copy了其他同事已安裝的擴展文件

　　    vscode擴展安裝目錄：C:\Users\用戶名\.vscode\extensions，直接復制到對應的安裝目錄中，重啟vscode可用。