最锋利的VS Web开发工具扩展:Web Essentials详解

原文地址:http://developer.51cto.com/art/201111/303492.htm

Web Essentials是目前为止见过的最好用的VS扩展工具了,具体功能请待我一一道来。

首先,从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选择器,那么将自动生成如下代码(字体也是类似):

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

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

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

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

JavaScript

◆ 支持Region折叠

  1. //#region MyRegion
  2. function Example() {
  3. }
  4. //#endregion

◆ 支持代码折叠

◆ 括号匹配

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

◆ 同词高亮

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

◆ 压缩代码

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

◆ 快捷添加文件

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

HTML

◆ 支持用户控件的拖拽

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

◆ 支持Video和Audio文件的拖拽

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

原文:http://www.cnblogs.com/TomXu/archive/2011/11/22/2258849.html

时间: 2024-10-09 18:45:02

最锋利的VS Web开发工具扩展:Web Essentials详解的相关文章

移动web开发之像素和DPR详解

前话: 像素在web开发中几乎天天用到,但到底什么是像素,移动端和桌面端的像素有区别吗,缩放对像素有影响吗,视网膜屏幕和像素有什么关系?关于这些问题,可能就不清楚了.本文将介绍关于像素的相关知识 什么是像素: 像素,又称画素,是图像显示的基本单位,译自英文“pixel”,pix是英语单词picture的常用简写,加上英语单词“元素”element,就得到pixel,故“像素”表示“图像元素”之意,有时亦被称为pel(picture element) 像素是网页布局的基础.一个像素就是计算机能够显

最锋利的Visual Studio Web开发工具扩展:Web Essentials详解(转)

Web Essentials是目前为止见过的最好用的VS扩展工具了,具体功能请待我一一道来. 首先,从Extension Manager里安装:最新版本是19号发布的2.5版 然后重启你的VS开发环境,就可以使用它提供的方便功能了. Web Essentials对CSS.JavaScript和HTML都提供了很多快捷的功能支持,具体列表如下: CSS   即时预览Live Web Preview每次修改的时候,都可以使用CTRL+ALT+Enter快捷键或者点击方案右键上的Live Web Pr

Web开发之新闻发布系统详解

刚刚做完的新闻发布系统,在这里终结一下! 在做新闻发布系统时用的软件有: (1)Myeclipse (2)Mysql 1.首先现在myeclipse中建立了一个名字叫news的项目 我先做的第一个功能是登陆功能 登陆功能: 需要连接数据库,进行客户端与服务器进行信息交互. 在开始写登陆功能时,也遇到了许多问题,如连接不上数据库,连接上数据库了却又读取不了数据库中的信息. 在开始写登陆功能是在jsp页面中写的,后来才知道这样写本不好,虽然很简单,但如果项目越做越大,你就会发现在jsp页面 中写代码

100+ 超全的web开发工具和资源

转载出处:https://xituqu.com/170.html 作为Web开发者,这是好的时代,也是坏的时代.Web开发技术也在不断变化.虽然很令人兴奋,但是这也意味着Web开发人员需要要积极主动的学习新技术和新的编程语言,并愿意和渴望接受新的挑战,以适应变化.新的挑战可能会包括一些开发上的要求,如利用适应现有的框架来满足业务需求.测试一个网站,能从中知道出了哪些技术上的问题,并且我们针对这些问题进行优化和消除.便于后端的开发进程加快和测试.所以我们列出了完整的web开发所需要的工具和资源,助

超全的web开发工具和资源

作为Web开发者,这是好的时代,也是坏的时代.Web开发技术也在不断变化.虽然很令人兴奋,但是这也意味着Web开发人员需要要积极主动的学习新技术和新的编程语言,并愿意和渴望接受新的挑战,以适应变化.新的挑战可能会包括一些开发上的要求,如利用适应现有的框架来满足业务需求.测试一个网站,能从中知道出了哪些技术上的问题,并且我们针对这些问题进行优化和消除.便于后端的开发进程加快和测试.所以我们列出了完整的web开发所需要的工具和资源,助力开发者提高开发效率!学不止步,让我们努力成为一个优秀的开发者!

深受程序员喜爱的4款Web开发工具,可极大的提高生产力

对于开发人员而言,时间始终是稀缺资源. 从严格的最后期限到多个项目——到出乎意料的需求——我们的时间总是有需求的.因此,我们一直在寻找有助于提高生产率的工具和流程. 接下来小编就将介绍4种Web开发工具,希望它们能够给身为程序员的你带来一定的额外生产力. 一起看看吧 一.通过Oh My Zsh掌握命令行 Windows和OS X的默认命令行界面(命令Prompt和Bash)可能令人生畏且难以自定义.如果你不是这方面的专家,你可能会重复那些可以自动完成的琐碎工作. Oh My Zsh是一个基于Zs

6个好用的Web开发工具

在过去的几年间,涌现出了很多Web开发工具,它们大多还是比较吸引人的,方便了我们的工作.我们可以学习一下这些新东西,短时间就可以拓宽思路(PHP100推荐:学习10分钟,改变你的程序员生涯).这些应用允许我们我们实时编辑和预览客户端代码:HTML,CSS以及JavaScript.更重要的是,他们基本上都是开源的,你可以免费的使用它们用来教学或调试程序. 个人而言,这些好用的开发工具极大地帮助了我的工作,当我被JavaScript或CSS的代码卡住的时候,我就可以在环境上分享我的代码,请其他开发者

Web 开发工具控件ASPxperience Suite

ASPxperience Suite 是我们下一代的 Web 开发工具控件,可以为客户带来更多优秀体验,包括导航.数据布局管理以及嵌在 Web 应用程序中的浮动控件的应用.它从底层编写,然后使用支持 ASP.NET 2.0 Framework ,并且完全支持 out-of-the-box AJAX .此产品包含在产品集合 DXperience Universal Subscription 中. 具体功能: 包含在 ASPxperience Suite 中的控件只产生少量的 HTML 代码 可以根

JAVA-JAVA WEB开发工具下载

JAVA WEB开发工具下载 1.JDK下载程序名:jdk-8u141-windows-x64.exe下载地址:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html