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可用。