01-vscode主题及插件

一、主题

1、Atom One Light Theme

image.png

2、Dracula Official

Dracula Official 是受到很高评价的一款主题，配色方案可以让人感到平静，暗淡的紫色会让你觉得它有一种特殊的魅力。插件带有文件图标设计。界面效果如下：

image

3、Brackets Light Pro

本人目前用的

image.png

二、通用插件

1、HTML Snippets

超级实用且初级的 H5代码片段以及提示

image.png

2、HTML CSS Support

让 html 标签上写class 智能提示当前项目所支持的样式
新版已经支持scss文件检索

image.png

3、vscode-icon

让 vscode 资源树目录加上图标，必备良品！

image.png

4、Path Intellisense

自动路劲补全，默认不带这个功能的，赶紧装

image

5、Npm Intellisense

require 时的包提示（最新版的vscode已经集成此功能）

image

6、Document this

js 的注释模板 （注意：新版的vscode已经原生支持,在function上输入/** tab）

image

7、Project Manager

在多个项目之前快速切换的工具

8、beautify

格式化代码的工具

9、fileheader

顶部注释模板，可定义作者、时间等信息，并会自动更新最后修改时间

image

10、filesize

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

image.png

11、Bracket Pair Colorizer

让括号拥有独立的颜色，易于区分。可以配合任意主题使用。

image.png

12、cssrem

将css中的px自动转换为rem.再也不用计算器了（大漠大神推介）

13、Sublime Text Keymap

启动sublimeText的快捷键配置。vscode上面自有一套快捷键设定，个人习惯sublime快捷键

14、Import Cost

引入包大小计算,对于项目打包后体积掌握很有帮助

image.png

15、markdownlint

书写md文件的预览插件

16、language-stylus

CSS预处理器styl后缀文件的识别扩展

17、View In Browser

迅速通过浏览器打开html文件

三、框架和库的插件

1、jQuery Code Snippets

jquery 重度患者必须品，废话不多说，上图

image.png

2、Bootstrap 3 Sinnpet

常用 bootstrap 的可以下

3、vetur

语法高亮、智能感知、Emmet等

image.png

4、VueHelper

snippet代码片段

image

5、Vue 2 Snippets

快速新建vue页面