01-vscode主题及插件
2019-03-21 本文已影响256人
GL曲终人散
一、主题
1、Atom One Light Theme
![](https://img.haomeiwen.com/i5185485/2a2035a689122c18.png)
2、Dracula Official
Dracula Official 是受到很高评价的一款主题,配色方案可以让人感到平静,暗淡的紫色会让你觉得它有一种特殊的魅力。插件带有文件图标设计。界面效果如下:
![](https://img.haomeiwen.com/i5185485/f294307a3289117d.jpg)
3、Brackets Light Pro
本人目前用的
![](https://img.haomeiwen.com/i5185485/aa4b25d502fc6ec0.png)
二、通用插件
1、HTML Snippets
超级实用且初级的 H5代码片段以及提示
![](https://img.haomeiwen.com/i5185485/a9045eab1049bc08.png)
2、HTML CSS Support
让 html 标签上写class 智能提示当前项目所支持的样式
新版已经支持scss文件检索
![](https://img.haomeiwen.com/i5185485/0c469d0e6a932d65.png)
3、vscode-icon
让 vscode 资源树目录加上图标,必备良品!
![](https://img.haomeiwen.com/i5185485/b742ac2bd27775b8.png)
4、Path Intellisense
自动路劲补全,默认不带这个功能的,赶紧装
5、Npm Intellisense
require 时的包提示(最新版的vscode已经集成此功能)
6、Document this
js 的注释模板 (注意:新版的vscode已经原生支持,在function上输入/** tab)
7、Project Manager
在多个项目之前快速切换的工具
8、beautify
格式化代码的工具
9、fileheader
顶部注释模板,可定义作者、时间等信息,并会自动更新最后修改时间
10、filesize
在底部状态栏显示当前文件大小,点击后还可以看到详细创建、修改时间
![](https://img.haomeiwen.com/i5185485/0ba60e2ef61ca9d6.png)
11、Bracket Pair Colorizer
让括号拥有独立的颜色,易于区分。可以配合任意主题使用。
![](https://img.haomeiwen.com/i5185485/95a941ef18831145.png)
12、cssrem
将css中的px自动转换为rem.再也不用计算器了(大漠大神推介)
13、Sublime Text Keymap
启动sublimeText的快捷键配置。vscode上面自有一套快捷键设定,个人习惯sublime快捷键
14、Import Cost
引入包大小计算,对于项目打包后体积掌握很有帮助
![](https://img.haomeiwen.com/i5185485/a7c116b981a17b06.png)
15、markdownlint
书写md文件的预览插件
16、language-stylus
CSS预处理器styl后缀文件的识别扩展
17、View In Browser
迅速通过浏览器打开html文件
三、框架和库的插件
1、jQuery Code Snippets
jquery 重度患者必须品,废话不多说,上图
![](https://img.haomeiwen.com/i5185485/5005f271e27e865e.png)
2、Bootstrap 3 Sinnpet
常用 bootstrap 的可以下
3、vetur
语法高亮、智能感知、Emmet等
![](https://img.haomeiwen.com/i5185485/6421deaf5bd5fd3d.png)
4、VueHelper
snippet代码片段
![](https://img.haomeiwen.com/i5185485/0cec6b7dd2e18a68.gif)
5、Vue 2 Snippets
快速新建vue页面