博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
visual studio code前端插件及常用快捷键【转】
阅读量:7220 次
发布时间:2019-06-29

本文共 1082 字,大约阅读时间需要 3 分钟。

 

通用插件

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

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

687474703a2f2f692e67697068792e636f6d2f696148655569446554555a756f2e676966

Npm Intellisense

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

auto_complete.gif

Document this

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

图片描述

ESlint

ESlint 接管原生 js 提示,可以自定制提示规则。这个比较高玩,不会的就算了,

详情配置请看我的另一篇文章 

HTMLHint

html代码检测

hero.png

Project Manager

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

beautify

格式化代码的工具

Bootstrap 3 Sinnpet

常用 bootstrap 的可以下

Atuo Rename Tag

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

usage.gif

GitLens

丰富的git日志插件

图片描述

fileheader

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

图片描述

filesize

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

_Y52O-UfkK.jpg

Bracket Pair Colorizer

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

图片描述

Vue插件

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

vetur

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

图片描述

VueHelper

snippet代码片段

图片描述

Import Cost

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

图片描述

主题

Material

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

图片描述

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

图片描述

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

screenshot2.png

图片描述

对前端感兴趣的小伙伴,可以关注我一起讨论哦!

GitHub 

转载地址:http://wwhym.baihongyu.com/

你可能感兴趣的文章
《中国人工智能学会通讯》——10.7 结束语
查看>>
物流行业握物联网技术应用盘点
查看>>
OpenDaylight技术指导委员会主席Colin Dixon:网络开源软件的发展
查看>>
啥样的超级计算机能给海洋做“CT”?
查看>>
ARM公司收购Apical,欲致力推进“目联网”技术
查看>>
各地纷纷抢建互联网数据中心
查看>>
永信至诚助“海南省首届网络安全大赛”决赛圆满收官
查看>>
科普知识:什么是攻击隐写术
查看>>
趋势所需 统一存储逐渐走向成熟
查看>>
聚合、增值和生态:神州数码云科服务再拓新局
查看>>
"运营"与"增长黑客"之间差一个数据驱动
查看>>
勒索软件从未停止
查看>>
《VMware Virtual SAN权威指南》一2.3.4 VMkernel网络
查看>>
AMD:将在机器学习GPU领域“引发从来没有过的竞争”
查看>>
《计算机视觉:模型、学习和推理》一2.4 条件概率
查看>>
Riverbed将SD-WAN融入WAN优化
查看>>
信息管税邂逅大数据,加速破解新常态下税收剪刀差
查看>>
从应用角度谈谈初创企业服务器采购建议与解决方案
查看>>
修改CPU 对抗计算机病毒
查看>>
8个方法让你成为更优秀的程序员
查看>>