01-vscode主题及插件
2019-03-21 本文已影响256人
GL曲终人散
一、主题
1、Atom One Light Theme

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

3、Brackets Light Pro
本人目前用的

二、通用插件
1、HTML Snippets
超级实用且初级的 H5代码片段以及提示

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

3、vscode-icon
让 vscode 资源树目录加上图标,必备良品!

4、Path Intellisense
自动路劲补全,默认不带这个功能的,赶紧装
5、Npm Intellisense
require 时的包提示(最新版的vscode已经集成此功能)
6、Document this
js 的注释模板 (注意:新版的vscode已经原生支持,在function上输入/** tab)
7、Project Manager
在多个项目之前快速切换的工具
8、beautify
格式化代码的工具
9、fileheader
顶部注释模板,可定义作者、时间等信息,并会自动更新最后修改时间
10、filesize
在底部状态栏显示当前文件大小,点击后还可以看到详细创建、修改时间

11、Bracket Pair Colorizer
让括号拥有独立的颜色,易于区分。可以配合任意主题使用。

12、cssrem
将css中的px自动转换为rem.再也不用计算器了(大漠大神推介)
13、Sublime Text Keymap
启动sublimeText的快捷键配置。vscode上面自有一套快捷键设定,个人习惯sublime快捷键
14、Import Cost
引入包大小计算,对于项目打包后体积掌握很有帮助

15、markdownlint
书写md文件的预览插件
16、language-stylus
CSS预处理器styl后缀文件的识别扩展
17、View In Browser
迅速通过浏览器打开html文件
三、框架和库的插件
1、jQuery Code Snippets
jquery 重度患者必须品,废话不多说,上图

2、Bootstrap 3 Sinnpet
常用 bootstrap 的可以下
3、vetur
语法高亮、智能感知、Emmet等

4、VueHelper
snippet代码片段

5、Vue 2 Snippets
快速新建vue页面