大家好,我是Moer.
VScode现在已经越来越完善。性能远超Atom和webstorm,你有什么理由不用它?
在这里,我会给你们推荐很多实用的插件,让你对 vscode 有更深刻的体会,渐渐地你就会知道它有多好用。

走马观花前,请先将你的 vscode 更新到最新版本。

通用插件

HTML Snippets

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

HTML CSS Support

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

Debugger for Chrome

让 vscode 映射 chrome 的 debug功能,静态页面都可以用 vscode 来打断点调试,真666~
配置稍微复杂一些,哪天心情好我再另写教程吧~

jQuery Code Snippets

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

vscode-icon

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

Path Intellisense

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

Npm Intellisense

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

Document this

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

ESlint

ESlint 接管原生 js 提示,可以自定制提示规则。这个比较高玩,不会的就算了,
详情配置请看我的另一篇文章 https://segmentfault.com/a/11...

HTMLHint

html代码检测

Project Manager

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

beautify

格式化代码的工具

Bootstrap 3 Sinnpet

常用 bootstrap 的可以下

Atuo Rename Tag

修改 html 标签,自动帮你完成尾部闭合标签的同步修改,不过有些bug。

GitLens

丰富的git日志插件

fileheader

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

filesize

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

Bracket Pair Colorizer

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

Vue插件

以下推荐vue框架所需的插件

vetur

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

VueHelper

snippet代码片段

主题

Material

冷门、好看、实用。此主题已停更许久

Dracula

目前我觉得是vscode上最漂亮的主题,vscode 1.11+允许自定义statusBar等全局ui后,该主题也跟进改了很多小细节,良心!~

One Dark Pro

源于Atom,老版本的Atom One Dark主题可以扔了.

对前端感兴趣的小伙伴,可以关注我一起讨论哦!
GitHub https://github.com/Moerj

65 条评论
array_huang · 2017年04月29日

请问,Document this原生支持的意思就是说不需要安装该插件了?那么如何使用呢?

+4 回复

Heekei · 2016年12月16日

推荐个主题:Monokai,顺便问下楼主,有没有 保存sass时自动编译出同名css文件在sass所在文件夹的 插件?

+1 回复

0

同问!每次编译sass还需要装其他软件或者配制自动自编译,好麻烦哦,如果可以直接编译就好了。

九亿少女 · 2017年04月09日
0

@依米 所以还是用LESS好了,然后装个“easy less”,保存自动编译

Heekei · 2017年04月10日
0

easy-sass这个插件可以实现你们说的功能

guchenghao · 2017年06月03日
白丁 · 2017年03月04日

Bootstrap 写成了 Bootstarp

+1 回复

0

已修正

moer 作者 · 2017年03月06日
白夜 · 2016年08月24日

主题的字体看着挺舒服的,请问下字体名?

回复

moer 作者 · 2016年08月24日

来至 Mozilla 的 fira mono

回复

白夜 · 2016年08月24日

感谢回复~!

回复

shalldie · 2016年08月30日

0.0 推荐一个插件: background 。很萌的...试试呗

回复

0

这个插件好坑啊,code 搞坏了,重新安装了

子凡 · 2017年03月11日
0

@子凡 提示code损坏 但是并不需要重装

cc龙虾 · 2017年08月05日
oberma · 2016年09月19日

楼主大大:guides代码线条值得你拥有

回复

2

关于缩进参考线,最新版vscode配置"editor.renderIndentGuides": true即可,不需插件

moer 作者 · 2017年03月06日
0

补充:"editor.renderIndentGuides": true,这是默认设置

Neonlite · 2017年07月25日
moer 作者 · 2016年09月19日

这插件不错,谢谢推荐

回复

moer 作者 · 2016年12月16日

monokai已经很出名所以我就没推荐了,sass自动编译主流都是用gulp集成,和编辑器插件没关系了。不知道相关知识的话需要去补一下gulp,node的知识点了。

回复

0

目前新版vscode已经默认集成Monokai主题

moer 作者 · 2017年03月06日
bukas · 2016年12月23日

这个项目管理插件比较简单好用:projects

回复

shaynewang · 2016年12月27日

插件都很好,但这个"正在从某网站拔污图.....",某网站是哪里...?

回复

前端小白 · 2017年02月10日

不知道怎么回事 老是上面不停的提示 在5分钟内xxxx语言意外终止了 而且关也关不掉的提示框。真恶心 怎么解决。

回复

艾欧泽亚 · 2017年03月10日

想问下怎么修改插件的自定义属性的。

回复

0

ctrl/cmd+, 设置,找到相关插件的配置

moer 作者 · 2017年03月11日
九亿少女 · 2017年04月09日

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

这个插件我用不了啊,怎么配制和使用啊,求大神赐教~
我求的是这个,不知道对不对,https://marketplace.visualstu...

这个不行的话还有其他可以加版本信息或者版权的插件吗?求推荐

回复

0

上面这个确实是用不了的,我换成vscode-fileheader就OK了

九亿少女 · 2017年04月09日
0

快捷键ctrl+alt+i调用

naruto · 2017年10月24日
nonoroazoro · 2017年04月18日

来一发极简多终端配置同步插件:https://marketplace.visualstu...

回复

笨拙的大白 · 2017年04月21日

博主,请问javascript atom grammar-这个插件您经常用吗?这个插件安装后再打开比如压缩过得js 文件,比如vue.min.js就会卡死?请问您遇到过吗

回复

0

打开压缩文件都会出现卡死现象,目前这个插件我已经废弃不再使用了.

moer 作者 · 2017年04月30日
0

这样啊。我也卸载了

笨拙的大白 · 2017年04月30日
笨拙的大白 · 2017年04月30日

Dracula还有这个主题插件如果安装的话,再换别的主题,不知道为何会将用户设置里的东西给弄没了

回复

JohnnyChui · 2017年05月15日

试过一切的标签中自动补全class name的插件都没有效果...除了html css support 在div.类名这样的书写方式下可以出提示...有什么解决办法吗?这是逼我用webstorm布局啊

回复

0

应该是更新了之后默认设置的问题,你试着按一下ctrl+space

Devinnn · 2017年06月07日
lcwarning · 2017年06月05日

就没有 sublime liveload之类的插件,不然写页面很累的。

回复

1

那些应该是browserSync 或 webpack-hot-middleware 做的事情, 所以如果我是 vscode 插件开发者, 同样不会去做重复的事情, 况且他们已经做的已经很完善.

moer 作者 · 2017年06月05日
0

Live Server Preview. 随手一搜就是了,请善用搜索引擎...

moer 作者 · 2017年06月05日
0

谢谢博主!

lcwarning · 2017年06月06日
载入中...
moer moer

790 声望

发布于专栏

大前端时代

很实用的前端知识

22 人关注