最锋利的Visual Studio Web开发工具扩展:Web Essentials使用详解

 更新时间:2021年9月22日 10:07  点击:1569

首先,从Extension Manager里安装:最新版本是19号发布的2.5版

然后重启你的VS开发环境,就可以使用它提供的方便功能了。

Web Essentials对CSS、JavaScript和HTML都提供了很多快捷的功能支持,具体列表如下:

CSS



即时预览Live Web Preview
每次修改的时候,都可以使用CTRL+ALT+Enter快捷键或者点击方案右键上的Live Web Preview选项来即时预览你修改的页面,每次修改完 HTML或者相应的CSS, Ctrl+S保存以后,即时窗口会立即生效。



兼容性CSS代码生成
很多CSS3的代码都不兼容,不同的浏览器有不同的语言,使用此扩展可以通过提升的方式自动添加特殊的CSS标记,例如-moz, -webkit, -ms and -o开头的一些CSS,也只可以选择特定的浏览器。

生产的代码结果如下:

如果你已经添加了一部分的话,该扩展会只添加除这部分之外的CSS代码,不会重复添加的。

 


 

上下箭头可以改变数字值

当你把键盘提示符放在数字上或者数字后面的话,例如5px, 25%, 0.6em, 23等,可以使用CTRL+UP或者CTRL+DOWN来增加或减小数值。

支持CSS, SaSS, LESS和JavaScript文件

 


 

可以生产Base64格式的字符串代替URL地址

如果你通过url来引用背景图的话,那可以直接通过该扩展提供的Embed resource as base64功能将引用转换成base64格式的。

如果嫌内容太长,可以使用折叠功能。

 


 

支持快捷键注释和反注释代码

可以使用CTRL+K, CTRL+C注释或CTRL+K, CTRL+U反注释代码,和VS里C#编程使用的快捷键一样。

 


 

TODO注释特殊支持

任何注释如果包括TODO关键字的话,都会在左边显示一个灰色的特殊标记,来提示你该部分暂未完成。

 


颜色预览

鼠标移动到颜色上的时候,可以预览改颜色,或者在CSS编辑器里也能直接预览颜色

 


 

字体预览

 


 

图片预览

 


 

折叠功能

需要一个生命的选择器,右键可以看到Surround With Region即可将这段代码进行折叠起来。

功能选择以后,它会自动定位到默认的 MyRegion名称那里,让你修改自己的折叠大纲的名称。

 


 

字符排序

点击任意选择器的时候,都可以让该选择器的CSS定义进行排序

 


 

括号匹配

目前支持{},[], ()的匹配。

 


 

压缩代码

该扩展使用的 AjaxMin library来压缩CSS代码的。

 


 

代码折叠

 


 

支持拖拽

支持图片和字体的拖拽,例如如果你拖拽tomxu.jpg图片到该CSS选择器,那么将自动生成如下代码(字体也是类似):

background-image: url('../tomxu.jpg');

 


 

颜色可以在十六进制、rgb、和名称直接互相转换

 


 

可以在选择器上定义只支持哪些浏览器版本

 


 

可以在CSS语法定义只支持哪些浏览器版本

 


 

JavaScript

支持Region折叠

//#region MyRegion

function Example() {

}

//#endregion

 


 

支持代码折叠

 


 

括号匹配

目前支持{},[], ()的匹配。

 


 

同词高亮

在一个文件的所有代码中,如果选择一个变量,那该代码中所有相同的变量都会高亮显示,和C#里一样。

 


 

压缩代码

使用AjaxMin library进行了压缩代码,不仅压缩了,还使用了混淆,牛!

 


 

快捷添加文件

在解决方案里,添加新项的时候,可以直接选择添加JavaScript文件还是Stylesheet文件,方便!

 


 

HTML

支持用户控件的拖拽

以前我们在asp.net webform开发的时候,直接用鼠标将user control拖拽到aspx页面或者模板容器的时候都会自动生成a连接,使用此扩展以后,将会自动注册命名控件,然后生成带有<uc:name/>的代码,可以直接使用咯。

 


 

支持Video和Audio文件的拖拽

也支持对音频和视频文件的拖拽。

以上这篇最锋利的Visual Studio Web开发工具扩展:Web Essentials使用详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持猪先飞。

[!--infotagslink--]

