vscode安装旧版本插件_2020 我在使用VScode时安装的插件（针对前端开花推荐）

针对前端开花的VScode插件推荐

呐，半年前分享过一次插件推荐，但是即使vscode打上很多的插件开发效率仍然无法与一些IDE相比(webstrom phpstrom....)但是随着版本的更新vscode也集成了一些热门的功能而且插件质量也有所提升，最近开发都在使用VScode逐渐的减少使用webstrom。

呐在这里F_picacho向大家分享下我在使用VScode整理出的插件清单供大家参考。 针对上一次的分享内容有删改，因为vscode最新版集成了一些功能所以有的插件可以删除了，留着影响运行效率。

主题类

默认的vscode暗色系非常生硬，开发过程极影响心情。有一款能让自己愉快编码的主题也会在一定程度上提升编程效率和灵感。当然，不同人对于视觉的偏好是不同的。

通用类

注意这里需要进行对seetings.json文件进行配置 否则可能无法正常使用

ctrl+shift+p进入搜索 搜索seetings.json

插件其启用快捷键

// 默认代码风格配置shift+alt+f 或者直接使用指令Format Selection

"editor.defaultFormatter": "esbenp.prettier-vscode",

"[html]": {

"editor.defaultFormatter": "esbenp.prettier-vscode"

},

"window.zoomLevel": 0,

"[javascript]": {

"editor.defaultFormatter": "esbenp.prettier-vscode"

},

"[json]": {

"editor.defaultFormatter": "esbenp.prettier-vscode"

},

Auto Complete Tag 修改 html 标签，自动帮你完成尾部闭合标签的同步修改

Preview on Web Server 热更新服务器  ctrl+shift+v在视窗内启动预览窗口 ctrl+shift+l在浏览器预览

这里不推荐live server 因为很长时间没有更新了 后期使用还有一些跨域的问题

open in browser 以本地的方式打开文件 支持所有内核浏览器 启用快捷键alt+shift+b

CSS预处理语言类

Easy Sass 编译Sass文件 不需要安装额外的执行环境 但是需要进行配置

// Easy sass插件配置

"easysass.compileAfterSave": true,

"easysass.formats": [

{

"format": "expanded",

"extension": ".css"

},

{

"format": "compressed",

"extension": ".min.css"

}

],

"easysass.targetDir": "./css/",

"workbench.iconTheme": "material-icon-theme" //路径

Sass Sass语法提示

VUE类

Vetur Vue语法提示 高亮