一、常用插件
1.Live server 浏览器实时刷新
插件安装成功后,会在底部工具栏中,显示个Go Live
![](https://i-blog.csdnimg.cn/blog_migrate/ad91f16b338065fedb821b401be83b1a.png)
*.html文件,点击右键,可以看到live server两条指令
![](https://i-blog.csdnimg.cn/blog_migrate/db15d9e1e8d48b18aa9154dd1ef8ad43.png)
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中,选择扩展页签,输入需要安装的扩展名称,就会出现对应的扩展列表,选择安装即可
- 离线安装:
![](https://i-blog.csdnimg.cn/blog_migrate/fbb14b59e35daecce08a5f2c129a7068.png)
2.在扩展官网上,找到需求安装的扩展,点击页面中的"Download Extension",下载扩展。
下载完成后,是一个以.vsix结尾的文件,然后到vscode中扩展页签中,选择”...“,弹出扩展设置,选择”从VSIX安装“,然后重启vscode即可。
![](https://i-blog.csdnimg.cn/blog_migrate/06ed8fd02e9cfa40724e3d485e9d4aa6.png)
![](https://i-blog.csdnimg.cn/blog_migrate/d40d9489734ce3675d13f794b9b9da02.png)
- 有一次微软扩展商店,服务暂停,提示"Server is 503",导致不能在线安装扩展,没办法只能copy了其他同事已安装的扩展文件
vscode扩展安装目录:C:\Users\用户名\.vscode\extensions,直接复制到对应的安装目录中,重启vscode可用。