相关文章

  • PHP添加MongoDB扩展实例教程

    由于要使用mikoomi mongodb plugin插件,所以需要php对mongodb的扩展支持,默认通过源安装的php并没有mongodb的扩展支持,具体可以通过php -m|grep mongo 验证 。这里就结...2016-11-25
  • Linux下PHP安装curl扩展支持https例子

    安装curl扩展支持https是非常的重要现在许多的网站都使用了https了,下面我们来看一篇关于PHP安装curl扩展支持https例子吧。 问题: 线上运行的lamp服务器,默认yu...2016-11-25
  • Elasticsearch工具cerebro的安装与使用教程

    这篇文章主要介绍了Elasticsearch工具cerebro的安装与使用教程,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-03-08
  • PHP扩展开发教程(总结)

    PHP是一种解释型的语言,对于用户而言,我们精心的控制内存意味着easier prototyping和更少的崩溃!当我们深入到内核之后,所有的安全防线都已经被越过,最终还是要依赖于真正有责任心的软件工程师来保证系统的稳定运行。1、线...2015-11-08
  • 微信小程序二维码生成工具 weapp-qrcode详解

    这篇文章主要介绍了微信小程序 二维码生成工具 weapp-qrcode详解,教大家如何在项目中引入weapp-qrcode.js文件,通过实例代码给大家介绍的非常详细,需要的朋友可以参考下...2021-10-23
  • 浅谈Vue开发人员的7个最好的VSCode扩展

    这篇文章主要介绍了浅谈Vue开发人员的7个最好的VSCode扩展,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-01-20
  • C#客户端程序Visual Studio远程调试的方法详解

    这篇文章主要给大家介绍了关于C#客户端程序Visual Studio远程调试的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧...2020-06-25
  • 国庆节到了,利用JS实现一个生成国庆风头像的小工具 详解实现过程

    明天就是国庆节了,最近看到好多好友换了国庆风的头像,感觉这个挺有意思,就找到了类似的源码研究了一番,并进行了改造(并非原创,只是进行了改造,只要想分享一下实现思路)。下面就来看看如何实现一键生成国庆风头像小工具。&#8203;...2021-10-01
  • 短视频(douyin)去水印工具的实现代码

    这篇文章主要介绍了市面上短视频(douyin)"去水印"的工具原来是这样实现的,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-03-30
  • PHP安装threads多线程扩展基础教程

    一、下载pthreads扩展下载地址:http://windows.php.net/downloads/pecl/releases/pthreads二、判断PHP是ts还是nts版通过phpinfo(); 查看其中的 Thread Safety 项,这个项目就是查看是否是线程安全,如果是:enabled,一般来说...2015-11-24
  • Eclipse中安装反编译工具Fernflower的方法(Enhanced Class Decompiler)

    这篇文章主要介绍了Eclipse中安装反编译工具Fernflower的方法(Enhanced Class Decompiler),本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-01-20
  • Redis集群水平扩展、集群中添加以及删除节点的操作

    这篇文章主要介绍了Redis集群水平扩展、集群中添加以及删除节点的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-03-25
  • Vue组件文档生成工具库的方法

    本文主要介绍了Vue组件文档生成工具库的方法,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-08-11
  • 时间戳与时间相互转换(php .net精确到毫秒)

    本文给大家分享的时间戳与时间相互转换(php .net精确到毫秒) ,感兴趣的朋友一起学习吧...2020-06-25
  • Linux环境 php mcrypt扩展完全安装笔记

    mcrypt 是 php 里面重要的加密支持扩展库,Linux环境下默认是没开启的,在某些功能时,我们需要安装mcrypt扩展才能正常访问,本文就来讲讲如何完全安装这个模块。 如果你...2016-11-25
  • php安装pcntl扩展实现多进程

    pcntl中的php必须要安装pcntl才可以实现多线程了,在网上找到许多的关于pcntl安装教程,下面整理了一篇比较完整的关于php pcntl安装与使用方法。 pcntl中php实现多进...2016-11-25
  • 介绍Android测试工具Espress及安装使用

    Espresso是一个API精确,简洁小巧,容易学习的针对APP的UI测试代码的小工具,可以用来测试Android开发,本文我们来介绍一下Espresso及Espresso的安装使用。 Espresso是...2016-09-20
  • Swift中的限定扩展详析

    扩展就是向一个已有的类、结构体或枚举类型添加新功能。下面这篇文章主要给大家介绍了关于Swift中限定扩展的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起看看吧。...2020-06-30
  • 基于C++自动化编译工具的使用详解

    本篇文章是对C++中自动化编译工具的使用进行了详细的分析介绍,需要的朋友参考下...2020-04-25
  • 基于C# 写一个 Redis 数据同步小工具

    Redis支持主从同步。数据可以从主服务器向任意数量的从服务器上同步,从服务器可以是关联其他从服务器的主服务器。这篇文章主要介绍了用 C# 写一个 Redis 数据同步小工具,需要的朋友可以参考下...2020-06-25