vs code 插件
2017-04-19 14:07
330 查看
大家好,我是Moer.
从 ATOM 跳槽到 VScode 来已经快半年了,VScode现在已经越来越完善。
在这里,我会给你们推荐很多实用的插件,让你对 vscode 有更深刻的体会,渐渐地你就会知道它有多好用。
走马观花前,请先将你的 vscode 更新到最新版本。
![](/img/bVCgml)
![](/img/bVCgmy)
![](/img/bVCgnd)
![](/img/bVCgnn)
![](/img/bVCgnp)
![](/img/bVCgEZ)
![](/img/bVCgn4)
![](/img/bVJzm8)
![](/img/bVCgBn)
![](https://segmentfault.com/image?src=https://raw.githubusercontent.com/eamodio/vscode-git-codelens/master/images/gitlens-preview1.gif&objectId=1190000006697219&token=96411a6b6f6f8ca62c72404617c28384)
![](https://segmentfault.com/image?src=https://github.com/zhaopengme/vscode-fileheader/raw/master/fileheader.gif&objectId=1190000006697219&token=76a9aad486f7c58322c42beefd769345)
![](/img/bVJ9Yf)
![](https://segmentfault.com/image?src=https://github.com/CoenraadS/BracketPair/raw/master/images/example.png&objectId=1190000006697219&token=ebbc85129614f4b5de6b6fdbd2d8a6c7)
![](/img/bVJw3Y)
![](https://segmentfault.com/image?src=https://github.com/OYsun/vscode-VueHelper/raw/dev/src/images/description.gif&objectId=1190000006697219&token=5be8f2312ee445c271c21e0e72e853e5)
![](/img/bVCgCC)
![](/img/bVJxd7)
![](/img/bVCgCF)
![](/img/bVCgDb)
对前端感兴趣的小伙伴,可以关注我一起讨论哦!
GitHub https://github.com/Moerj
从 ATOM 跳槽到 VScode 来已经快半年了,VScode现在已经越来越完善。
在这里,我会给你们推荐很多实用的插件,让你对 vscode 有更深刻的体会,渐渐地你就会知道它有多好用。
走马观花前,请先将你的 vscode 更新到最新版本。
通用插件
HTML Snippets
超级实用且初级的 H5代码片段以及提示HTML CSS Support
让 html 标签上写class 智能提示当前项目所支持的样式JavaScript Atom Grammar
使用 atom 风格的语法高亮,对于习惯浏览 atom 风格代码高亮的人实用。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已经原生支持)ESlint
ESlint 接管原生 js 提示,可以自定制提示规则。这个比较高玩,不会的就算了,我之前发过一篇文章 sublime 配置 Atom js 语法校验中有提到,他们的配置文件是通用的。HTMLHint
html代码检测Project Manager
在多个项目之前快速切换的工具beautify
格式化代码的工具Bootstrap 3 Sinnpet
常用 bootstrap 的可以下Atuo Rename Tag
修改 html 标签,自动帮你完成尾部闭合标签的同步修改,和 webstorm 一样。GitLens
丰富的git日志插件![](https://segmentfault.com/image?src=https://raw.githubusercontent.com/eamodio/vscode-git-codelens/master/images/gitlens-preview1.gif&objectId=1190000006697219&token=96411a6b6f6f8ca62c72404617c28384)
fileheader
顶部注释模板,可定义作者、时间等信息,并会自动更新最后修改时间![](https://segmentfault.com/image?src=https://github.com/zhaopengme/vscode-fileheader/raw/master/fileheader.gif&objectId=1190000006697219&token=76a9aad486f7c58322c42beefd769345)
filesize
在底部状态栏显示当前文件大小,点击后还可以看到详细创建、修改时间Bracket Pair Colorizer
让括号拥有独立的颜色,易于区分。可以配合任意主题使用。![](https://segmentfault.com/image?src=https://github.com/CoenraadS/BracketPair/raw/master/images/example.png&objectId=1190000006697219&token=ebbc85129614f4b5de6b6fdbd2d8a6c7)
Vue插件
以下推荐vue框架所需的插件vetur
语法高亮、智能感知、Emmet等VueHelper
snippet代码片段![](https://segmentfault.com/image?src=https://github.com/OYsun/vscode-VueHelper/raw/dev/src/images/description.gif&objectId=1190000006697219&token=5be8f2312ee445c271c21e0e72e853e5)
主题
One Dark Theme
来至 ATOM 的 one dark 主题,好看实用One Monokai
有点Monokai与One Dark的混血Material
冷门、好看、实用。注意,这里说的不是很火的Material-Theme,因为这货在 vscode 上目前代码高亮还很渣。Material Neutral
和上面是同出一门的主题。对前端感兴趣的小伙伴,可以关注我一起讨论哦!
GitHub https://github.com/Moerj
相关文章推荐
- 分享一下自己写的一个vscode-leetcode插件
- VSCode插件开发全攻略(六)开发调试技巧
- VsCode 常用快捷键、debug菜单、debug插件
- VSCode拓展插件推荐(HTML、Node、Vue、React开发均适用)
- vscode 插件开发入门
- VS Code中Matlab插件安装设置
- vscode使用Better Align插件以及快捷键配置实例
- VSCODE 插件初探,顺便还有博主的写的背景图插件
- VSCODE 插件初探,顺便还有博主的写的背景图插件
- VSCode常用插件
- Vscode 前端插件收集-2018-1月更新
- VsCode插件整理
- VS Code 插件安装(待续...)
- VSCode插件开发全攻略(十)打包、发布、升级
- 我的 React Native 技能树点亮计划 の 为 React Native 开发准备的 VS Code 插件
- VSCODE 插件初探,顺便还有博主的写的背景图插件
- VSCODE 插件初探,顺便还有博主的写的背景图插件
- VSCode安装go语言开发环境,go插件问题解决
- IOS JSBox 安装 VSCode 通过插件JSBox 同步编辑代码到iPhone