vs code！必备插件

没有好装备，怎么升级打怪兽。

今天就来个大家推荐vscode( Visual Studio Code )的插件。

特点：1、开源 免费  多平台  高颜值  界面设计nice

           2、加载大文件无压力

           3、内置Git

           4、代码人性化补全

           5、。。。。还是放前辈的写的吧

 

1、CSS Peek

该插件 可在html中选中class类名或者id,右键单击 Go to Definition 和 Peek definition  (中文版 转到定义 和 速览定义) 选项。

可跳转到相应css。

2、Debugger for Chrome

js调试的插件，前端项目在Chrome中运行起来之后，可以直接在VSCode中打断点、查看输出、查看控制台，详细配置见插件说明。

 

 

3.open in borwser

 

 

vscode 并未提供可直接在浏览器中打开文件的界面  安装运行后可右击在快捷菜单中选择运行文件。

 

 

 

4. filesize 

 

 

在底部状态栏显示当前文件大小，点击后还可以看到详细创建、修改时间，安装后自动运行

 

 

5. px to rem (h5开发)

px 转换 rem

 

 

 

 

 

 

6.Quokka.js

Quokka.js是个调式工具插件，能够实时反馈编写代码的计算结果，js实时编译，相当于边写边输出控制台的结果（在使用 JSX 或 TypeScript 项目中，它能够开箱即用。）

 

 

 

 

7. LiveServer

 

 

http 服务器 相当于node.js里的http-server 可以再（首选项-设置-用户设置里配置端口 liveServer.settings.port:8080）

 

 

 

8. JavaScript (ES6) code snippets

js语法提示

 

9. Minify

 

 

用于压缩合并 JavaScript 和 CSS 文件的应用程序。它提供了大量自定义的设置，以及自动压缩保存并导出为.min文件的选项。它能够分别通过 uglify-js、clean-css 和 html-minifier，与 JavaScript、CSS 和 HTML 协同工作。

 

10.    VueHelper

（vue 开发）提供了vue代码提示，其中包括vue2所有的api,vue-router,和vuex2的代码提示

 

11、vue vscode Snippets (vue 开发必备！！！)

划重点 如果你厌倦打字，反复敲模板的话 那么这个插件对你来说可能会有必要哦。

此插件并未对vue API定义进行编目，相反 ,它从现实世界使用的Vue角度关注开发人员的人体工程学。

。。。直接看图 简单明了

 

 

 

12、SVG Viewer  可预览SVG图片

无需离开编辑器 可查看SVG文件，同时还包含着用于转换为PNG格式和生成数据URI模式的选项

 

13、Git History(git log)  查看 git log 日志

 

 

 

14. Easy Sass 

 

无需 koala  等scss等编辑器，直接保存scss/sass文件可自动生成并同步编译成同名文件

 

 

15、Easy WXlESS

微信小程序WXSS文件专用，保存可自动生成并同步编译成同名css文件

 

16、Language and Framework Packs

 

VSCode 默认支持大量的主流编程语言，但如果你所使用的编程语言不包括在内，也可以通过下载扩展包来自动添加。同时，你还可以添加一些像 React Native 与Vue 的相关 Web 开发插件包。